.visual-story-section {
    --story-card-aspect-ratio: 125%;
    margin: 4rem 0 4rem 0;

    & .visual-story-section--inner-container {
        display: flex;
        padding-left: 6rem;
        justify-content: space-between;
        align-items: center;
        gap: 5%;

        @media(max-width: 768px) {
            flex-direction: column;
            gap: 2.5%;
            padding-left: 0px;
        }


        & .visual-story-section--content {
            flex: 0 0 33%;
            width: 100%;

            @media(max-width: 768px) {
                flex: 1 0 100%;
                padding: 20px;
            }

            & .visual-story-section--content-headline {
                font-size: 24px;
                font-family: 'Paris Sans';

                @media(max-width: 768px) {
                    font-size: 20px;
                }
            }

            & .visual-story-section--content-title {
                font-size: 60px;
                line-height: 1;
                font-family: "VeryVogue";

                & p {
                    margin-bottom: 1.5rem;
                }

                @media(max-width: 1200px) {
                    font-size: 48px;
                }
            }

            & .visual-story-section--content-text {

                @media(max-width: 700px) {
                    margin-bottom: 2.5rem;
                }

                & p {
                    font-family: "Titling Gothic Regular";
                    font-size: 16px;
                }
            }

            & .btn {
                display: inline-flex;
                flex-direction: column;
                justify-content: center;
                width: 284px;
                height: 60px;
                font-size: 18px;
                background-color: black;
                color: white;
                border: 1px solid black;
                margin-top: 1.5rem;


                &:hover {
                    background-color: white;
                    color: black;
                }

                @media(max-width: 700px) {
                    margin-bottom: 1.5rem;
                }


                & span {
                    font-family: 'Paris Sans';
                    font-size: 18px;
                }
            }
        }

        & .visual-story-section--content+.visual-story-section--slider {
            flex: 1 0 60%;
            width: 100%;
            max-width: 60;

            @media(max-width: 700px) {
                padding: 0px 0px 0px 20px;
            }
        }

        & visual-story-section-slider {
            width: 100%;
            overflow: hidden;

            @media(max-width: 760px) {
                margin-top: 4rem;
            }

            & .visual-story-section--slider {
                display: flex;
                gap: 20px;
                width: 100%;
                overflow-x: scroll;
                scroll-snap-type: x mandatory;
                scroll-snap-stop: always;
                scroll-behavior: smooth;
                padding-right: 2rem;
                -ms-overflow-style: none;
                scrollbar-width: none;

                &::-webkit-scrollbar {
                    display: none;
                }

                @media(max-width: 768px) {
                    gap: 10px;
                }

                & .visual-story-section--slider-item {
                    flex: 1 0 60%;
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    width: 100%;
                    max-width: 60%;
                    min-height: unset;
                    scroll-snap-align: end;
                    scroll-snap-stop: always;

                    @media(max-width: 1200px) {
                        flex: 1 0 85%;
                        max-width: 100%;
                    }

                    & .visual-story-section--slider-img-container,
                    & .visual-story-section--slider-video-container {
                        position: relative;
                        height: 0;
                        padding-top: var(--story-card-aspect-ratio);
                        overflow: hidden;
                    }

                    & .visual-story-section--slider-img-container {
                        &:hover img {
                            transform: scale(1.3);
                            transition: all 1s;
                        }
                    }

                    & img,
                    & video {
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: all 0.5s;
                    }

                    & video {
                        transition: none;
                    }

                    & span {
                        font-family: 'Paris Sans';
                        font-size: 16px;
                    }
                }
            }

            & .visual-story-section--slider-nav {
                display: flex;
                justify-content: end;
                gap: 10px;
                margin-left: auto;
                padding-right: 20px;
                padding-bottom: 4rem;

                @media(max-width: 1024px) {
                    display: none;
                }

                & button[disabled] {
                    opacity: 0.4;
                    cursor: not-allowed;
                }
            }
        }
    }
}