@import "styles.css";

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.product-section {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    height: 100%;
    flex: 1;
}
.product-section div {
    padding-left: 1rem;
    padding-top: 1rem;
}
.product-section ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}
.product-section-final-message {
    margin-top: 1.5rem;
}

.products-image-container {
    width: 100%;
    aspect-ratio: 8/3;
}

.products-image-container img {
    width: 100%;
    height: 100%;
}
@media (min-width: 768px) {
    .product-section h2 {
        font-size: 1.3rem;
    }

    .product-section h3 {
        font-size: 1.2rem;
    }

    .product-section p {
        font-size: 1.1rem;
    }

    .product-section ul {
        font-size: 1.1rem;
    }

    .products-image-container {
        aspect-ratio: 5/1;
        object-fit: cover;
    }
}

@media (min-width: 1200px) {
    .container {
        overflow-y: hidden;
        flex-direction: row;
    }
    .product-section {
        overflow-y: auto;
    }
    .product-section h2 {
        font-size: 1.5rem;
    }

    .product-section h3 {
        font-size: 1.4rem;
    }

    .product-section p {
        font-size: 1.2rem;
    }

    .product-section ul {
        font-size: 1.2rem;
    }

    .container {
        overflow-y: hidden;
        flex-direction: row;
    }
    .products-image-container {
        width: 50%;
        height: 100%;
    }
    .products-image-container img{
        object-fit: cover;
    }
}