.home-banner{
    aspect-ratio: 1440 / 725;
    .swiper-slide{
        >div{
            position: absolute;
            inset: 0;
        }

        >.bg > img{
            filter: brightness(0.6);
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        >.content{
            display: flex;
            align-items: center;
            >.container{
                width: 100%;
                >div{
                    width: 75%;
                    max-width: 480px;
                    >h1{
                        margin-bottom: 24px;
                        color: white;
                    }
                    >h3{
                        white-space: pre-line;
                        color: white;
                    }
                }
            }
        }
    }
    .home-banner-swiper-pagination{
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        right: 91px;
        left: auto;
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
        transform: none;
        >.bullet{
            width: 4px;
            height: 28px;
            border-radius: 999px;
            background-color: var(--color-gray-4);
            transition: background-color 1s, height 1s;
            &.active{
                background-color: var(--color-primary-1);
                height: 52px;
            }
        }
    }
}
@media screen and (width < 1248px) {
    .home-banner .swiper-slide > .content > .container > div{
        max-width: none;
    }
}

@media screen and (width < 1024px) {
    .home-banner{
        aspect-ratio: 7 / 5;
    }
}

@media screen and (width < 768px) {
    .home-banner{
        aspect-ratio: 4 / 3;
        .home-banner-swiper-pagination{
            right: 24px;
        }
    }
}
@media screen and (width < 576px) {
    .home-banner{
        aspect-ratio: 375 / 725;
        .swiper-slide > .content{
            align-items: end;
            > .container{
                padding-bottom: 60px;
                > div{
                    width: 90%;
                }
            }
        }
        .home-banner-swiper-pagination{
            justify-content: end;
            padding-bottom: 60px;
        }
    }
}