/* ========================================================================== */
/* PRODUCT PAGE                                                         */
/* ========================================================================== */

.product-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto auto;
    gap: 1rem;
    padding: 1rem;
}

.product-title {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
}

.product-image {
    grid-column: 1;
    grid-row: 2;
}

.product-info {
    grid-column: 2;
    grid-row: 2;
}

.add-to-cart-btn {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    margin-top: 1rem;
}

.product-pricetag {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin-top: 1rem;
}

.product-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 1024px) and (min-width: 769px) {
    .product-image {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }

    .product-info {
        grid-column: 1 / -1;
        grid-row: 3;
        text-align: center;
        padding: 0 1rem;
    }

    .add-to-cart-btn {
        grid-column: 1 / -1;
        grid-row: 4;
        justify-self: center;
    }
}

@media (max-width: 768px) {
    .product-container {
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto auto auto;
    }

    .product-title {
        grid-column: 1;
        grid-row: 1;
        text-align: center;
    }

    .product-image {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
    }

    .product-info {
        grid-column: 1;
        grid-row: 3;
        text-align: justify;
    }

    .add-to-cart-btn {
        grid-column: 1;
        grid-row: 4;
        justify-self: center;
    }
}