.slider-container {
    position: relative;
    width: 100%;
    z-index: 2;
    overflow: hidden;
    padding-bottom: 10px;

    .slider-foreground {
        position: relative;
        /* overflow: clip; */
        clip-path: inset(calc(var(--box-shadow-spread) * -1));
        pointer-events: none;
        z-index: 2;

        .slide-wrapper {
            display: flex;
            /* overflow: hidden; */

            /* transition: transform 0.5s ease-in-out;
            overflow: hidden; */

            z-index: 1;

            .slide {
                position: relative;
                min-width: 100%;
                box-sizing: border-box;

                opacity: 0;
                transition: var(--transition-slow);

                &.active {
                    .slide-content {
                        pointer-events: auto;
                    }
                    opacity: 1;
                }

                .slide-content {
                    background: white;
                    max-width: 60%;
                    padding: var(--dist-60);
                    border-radius: var(--border-radius);
                    /* box-shadow: var(--box-shadow); */

                    user-select: none;

                    .slide-title {
                        font-size: var(--fs-body-xl);
                        font-weight: 400;
                        color: var(--primary);

                        margin-bottom: var(--dist-20);
                    }

                    .slide-text {
                        font-size: var(--fs-body-xxl);
                        font-weight: 300;
                        font-style: italic;
                        color: var(--blue);

                        margin-bottom: var(--dist-40);
                    }

                    .contact-info {
                        display: grid;
                        grid-template-columns: max-content auto;
                        align-items: center;
                        gap: var(--dist-20);

                        .profile-img {
                            width: 80px;
                            height: 80px;
                            margin: 0;
                            border-radius: 50%;
                            object-fit: cover;
                        }

                        .contact-info-text {
                            font-size: var(--fs-body-l);
                            line-height: 1.444;


                            .profile-name {
                                font-weight: 400;

                                font-size: var(--fs-body-l);
                                color: var(--blue);
                            }

                            .profile-position {
                                color: var(--half-blue);
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }
        }
    }


    .slide-media {
        position: absolute;
        top: var(--dist-60);
        /* right: -200px; */
        right: 0;
        /* left: 600px; */
        left: 50%;
        /* width: 100%; */
        max-width: 1000px;
        max-height: calc(100% - var(--dist-60));
        height: 100%;
        z-index: -1;

        .bg-media {
            opacity: 0;
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;

            user-select: none;

            transition: all 0.5s ease-in-out;
            pointer-events: none;

            a * {
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                user-select: none;
            }

            &.active {
                opacity: 1;
                pointer-events: auto;
            }
        }
    }

    .buttons {
        margin-top: var(--dist-40);
        margin-left: var(--dist-40);

        width: max-content;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--dist-20);

        button {
            width: var(--dist-60);
            height: var(--dist-60);
            cursor: pointer;
            border-radius: 50%;
            border: none;
            background-color: var(--half-blue);
            color: var(--white);
            transition: var(--transition);
            font-size: 24px;

            &:disabled {
                background-color: var(--quarter-blue);
                cursor: not-allowed;
            }


            &:not(:disabled):hover {
                transform: scale(1.05);
            }


        }
    }

    .dot-pagination {
        position: absolute;
        left: 30%;
        transform: translateX(-50%);
        bottom: var(--dist-25);


        display: grid;
        grid-auto-columns: auto;
        grid-auto-flow: column;
        gap: var(--dist-10);

        .dot {
            display: inline-block;
            width: var(--dist-10);
            height: var(--dist-10);

            border-radius: 50%;
            background-color: var(--half-blue);

            transition: var(--transition);

            &:hover{
                background-color: var(--blue);
            }

            &.active {
                background-color: var(--primary);
                transform: scale(1.5);
            }

        }
    }
}


@media (max-width: 992px) {
    .slide-media {
        display: none;
    }

    .slider-container {
        .slider-foreground {
            padding-bottom: 50px;

            .slide-wrapper {
                .slide {
                    .slide-content {
                        max-width: 100%;
                    }
                }
            }
        }
        .dot-pagination {
            left: 50%;
        }

        .buttons {
            display: none;
        }
    }
}

@media (max-width: 768px) {
    .slider-container {
        .slider-foreground {
            .slide-wrapper {
                .slide {
                    .slide-content {
                        padding: var(--dist-40);
                    }
                }
            }
        }
    }
}