:root{
    --primary-color: #222222;
    --dark-primary-color: #ffffff;
    --secondary-color: #f5f5f5;
    --text-color: #777777;
    --divider-color: #DDDDDD;
    --dark-text-color: #AEAEAE;
    --dark-divider-color: rgba(255, 255, 255, 0.10);
    --error-color: rgba(233, 87, 87);
    --accent-font: "Hanken Grotesk", sans-serif;
    --default-font: "DM Sans", sans-serif;
    --transition: all 0.3s ease-in-out;
    --image-filter: grayscale(100%);
    --image-filter-hover: grayscale(0);
}


/* PRODUCT SECTION */
.product_container {
    width: 100%;
    padding: 120px 8%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    background-color: var(--secondary-color);
}

/* Title already styled via .section_title */

/* VIDEO WRAPPER */
.product_video_wrapper {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.product_video {
    width: 100%;
    max-width: 200px;
    max-height: 300px; /* limit height */
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: var(--transition);
    background-color: #000;
}


.product_video:hover {
    transform: scale(1.01);
}

/* PRODUCT GRID */
.product_grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/*.product_card {*/
/*    width: 100%;*/
/*    height: 85%;*/
/*    background-color: var(--dark-primary-color);*/
/*    padding: 20px;*/
/*    border-radius: 30px;*/
/*    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
/*    overflow: hidden;*/
/*    transition: var(--transition);*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

.product_card img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4; 
    object-fit: cover;
    border-radius: 20px;
    transition: var(--transition);
}

.product_card img:hover {
    filter: var(--image-filter-hover);
}

/* -------------------- RESPONSIVE SCREENS -------------------- */

@media screen and (max-width: 1200px) {
    .product_grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .product_video_wrapper{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .product_grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .product_video_wrapper{
        grid-template-columns: repeat(2, 1fr);
    }
    .product_video {
        max-width: 100%;
    }
    .title{
        font-size: 1rem;
    }
}

@media screen and (max-width: 500px) {
    .product_container{
        gap: 30px;
        padding: 100px 4%;
    }
    .product_grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    align-items: center;
        place-items: center;
        
    }

    .product_video_wrapper{
        align-items: center;
        place-items: center;
        grid-template-columns: repeat(1, 1fr);
    }
    .product_video {
        border-radius: 20px;
        max-width: 250px;
    max-height: 350px;
    }

    .product_card {
        max-width: 250px;
        height: 100%;
        padding: 10px;
    }
   .product_container .title{
        font-size: 1rem;
        margin-top: 2rem;
    }
    .product_card img{
        /*height: auto;*/
        max-width: 250px;
        max-height: 400px;
    }
}