.featured-item {
    @apply max-w-5xl relative my-8;

    &::before {
        content: url(/assets/img/triangle-small.svg);
        @apply absolute lg:hidden -top-4 right-20 md:right-40;
        width: 33px;
        height: 33px;
        z-index: 10;
    }

    &::after {
        @apply absolute lg:hidden right-20 md:right-40 fill-current text-black-600;
        content: url(/assets/img/square-dots.svg);
        z-index: -1;
        bottom: -50px;
        width: 157px;
        height: 131px;
    }

    .swiper-prev {
        @apply hidden;
    }

    .swiper-next {
        right: 48px !important;
        top: 60% !important;
    }

    .prev-next {
        @apply bg-black bg-opacity-70 h-16 w-16;

        .icon {
            @apply text-white;
            font-weight: 500;
            font-size: 2rem;
        }
    }

    .image-slider .swiper-slide {
        width: 97% !important;
    }

    .slide-image {
        &:after {
            background: linear-gradient(
                349.06deg,
                rgba(0, 0, 0, 0.8) 50.37%,
                rgba(168, 168, 168, 0.27352) 82.45%,
                rgba(255, 255, 255, 0) 126.34%
            );
            opacity: 0.5;
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }

    @apply lg:m-0;
    @screen lg {
        clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);

        .image-slider {
            .swiper-slide {
                width: 100% !important;
                clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
            }

            &.no-slider {
                .swiper-slide {
                    width: 100% !important;
                    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
                }
            }
        }
    }

    @apply xl:m-0;

    @screen xl {
        clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);

        .image-slider {
            .swiper-slide {
                clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
            }

            &.no-slider {
                .swiper-slide {
                    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
                }
            }

            .swiper-slide-active {
                margin: 0 -21% 0 0 !important;
            }
        }
    }

    .call-to-action {
        @apply absolute z-10;
        bottom: 5%;
        left: 10%;

        @screen md {
            top: 50%;
            bottom: auto;
            transform: translate(-50%, -50%);
            left: 53%;
        }

        @screen lg {
            left: 66%;
        }

        @screen xl {
            left: 53%;
        }
    }
}