/* The rankings section of the homepage — scoped styles (prefix: .rankings)
   base.html links this before Swiper's stylesheet, so every rule on an element that Swiper's also reaches
   (.swiper, .swiper-slide) starts at .rankings to win over it.
   The heading is the site's .title-alumni / .title__text, the eyebrow takes the bundle of the hero's. */

.rankings__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--bs-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.rankings__eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;
    background: currentColor;
}

/* room for the badge's shadow, which the carousel would clip */
.rankings .rankings__ring {
    padding-bottom: 48px;
}

/* Swiper's stylesheet arrives after the first paint: until then the badges already stand in a row. */
.rankings .swiper-wrapper {
    display: flex;
}

.rankings .rankings__badge {
    flex: 0 0 auto;
    width: clamp(230px, 22vw, 300px);
}

/* the badges are not all cut to the same proportions: each sits whole in one frame */
.rankings__badge img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 826;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .25));
    user-select: none;
    -webkit-user-drag: none;
}

/* rankings.js fades the badges at the back of the ring: the fade keeps time with their turn */
.rankings .rankings__badge {
    transition-property: transform, opacity;
}