.grid-container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, minmax(250px, 1fr));
    grid-auto-rows: 200px;

}

.grid-item {
    position: relative;
    background-color: antiquewhite;
    text-align: center;
    border-radius: 3px;
    transition: all .3s linear;
    cursor: pointer;
    box-shadow: inset 0px 2px 3px rgba(83, 83, 83, 0.5);
}



.item1 {
    background-image: url(assets/fondos/rosa2.png);
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}


.item2 {
    background-image: url(assets/fondos/crema.png);
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.item3 {
    background-image: url(assets/fondos/crema.png);
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.item4 {
    background-image: url(assets/fondos/azul.png);
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.item5 {
    background-image: url(assets/fondos/turquesa.png);
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.item6 {
    background-image: url(assets/fondos/rosa.png);
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.item7 {
    background-image: url(assets/fondos/turquesa.png);
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.item8 {
    background-image: url(assets/fondos/rosa.png);
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}


/* After items */

.item1::after {

    position: absolute;
    content: "";
    background-image: url(assets/nails2.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-position: center;
    left: 0%;
}

.item2::after {

    position: absolute;
    content: "";
    background-image: url(assets/powder2.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-position: center;
    left: 0%;
}


.item3::after {

    position: absolute;
    content: "";
    background-image: url(assets/paleta.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-position: center;
    left: 0%;
}

.item4::after {

    position: absolute;
    content: "";
    background-image: url(assets/crema.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-position: center;
    left: 0%;
}

.item5::after {

    position: absolute;
    content: "";
    background-image: url(assets/brushgrid.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-position: center;
    left: 0%;
}

.item6::after {

    position: absolute;
    content: "";
    background-image: url(assets/mascara.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-position: center;
    left: 0%;
}

.item7::after {

    position: absolute;
    content: "";
    background-image: url(assets/lipstick1.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-position: center;
    left: 0%;
}

.item8::after {

    position: absolute;
    content: "";
    background-image: url(assets/lipgloss.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-position: center;
    left: 0%;
}


.grid-inner{
    z-index: 5;
    position: absolute;
    text-align: center;
    top: 50%;
    font-size: 2.5rem;
    text-transform: uppercase;
    font-family: "Forum";
    color: #fff;
    opacity: 0;
    display: block;
    text-align: center;
    width: 100%;
    background-color: rgba(34, 34, 34, 0.85);
    transition: all .4s linear;
}

.grid-item::before{
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(53, 53, 53, 0.5);
    
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    z-index: 2;
    overflow: hidden;
}

.grid-item:hover::before{
    opacity: 1;
}

.grid-item:hover .grid-inner{
    opacity: 1;
}

@media (min-width: 650px) {

    .grid-container {
        display: grid;
        gap: 1rem;
        justify-content: center;
        grid-template-areas:
            "uno uno dos"
            "uno uno tres"
            "cuatro cinco cinco"
            "seis siete ocho";
        grid-template-columns: repeat(3, minmax(200px, 400px));
        grid-template-rows: repeat(4, 200px);
    }


    .item1 {
        grid-area: uno;

    }

    .item2 {
        grid-area: dos;
    }

    .item3 {
        grid-area: tres;
    }

    .item4 {
        grid-area: cuatro;
    }

    .item5 {
        grid-area: cinco;
    }

    .item6 {
        grid-area: seis;
    }

    .item7 {
        grid-area: siete;
    }

    .item8 {
        grid-area: ocho;
    }


}