.root {
    width: 100%;
    padding: var(--spacing-120) 0;
    gap: var(--spacing-64);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.headerContainer {
    display: flex;
    width: 100%;
    max-width: var(--content-max-width);
    align-items: flex-start;
    flex-direction: column;
    padding: 0 var(--spacing-120);
    gap: var(--spacing-12);
}

.headerRow {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-24);
}

.ratingContainer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-12);
}

.content {
    max-width: 100%;
    overflow: hidden;
}

.swiper {
    width: 100%;
}

.swiperSlide {
    width: auto;
    flex-shrink: 0;
    position: relative;
    padding: 0 12px;
}

.swiperSlide:first-child {
    padding-left: var(--spacing-120);
}

.swiperSlide:last-child {
    padding-right: var(--spacing-120);
}

.mobile,
.mobileNavigation {
    display: none;
}

@media screen and (width <= 768px) {
    .root {
        padding: var(--spacing-64) 0;
        gap: var(--spacing-40);
    }

    .headerContainer {
        padding: 0 var(--spacing-20);
    }

    .ratingContainer {
        gap: var(--spacing-8);
    }

    .swiperWrapper {
        gap: var(--spacing-8);
    }

    .swiperSlide:first-child {
        padding-left: var(--spacing-20);
    }

    .swiperSlide:last-child {
        padding-right: var(--spacing-20);
    }

    .mobileNavigation {
        display: inline-flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .mobile {
        display: inline-flex;
    }

    .desktop,
    .desktopNavigation {
        display: none;
    }
}