.product-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2vw;
}

.product-grid a, .product-grid div{
    width: 400px;
    height: 400px;
}

@media screen and (max-width: 1290px) {
    .product-grid{
        grid-template-columns: 1fr 1fr;
    }
    .product-grid a, .product-grid div{
        width: 40vw;
        height: 40vw;
    }
}

@media screen and (max-width: 720px) {
    .product-grid{
        grid-template-columns: 1fr;
    }
    .product-grid a, .product-grid div{
        width: 80vw;
        height: 80vw;
    }
}
.product-grid div{
    position: absolute;
    background-color: rgba(0, 0, 0, .3);
    border: 1px solid rgba(0, 0, 0, 1);
    opacity: 0;
}

.product-grid div:hover, .product-grid a:focus > div{
    opacity: 1;
    transition-property: opacity;
    transition-duration: .4s;
    transition-timing-function: ease-out;
}

.product-grid-container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px;
}

.product-grid{
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}