﻿.hero-banner .slide {
    position: relative;
    display: flex;
    align-items: center;
}

.hero-banner .slide .content {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    z-index: 2;
}

.hero-banner .slide .content .text > * {
    z-index: 1;
}

.hero-banner .slide .content > * {
    width: 100%;
}

.hero-banner .slide .content .text {
    display: flex;
    flex-direction: column;
    justify-content: center;    
    align-items: center;
    gap: 24px;
    padding: 16px;
}

.hero-banner .slide .content .text > * {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.hero-banner .slide .content .title {
    padding: 16px;
    border-radius: var(--button-border-radius);
}

.hero-banner .slide .content .image {
    min-height: inherit;
    position: relative;
}

.hero-banner .slide .content .image img {
    width: auto;
    height: 100%;
    object-fit: cover;
}

.hero-banner .swiper .swiper-button-prev:after {
    content: url('/Portals/_default/skins/akt/icons/left_arrow_white.svg');
    fill: white;
}

.hero-banner .swiper .swiper-button-next:after {
    content: url('/Portals/_default/skins/akt/icons/right_arrow_white.svg');
}

.hero-banner .swiper .swiper-pagination .swiper-pagination-bullet {
    background-image: url(/portals/_default/skins/akt/icons/swiper-circle.svg);
    width: 20px;
    height: 20px;   
}

.hero-banner .swiper .swiper-pagination .swiper-pagination-bullet-active {
    background-image: url(/portals/_default/skins/akt/icons/swiper-circle-active.svg);
    width: 20px;
    height: 20px;   
}

.hero-banner .content .actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    margin-bottom: 64px;
}

@media (min-width: 800px) {
    
    .hero-banner .slide .content {
        flex-direction: row;
    }

    .hero-banner .slide .content > * {
        width: 50%;
    }

    .hero-banner .slide .content .text {
        padding: 64px 16px;
    }

    .hero-banner .swiper .swiper-button-prev {
        position: absolute;
        left: 32px;
        bottom: 100px;
    }
}