:root {
    /* font */
    --primary_font: "Lato", sans-serif;
    /* Color */
    --primary_color: #000000;
    --text_color: #FFFFFF;
    /* BG */
    --primary_bg: linear-gradient(180deg, rgba(19, 165, 130, 0) 0%, rgba(18.55, 164.89, 129.77, 0.95) 100%);
    /* border radius */
    --primary_radius: 20px;
    --secondary_radius: 16px;
}

.d2c_gallery_wrapper {
    padding: 100px 0;
    font-family: var(--primary_font);
}
.d2c_gallery_wrapper h1 {
    color: var(--primary_color);
    font-size: 52px;
}
.d2c_gallery_wrapper .d2c_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
}
.d2c_gallery_wrapper .d2c_image_wrapper {
    width: 100%;
    height: 296px;
    border-radius: var(--primary_radius);
    overflow: hidden;
    transition: 0.4s all;
}
.d2c_gallery_wrapper .d2c_image_wrapper a {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.d2c_gallery_wrapper .d2c_image_wrapper img {
    object-fit: cover;
    object-position: top;
    border-radius: var(--primary_radius);
    transition: 0.4s all;
}
.d2c_image_wrapper:hover img {
    transform: scale(1.1);
    transition: 0.4s all;
}




@media only screen and (min-width:0px) and (max-width:767px) {
    .d2c_gallery_wrapper {
        padding: 50px 0;
    }
    .d2c_gallery_wrapper h1 {
        color: var(--primary_color);
        font-size: 38px;
    }
    .d2c_gallery_wrapper .d2c_grid {
        grid-template-columns: 1fr;
        grid-row-gap: 12px;
    }
    .d2c_gallery_wrapper .d2c_image_wrapper {
        width: 100%;
        height: 300px;
        border-radius: var(--secondary_radius);
    }
    .d2c_gallery_wrapper .d2c_image_wrapper img {
        border-radius: var(--secondary_radius);
    }
}

@media only screen and (min-width:768px) and (max-width: 991px) {
    .d2c_gallery_wrapper {
        padding: 60px 0;
    }
    .d2c_gallery_wrapper h1 {
        color: var(--primary_color);
        font-size: 40px;
    }
    .d2c_gallery_wrapper .d2c_grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .d2c_gallery_wrapper .d2c_image_wrapper, 
    .d2c_gallery_wrapper .d2c_image_wrapper img {
        border-radius: var(--secondary_radius);
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .d2c_gallery_wrapper {
        padding: 70px 0;
    }
    .d2c_gallery_wrapper h1 {
        color: var(--primary_color);
        font-size: 40px;
    }
    .d2c_gallery_wrapper .d2c_grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .d2c_gallery_wrapper .d2c_image_wrapper {
        height: 280px;
    }
}

@media only screen and (min-width:1200px) and (max-width:1500px) {
    .d2c_gallery_wrapper h1 {
        font-size: 45px;
    }
}