.grid-container {
    width:100%;
    border: solid 1px #eeeeee;
    padding: 0.5vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 24.5vw;
    grid-gap: 0.5vw;
}

.griditem {
    background-size: cover;
    background-position: center;
    padding: 2vw;
    font-size: 1.5vw;
    color: var(--primary-color);
    box-sizing: border-box;
}

.griditem:hover {
    cursor: pointer;
    filter: brightness(70%) grayscale(100%);
}

.image1 {
    background-position: left 40%;
    background-image: url("/assets/img/dark-lip-neutralization-subtle-tone.webp");
}

.image2 {
    background-position: left 22%;
    background-image: url("/assets/img/neutralisation-anim.webp");
}

.image3 {
    background-position: left 14%;
    background-image: url("/assets/img/lip-blush-natural-color-enhancement.webp");
}

.image4 {
    background-position: center top;
    background-image: url("/assets/img/lip-anim.webp");
}

.image6 {
    background-position: left 14%;
    background-image: url("/assets/img/combination-anim.webp");
}

.image5 {
    background-position: left 20%;
    background-image: url("/assets/img/machine-combo-brows-training-demonstration.webp");
}

.image8 {
    background-position: left 30%;
    background-image: url("/assets/img/ombrebrows-anim.webp");
}

.image7 {
    background-position: center center;
    background-image: url("/assets/img/seven-aesthetics-ombre-brows-close.webp");
}

@media (min-width: 769px) {
    .grid-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .image5 {
        background-position: left 25%;
        background-image: url("/assets/img/combination-anim.webp");
    }
    
    .image6 {
        background-position: center 20%;
        background-image: url("/assets/img/machine-combo-brows-training-demonstration.webp");
    }
    
    .image7 {
        background-position: left 30%;
        background-image: url("/assets/img/ombrebrows-anim.webp");
    }
    
    .image8 {
        background-position: center center;
        background-image: url("/assets/img/seven-aesthetics-ombre-brows-close.webp");
    }
}