/* .first-container {
    display: grid;
    grid-auto-rows: minmax(45vh, auto);
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
} */

@media (min-width: 400px) {
    .first-container {
        display: grid;
        grid-auto-rows: minmax(400px, 70vh);
        grid-template-columns: 1fr;
        gap: 10px;
        /* margin: 10px; */
    }

    .inner-container {
        display: grid;
        grid-template-rows: minmax(200px, 350px) 150px 50px 80px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
            "image image"
            "header header"
            "sale sale"
            "buttons buttons";
    }
}

@media (min-width: 768px) {
    .first-container {
        display: grid;
        grid-auto-rows: minmax(45vh, auto);
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .inner-container {
        display: grid;
        grid-template-rows: 3fr 1fr 1fr 100px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
            "image image"
            "header header"
            "sale sale"
            "buttons buttons";
    }
}

@media (min-width: 1024px) {
    .first-container {
        display: grid;
        grid-auto-rows: minmax(45vh, auto);
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .inner-container {
        display: grid;
        grid-template-rows: 3fr 1fr 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
            "image image"
            "header header"
            "sale sale"
            "buttons buttons";
    }
}



.inner-image {
    grid-area: image;
}

.inner-1 {
    grid-area: header;
}

.inner-2 {
    grid-area: sale;
}

.inner-3 {
    grid-area: buttons;
}

.item-4 {
    grid-area: footer;
    border: 1px solid #000;
}

.item {
    padding: 10px;
}

.product-img {
    /* height: max(300px);
    width: fit-content; */
}