.basic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    grid-auto-rows: minmax(280px, auto);
    grid-gap: 3em;
    padding-top: 3em;
    padding-bottom: 1em;
    align-items: center;
    justify-content: center;
}

/* edit card dimension to 250 x 250 if you want it to git 4 items in a row */
.card {
    display: flex;
    overflow: hidden;
    width: 280px;
    height: 360px;
    position: relative;
    border-radius: 1.8px;
    justify-content: center;
/*     margin-bottom: 1em; */
    margin: auto;
}

.card img {
    height: 280px;
    width: 280px;
    border-radius: 1.8px;
    justify-content: center;
}

/* not sure about this feature yet.. */
/* .card img:hover {
    transform: translateY(-10px) scale(1.1);
    transition: 400ms ease-in-out;
} */

.card-content {
    position: absolute;
    bottom: 0;
    text-align: center;
}

.content-head {
    padding-bottom: .2em;
}

.content-body {
    padding-top: .1em;
    justify-content: center;
}

.content-head a {
    color: var(--cl-font);
}

.content-head a:hover {
    text-decoration: underline;
}

.content-body a {
    color: var(--cl-font);
}

.content-body a:hover {
    text-decoration: underline;
}