.animated-images {
    background-color: #181818;
}

.animated-images__image {
    width: 100%;
    margin-bottom: 1.5rem;
}

.animated-images__content {
    padding: 24px;
}

@media (min-width: 768px) {
    .swiper .swiper-wrapper.animated-images__content {
        margin: 0 auto;
        max-width: 1600px;
        display: grid;
        grid-template-areas: 
        "a b c"
        "d e f"
        "g h i";
        column-gap: 1rem;
        padding: 0;
    }
    
    .animated-images__content .swiper-slide:nth-of-type(1) {
        grid-area: a;
    }

    .animated-images__content .swiper-slide:nth-of-type(5),
    .animated-images__content .swiper-slide:nth-of-type(6) {
        margin-top: -15rem;
    }

    .animated-images__content .swiper-slide:nth-of-type(2),
    .animated-images__content .swiper-slide:nth-of-type(3) {
        margin-top: -30rem;
    }

    .animated-images__content .swiper-slide:nth-of-type(2) {
        grid-area: d;
    }

    .animated-images__content .swiper-slide:nth-of-type(3) {
        grid-area: g;
    }

    .animated-images__content .swiper-slide:nth-of-type(4) {
        margin-top: 15rem;
        grid-area: b;
    }

    .animated-images__content .swiper-slide:nth-of-type(5) {
        grid-area: e;
    }

    .animated-images__content .swiper-slide:nth-of-type(6) {
        grid-area: h;
    }

    .animated-images__content .swiper-slide:nth-of-type(7) {
        margin-top: 30rem;
        grid-area: c;
    }

    .animated-images__content .swiper-slide:nth-of-type(8) {
        grid-area: f;
    }

    .animated-images__content .swiper-slide:nth-of-type(9) {
        grid-area: i;
    }
}

.swiper-pagination {
    padding: 24px;
}

:root {
    --swiper-pagination-color: linear-gradient(151.56deg, #FF0E69 20.63%, #FF6726 125.78%);
    --swiper-pagination-bullet-inactive-color: #ffffff;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bottom: -12px;
}