.travel-hero {
    --hero-progress: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #07111f;
}

.travel-hero-bg {
    position: absolute;
    inset: -7% 0 -16%;
    z-index: -3;
    background: var(--home-hero-image) center/cover no-repeat;
    transform: translate3d(0, calc(var(--hero-progress) * 95px), 0) scale(calc(1.04 + (var(--hero-progress) * .13)));
    filter: saturate(calc(1.05 - (var(--hero-progress) * .12))) contrast(calc(1.03 + (var(--hero-progress) * .08))) blur(calc(var(--hero-progress) * 2.2px));
    will-change: transform, filter;
}

.travel-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 74% 18%, rgba(255,255,255,calc(.14 - (var(--hero-progress) * .08))), transparent 24%),
        linear-gradient(180deg, rgba(7,17,31,calc(.08 + (var(--hero-progress) * .42))), rgba(7,17,31,calc(.74 + (var(--hero-progress) * .16)))),
        linear-gradient(90deg, rgba(7,17,31,calc(.72 + (var(--hero-progress) * .10))), rgba(7,17,31,.10));
    pointer-events: none;
}

.travel-hero-grid {
    transform: translate3d(0, calc(var(--hero-progress) * -28px), 0);
    opacity: calc(1 - (var(--hero-progress) * .32));
    will-change: transform, opacity;
}

.travel-hero-card {
    transform: translate3d(0, calc(var(--hero-progress) * 24px), 0) scale(calc(1 - (var(--hero-progress) * .035)));
    will-change: transform;
}

.travel-hero-card img {
    transform: scale(calc(1 + (var(--hero-progress) * .08)));
    transition: transform .18s linear;
}

.travel-hero h1 span {
    color: var(--travel-primary);
}

@media (max-width: 640px) {
    .travel-ranking-list li {
        grid-template-columns: 30px minmax(0, 1fr) auto;
    }

    .travel-ranking-link {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
    }

    .travel-ranking-link > span {
        display: block !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .travel-ranking-list li > .travel-weather-icon-wrap {
        display: none;
    }

    .travel-flag-icon {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .travel-hero-bg,
    .travel-hero-grid,
    .travel-hero-card,
    .travel-hero-card img {
        transform: none;
        filter: none;
    }
}