/* Section Beginning */
.story-begining {
    background:
            linear-gradient(180deg, rgba(12, 10, 9, 0.00) 50%, #0C0A09 100%),
            linear-gradient(180deg, #0C0A09 0%, rgba(12, 10, 9, 0.00) 50%),
            linear-gradient(0deg, rgba(12, 10, 9, 0.60) 0%, rgba(12, 10, 9, 0.60) 100%)lightgray 50% / cover no-repeat;
}

.story-begining .section-container .main-content {
    padding: 40px 20px 20px 20px;
    background:
            linear-gradient(180deg, rgba(12, 10, 9, 0.00) 50%, #0C0A09 100%),
            linear-gradient(180deg, #0C0A09 0%, rgba(12, 10, 9, 0.00) 50%),
            linear-gradient(0deg, rgba(12, 10, 9, 0.60) 0%, rgba(12, 10, 9, 0.60) 100%),
            url(https://shop.dlwinery.com/wp-content/uploads/2023/12/How-Sebastien-and-Celines-Story-Began.webp), lightgray 50% / cover no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}

.story-begining .section-container .main-content p {
    margin-bottom: 20px;
}

.story-begining .section-container .main-content p:last-of-type {
    margin: 0;
}

.story-begining .section-container figure {
    padding: 20px 20px 40px 20px;
    background:
            linear-gradient(180deg, rgba(12, 10, 9, 0.00) 50%, #0C0A09 100%),
            linear-gradient(180deg, #0C0A09 0%, rgba(12, 10, 9, 0.00) 50%), #0C0A09;
}

.story-begining .section-container figure span {
    color: var(--title-color);
    font-style: italic;
    font-weight: 300;
    text-align: center;
    display: block;
    margin-top: 10px;
}


/* Story Section */
.story-section .section-container {
    overflow: hidden;
}

.story-section .section-container .intro {
    padding: 20px;
    background:
            linear-gradient(180deg, rgba(12, 10, 9, 0.00) 0%, #0C0A09 100%),
            linear-gradient(180deg, #0C0A09 0%, rgba(12, 10, 9, 0.00) 100%),
            url(https://shop.dlwinery.com/wp-content/uploads/2023/10/The-Story-of-LeSeurre.webp), lightgray 50% / cover no-repeat;
    background-position: 50% 50%;
}

.story-section .section-container .intro p {
    text-align: center;
    margin-top: 20px;
}

.story-section .section-container .family {
    background:
            linear-gradient(180deg, rgba(12, 10, 9, 0.00) 50%, #0C0A09 100%),
            linear-gradient(180deg, #0C0A09 0%, rgba(12, 10, 9, 0.00) 50%),
            linear-gradient(0deg, #0C0A09 0%, #0C0A09 100%), lightgray 50% / cover no-repeat;
}

.story-section .section-container .story {
    padding: 40px 20px;
    background:
            linear-gradient(180deg, rgba(12, 10, 9, 0.00) 50%, #0C0A09 100%),
            linear-gradient(180deg, #0C0A09 0%, rgba(12, 10, 9, 0.00) 50%),
            linear-gradient(0deg, rgba(12, 10, 9, 0.60) 0%, rgba(12, 10, 9, 0.60) 100%),
            url("https://shop.dlwinery.com/wp-content/uploads/2023/10/The-Story-of-LeSeurre2.webp"), lightgray 50% / cover no-repeat;
}

.story-section .section-container .story p {
    margin-bottom: 30px;
}

.story-section .section-container .story .swiper-story {
    position: relative;
    padding-bottom: 30px;
}

.story-section .section-container .story .swiper-story .swiper-slide {
    height: auto;
}

.story-section .section-container .story .swiper-story .swiper-slide figure {
    height: 100%;
}

.story-section .section-container .story .swiper-story .swiper-pagination {
    bottom: -10px;
}

.story-section .section-container .story .swiper-story .swiper-pagination-bullet {
    opacity: 1;
    border: solid 1px var(--title-color);
    background: transparent;
}

.story-section .section-container .story .swiper-story .swiper-pagination-bullet-active {
    background: var(--title-color);
}

.story-section .section-container .main-content {
    padding: 0 20px;
}

.story-section .section-container .family .family-into figure {
    position: relative;
}

.story-section .section-container .family .family-into figure .linear-grad-bcg {
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background:
            linear-gradient(0deg, rgba(12, 10, 9, 0.25) 0%, rgba(12, 10, 9, 0.25) 50%),
            linear-gradient(180deg, rgba(12, 10, 9, 0.00) 50%, #0C0A09 100%),
            linear-gradient(180deg, #0C0A09 0%, rgba(12, 10, 9, 0.00) 50%);
}

.story-section .section-container .family .family-into figure img {
    height: 500px;
}

.story-section .section-container .legacy {
    padding: 40px 20px 60px 20px ;
    background:
            linear-gradient(180deg, rgba(12, 10, 9, 0.00) 50%, #0C0A09 100%),
            linear-gradient(180deg, #0C0A09 0%, rgba(12, 10, 9, 0.00) 50%),
            linear-gradient(0deg, rgba(12, 10, 9, 0.60) 0%, rgba(12, 10, 9, 0.60) 100%),
            url("https://shop.dlwinery.com/wp-content/uploads/2024/11/916A7207_optimise-scaled.webp"), lightgray 50% / cover no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
}

.story-section .section-container .legacy .swiper-story2 {
    position: relative;
    padding-bottom: 30px;
    margin-top: 30px;
}

.story-section .section-container .legacy .swiper-story2 .swiper-slide figure img {
    height: 450px;
}

.story-section .section-container .legacy .swiper-story2 .swiper-pagination {
    bottom: -10px;
}

.story-section .section-container .legacy .swiper-story2 .swiper-pagination-bullet {
    opacity: 1;
    border: solid 1px var(--title-color);
    background: transparent;
}

.story-section .section-container .legacy .swiper-story2 .swiper-pagination-bullet-active {
    background: var(--title-color);
}


    /* Version Tablette */
    @media screen and (min-width: 768px) {
        /* Section Beginning */
        .story-begining .section-container .main-content {
            padding: 60px 40px 40px 40px;
        }

        .story-begining .section-container figure {
            padding: 0 40px 60px 40px;
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .story-begining .section-container figure img {
            max-height: 650px;
            width: 40%;
        }

        .story-begining .section-container figure span {
            width: 60%;
            text-align: left;
            margin: 0;
            padding: 0;
        }


        /* Section Story */
        .story-section .section-container .intro {
            padding: 40px;
        }

        .story-section .section-container .intro figure,
        .story-section .section-container .intro figure img {
            height: 500px;
            object-fit: contain;
        }

        .story-section .section-container .story {
            padding: 60px 40px;
            background:
                    linear-gradient(180deg, rgba(12, 10, 9, 0.00) 50%, #0C0A09 100%),
                    linear-gradient(180deg, #0C0A09 0%, rgba(12, 10, 9, 0.00) 50%),
                    linear-gradient(0deg, rgba(12, 10, 9, 0.60) 0%, rgba(12, 10, 9, 0.60) 100%),
                    url("https://shop.dlwinery.com/wp-content/uploads/2023/10/The-Story-of-LeSeurre.webp"), lightgray 50% / cover no-repeat;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .story-section .section-container .story p {
            margin-bottom: 40px;
        }

        .story-section  .section-container .family-into {
            display: flex;
            justify-content: space-between;
        }

        .story-section .section-container .family .family-into figure {
            width: 50%;
        }

        .story-section .section-container .family .family-into figure img {
            height: 100%;
        }

        .story-section .section-container .family .family-into figure .linear-grad-bcg {
            height: 100%;
        }

        .story-section .section-container .main-content {
            padding: 40px;
            width: 50%;
        }

        .story-section .section-container .family .family-into p:last-of-type {
            margin: 0;
        }

        .story-section .section-container .family > figure .linear-grad-bcg,
        .story-section .section-container .family > figure img {
            height: 600px;
        }

        .story-section .section-container .legacy {
            padding: 40px 40px 60px 40px;
        }

        .story-section .section-container .legacy .swiper-story2 {
            padding: 0;
            margin-top: 40px;
        }
    }


        /* Version Desktop */
        @media screen and (min-width: 992px) {
            /* Section Beginning */
            .story-begining .section-container {
                display: flex;
                background:
                        linear-gradient(180deg, rgba(12, 10, 9, 0.00) 50%, #0C0A09 100%),
                        linear-gradient(180deg, #0C0A09 0%, rgba(12, 10, 9, 0.00) 50%), #0C0A09;
                align-items: center;
            }

            .story-begining .section-container .main-content {
                width: 100%;
                background-position: 50%;
                padding: 60px;
                /*display: flex;*/
                flex-direction: column;
                justify-content: center;
                width: 50%;
            }

            .story-begining .section-container figure {
                width: 50%;
                padding: 60px;
                gap: 20px;
                /**/
                display: block;
                height: 100%;
            }

            .story-begining .section-container figure img {
                width: 100%;
            }

            .story-begining .section-container figure span {
                width: 100%;
                margin-top: 20px;
            }


            /* Section Story */
            .story-section .section-container .intro {
                padding: 60px;
            }

            .story-section .section-container .intro p {
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
            }

            .story-section .section-container .story {
                padding: 60px;
            }

            .story-section .section-container .story p {
                max-width: 90%;
                margin-bottom: 50px;
            }

            .story-section .section-container .main-content {
                padding: 60px;
                width: 75%;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .story-section .section-container .family .family-into figure {
                width: 25%;
            }

            .story-section .section-container .family .family-into figure img {
                max-height: 500px;
                object-position: 50% 20%;
            }

            .story-section .section-container .legacy {
                padding: 60px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 60px;
            }

            .story-section .section-container .legacy .title-container {
                width: 55%;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .story-section .section-container .legacy .swiper-container {
                width: 45%;
            }

            .story-section .section-container .legacy .swiper-story2 {
                margin: 0;
            }

            .story-section .section-container .legacy .swiper-story2 .swiper-slide figure img {
                min-height: 500px;
            }
        }

        /* Version Desktop Large screen */
        @media screen and (min-width: 1500px) {
            .story-begining .section-container figure {
                display: flex;
                min-width: 870px;
            }

            .story-begining .section-container figure span {
                margin-top: 0;
            }
        }