.home-banner{
    height: 900px;
}
@media screen and (width < 576px) {
    .home-banner{
        height: 720px;
    }
}
.home-banner-slide{
    >.bg{
        height: 100%;
        >img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.4);
        }
    }
    >.content{
        position: absolute;
        inset: auto 0 0 0;
        padding: 80px 0 125px;
        h3{
            color: white;
            padding: 2px 0 2px 10px;
            border-left: 2px solid var(--color-primary-1);
            margin-bottom: 16px;
        }
        h1{
            color: white;

        }
    }
}
@media screen and (width < 576px) {
    .home-banner-slide>.content{
        padding: 60px 0 90px;
    }
}

.home-banner > .home-banner-pagination{
    position: absolute;
    z-index: 1;
    left: max(calc((100vw - 1200px) / 2), 24px);
    right: max(calc((100vw - 1200px) / 2), 24px);
    bottom: 80px;
    display: flex;
    width: auto;
    >.bullet{
        width: 80px;
        height: 5px;
        background-color: white;
        opacity: 0.5;
        clip-path: polygon(
            5px 0,
            100% 0,
            calc(100% - 5px) 100%,
            0 100%
        );
        transition: opacity 1s, background-color 1s;
        &.active{
            opacity: 1;
            background-color: var(--color-primary-1);
        }
    }
}
@media screen and (width < 576px) {
    .home-banner > .home-banner-pagination{
        bottom: 60px;
        >.bullet{
            width: 60px;
        }
    }
}

.home-banner-deco{
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    width: 16%;
    max-width: 160px;
    aspect-ratio: 1;
    background-color: var(--color-primary-1);
    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%
    );
}