.news-slider {
    .card {
        height: auto;
        opacity: .4;
        pointer-events: none;
        transition: $transition-fade;

        .btn {
            @extend .btn-primary;
        }

        &.topnews {
            &, a {
                @include plain-hover-focus {
                    color: $white;
                }
            }

            .card-body {
                background-color: $primary;
            }

            .news-list-date,
            .card-text {
                opacity: .7; 
            }

            .btn {
                @extend .btn-secondary;
            }
        }

        &.swiper-slide-active,
        &.swiper-slide-next {
            opacity: 1;
            pointer-events: visible;
        }
    }
}

@include media-breakpoint-up(md) {
    .magic-cape {
        position: relative;
        align-items: center;
        display: flex;
        padding-right: $grid-gutter-width*1.5;

        &::before {
            background: $white;
            content: "";
            @include position(absolute, -30px 15px -30px null);
            width: 50vw;
            z-index: 5;
        }

        &::after {
            content: "";
            @include position(absolute, -30px -5px -30px #{calc(100% - 15px)});
            z-index: 5;
            background: linear-gradient(270deg, transparent, $white);
        }

        .content {
            position: relative;
            z-index: 6;
        }
    }
}