/* ================== Grids =================== */
.grid {
    display: grid;
    gap: 5px;
}

/* ============= TWO COLUMN GRID ============ */
.col-2-left-expand {
    grid-template-columns: 6fr 4fr;
}

.col-2-even {
    grid-template-columns: repeat(2, 1fr);
}

.col-2-right-expand {
    grid-template-columns: 4fr 6fr;
}

/* =========== THREE COLUMN GRID =========== */
.col-3-even {
    grid-template-columns: repeat(3, 1fr);
}

.col-3-left-expand {
    grid-template-columns: 4fr 3fr 3fr;
}

.col-3-mid-expand {
    grid-template-columns: 3fr 4fr 3fr;
}

.col-3-right-expand {
    grid-template-columns: 3fr 3fr 4fr;
}

/* =========== GRID CARD IMG =========== */
.grid-card-img {
    max-height: 8rem;
    max-width: 50%;
    transform: translateY(25%);
}

.grid-2-card-img {
    max-height: 70%;
    max-width: 50%;
    transform: translateY(20%);
}