.banner .swiper {
    width: 100%;
    height: calc(100vh - 96px);
    min-height: 576px
}

.banner .swiper-content,
.banner .swiper-title {
    position: absolute;
    color: #fff;
    margin-bottom: 3rem;
    left: 96px;
    z-index: 1
}

.banner .swiper-title {
    top: 20%;
    font-size: 3rem;
    font-weight: ExtraLight;
    letter-spacing: .02em;
    line-height: 1.33
}

.banner .swiper-content {
    width: 80%;
    top: 35%;
    font-size: 8rem;
    font-weight: lighter;
    letter-spacing: -.04em;
    line-height: 1
}

.banner img {
    filter: brightness(50%);
    height: 100%;
    object-fit: cover
}

.banner .swiper-button-next,
.banner .swiper-button-prev {
    background-image: url(../images/arrow-white.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 42px;
    height: 42px;
    top: calc(100% - 96px);
    left: 96px
}

.banner .swiper-button-next {
    transform: rotate(180deg);
    left: 156px
}

.banner .swiper-button-next:after,
.banner .swiper-button-prev:after {
    content: ""
}

.banner .swiper-pagination {
    top: calc(100% - 96px);
    left: 216px;
    width: fit-content;
    height: fit-content
}

.banner .swiper-pagination-bullet {
    background: #ccced2;
    opacity: 1
}

.banner .swiper-pagination-bullet-active {
    background: #144be1
}

@media screen and (max-width:768px) {
    .banner .swiper {
        height: calc(100vh - 60px)
    }

    .banner .swiper-title {
        top: 10%
    }

    .banner .swiper-content {
        width: 85%;
        top: 20%;
        font-size: 6rem
    }

    .banner .swiper-button-next,
    .banner .swiper-button-prev,
    .banner .swiper-content,
    .banner .swiper-title {
        left: 36px
    }

    .banner .swiper-button-next,
    .banner .swiper-button-prev {
        top: calc(100% - 36px)
    }

    .banner .swiper-button-next {
        left: 96px
    }
}