.cb-slider-cards {
    position: relative;
    color: var(--color-dark);

    &.frame-layout-4 {
        .slider-cards-intro {
            color: var(--color-white);

            .slider-cards-tag {
                color: var(--color-green);
            }
        }
    }

    .slider-cards-intro {
        position: relative;

        .slider-cards-tag {
            color: var(--color-dark);
            margin-block-end: 1rem;
            font-weight: 500;
        }

        .slider-cards-header {
            font-size: 96px;
        }
    }

    .slider-cards-container {
        .swiper-buttons {
            position: relative;
            justify-content: center;
            margin-block-start: 2rem;
            margin-block-end: 0;

            @media (min-width: 991px) {
                margin-block-start: 4rem;
            }

            .swiper-button-prev, .swiper-button-next {
                position: relative;
                top: 0;
            }
        }
    }

    .slider-cards-slider {
        max-width: 100%;

        .slider-card {
            display: flex;
            flex-flow: column;
            place-content: space-between;
            height: auto;
            padding: 1.25rem;
            clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);
            @media (min-width: 351px) {
                padding: 1.5rem;
            }
            @media (min-width: 992px) {
                clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%);
                padding: 3rem;
            }
            outline: none;
            hyphens: auto;
            border-radius: var(--border-radius);

            &.card-color-green {
                color: var(--color-white);
                background-color: var(--color-green);
            }

            &.card-color-blue {
                color: var(--color-white);
                background-color: var(--color-blue);
            }

            &.card-color-pink {
                color: var(--color-white);
                background-color: var(--color-pink);
            }

            &.card-color-orange {
                color: var(--color-white);
                background-color: var(--color-orange);
            }

            &.card-color-dark {
                color: var(--color-white);
                background-color: var(--color-dark);
            }
                .card-count {
                }

                .card-title {
                    font-size: 72px;
                }

            .slider-card-header {
                .card-count {
                    min-width: 4rem;
                }

                .card-title {
                    font-size: 72px;
                    hyphens: none;
                }
            }

            .wrapper {
                display: flex;
                flex-flow: row;
                place-content: space-between;
                margin-block-end: 0.5rem;

                .card-content {
                    display: flex;
                    flex-direction: column;
                    place-content: end;
                    flex-basis: 50%;
                    gap: 1.5rem;

                    .card-text {
                        font-size: 22px;
                    }

                    .card-link {
                        align-self: flex-start;
                    }
                }
            }

            .card-image {
                width: 300px;
                border-radius: var(--border-radius);
            }
        }

        &[data-slider-type="1"] {
            perspective: 1200px;
            -webkit-perspective: 1200px;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;

            .slider-card {
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;

                .slider-card-shadow {
                    height: 100%;
                    left: 0;
                    pointer-events: none;
                    position: absolute;
                    top: 0;
                    width: 100%;
                    z-index: 10;
                    background: #00000025;
                    opacity: 1;
                    transition: opacity .25s ease-in-out;
                }
                &.swiper-slide-active {
                    .slider-card-shadow {
                        opacity: 0;
                    }
                }
            }

            .card-inner {
                display: flex;
                flex-direction: column;
                height: auto;
                min-height: 100%;
                place-content: space-between;
            }

        }

        &[data-slider-type="2"] {
            width: 85%;
            @media (min-width: 460px) {
                width: 400px;
            }
            padding: 4rem 0 0 0;
            overflow: visible;

            .swiper-wrapper {
                min-height: 500px;
            }

            .slider-card {
                min-height: 100%;
                height: auto;

                .wrapper {
                    flex-flow: column;
                    margin-block-end: 0;
                    & + .wrapper {
                        margin-block-start: 3rem;
                    }

                    .card-count {
                        font-size: 48px;
                    }

                    .card-content {

                        .card-title {
                            font-size: 32px;
                        }

                        .card-text {
                            font-size: 16px;
                        }

                    }

                }
            }
        }

    }
}

@media (max-width: 1199px) {
    .cb-slider-cards {
        .slider-cards-intro {
            padding: 0;
        }
        .slider-cards-slider {
            &[data-slider-type="1"] {
                .slider-card {
                    .slider-card-header {
                        .card-title {
                            font-size: 38px;
                            margin-block-start: 1rem;
                        }

                    }
                }
            }
        }
    }
}


@media (min-width: 992px) {
    .cb-slider-cards {
        .slider-cards-slider {
            &[data-slider-type="1"] {
                margin: 8rem 0 0 0;
                
                overflow: visible !important; 


                .swiper-wrapper {
                    transition: height 0.3s ease; 
                }

                .slider-card {
                    height: 100% !important;
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .cb-slider-cards {
        .slider-cards-intro .slider-cards-header {
            font-size: 54px;
        }

        .slider-cards-slider {
            &[data-slider-type="1"] {
                width: 400px;
                padding: 4rem 0 0 0;
                overflow: visible;

                .swiper-wrapper {
                    min-height: 500px;
                }

                .slider-cards-intro .slider-cards-header {
                    font-size: 54px;
                }

                .slider-card {
                    min-height: 100%;
                    height: auto;
                    clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);

                    .slider-card-header {
                        .card-title {
                            font-size: 32px;
                            margin-block-start: 1rem;
                            hyphens: auto;
                        }
                        & + .wrapper {
                            margin-block-start: 3rem;
                        }

                    }
                    .card-content {
                        .card-text {
                            font-size: 16px;
                        }
                    }

                    .wrapper {
                        flex-flow: column;
                        margin-block-end: 0;
                    }
                }

            }
        }
    }
}

@media (max-width: 575px) {
    .cb-slider-cards {
        .slider-cards-intro .slider-cards-header {
            font-size: 42px;
        }

        .slider-cards-slider {
            padding-block-start: 4rem;

            &[data-slider-type="2"] {
                .slider-card {
                    min-height: 550px;

                    .slider-card-header {
                        .card-count, .card-title {
                            font-size: 36px;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 459px) {
    .cb-slider-cards {
        .slider-cards-slider {
            &[data-slider-type="1"] {
                width: 85%;
            }
        }
    }
}