.tb-featured-content {
    --swiper-pagination-color: var(--tb-color-blue-200);
    --swiper-pagination-bullet-inactive-color: var(--tb-color-blue-500);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-100);
    align-items: center;
    color: var(--tb-color-blue-800);
    padding: 0 var(--tb-spacing-60);
}

.tb-featured-content-header {
    width: 100%;
    max-width: var(--tb-breakpoint-small);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--tb-spacing-30);
    padding-top: var(--tb-spacing-50);
}

.tb-featured-content-swiper {
    position: relative;
    width: 100%;
    max-width: calc(var(--tb-breakpoint-medium) + var(--tb-spacing-100) * 2 + var(--tb-spacing-20) * 2);
    container: swiper / inline-size;
}

.tb-featured-content-swiper .tb-prev,
.tb-featured-content-swiper .tb-next {
    position: absolute;
    top: calc((var(--tb-breakpoint-medium) * 3) / 32 - (var(--tb-spacing-50) * 3) / 16 - var(--tb-btn-size-medium) / 2);
    z-index: 100;
}

.tb-featured-content-swiper .tb-prev {
    left: var(--tb-spacing-20);
}

.tb-featured-content-swiper .tb-next {
    right: var(--tb-spacing-20);
}

.tb-featured-content .swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.tb-featured-content .swiper {
    position: relative;
    width: 100%;
    max-width: var(--tb-breakpoint-medium);
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-40);
}

.tb-featured-content-tile {
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-40);
    text-decoration: none;
}

.tb-featured-content-tile:hover {
    text-decoration: none;
}

.tb-feature-content-tile-header {
    display: flex;
    flex-direction: column;
}

.tb-arrow-icon {
    width: 45px;
    height: 26px;
    fill: none;
    stroke-width: 2px;
    stroke: var(--tb-color-blue-700);
}

.tb-featured-content .swiper-pagination {
    position: relative;
    bottom: unset;
}

@container swiper (max-width: 1200px) {
    .tb-featured-content-swiper .tb-prev,
    .tb-featured-content-swiper .tb-next {
        top: calc((100cqi * 3) / 32 - (var(--tb-spacing-50) * 3) / 16 - var(--tb-btn-size-medium) / 2);
    }
}

@container swiper (max-width: 909px) {
    .tb-featured-content-swiper .tb-prev,
    .tb-featured-content-swiper .tb-next {
        top: calc((100cqi * 9) / 64 - (var(--tb-spacing-50) * 9) / 64 - var(--tb-btn-size-medium) / 2);
    }
}

@container swiper (max-width: 653px) {
    .tb-featured-content-swiper .tb-prev,
    .tb-featured-content-swiper .tb-next {
        top: calc((100cqi * 9) / 32 - var(--tb-btn-size-medium) / 2);
    }
}

@media (max-width: 1024px) {
    .tb-featured-content {
        gap: var(--tb-spacing-50);
        padding: 0 var(--tb-spacing-50);
    }
}

@media (max-width: 500px) {
    .tb-featured-content {
        padding: 0 var(--tb-spacing-20);
    }
}