/* =========================
   BANNER – DARK HERO
========================= */
.banner-container{
    width: 100%;
    min-height: 100svh;
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 3rem 2rem;
    box-sizing: border-box;

    background:
        radial-gradient(circle at center, rgba(122,162,255,.08), transparent 55%),
        linear-gradient(180deg, #12121a, #09090c);
}

/* soft overlay */
.banner-container::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.65),
            rgba(0,0,0,.15) 40%,
            transparent
        );
    pointer-events: none;
}

/* =========================
   MEDALS GRID
========================= */
.banner-container__medal-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;

    align-self: center;
    z-index: 5;
}

/* =========================
   MEDAL CARD
========================= */
.banner-container__medal{
    width: 10.5rem;
    height: 10.5rem;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .35rem;

    position: relative;
    text-align: center;

    color: #f1f1f1;
}

/* rotating medal */
.banner-container__medal::before{
    content: "";
    position: absolute;
    inset: 0;

    background: url('../img/item/medal.png') center / contain no-repeat;
    opacity: .85;

    animation: rotationBG 120s linear infinite;
}

/* glow ring */
.banner-container__medal::after{
    content: "";
    position: absolute;
    inset: 10%;

    border-radius: 50%;
    box-shadow:
        0 0 40px rgba(122,162,255,.25),
        inset 0 0 20px rgba(0,0,0,.65);

    pointer-events: none;
}

/* =========================
   MEDAL TEXT
========================= */
.banner-container__medal span{
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .04em;

    color: #7aa2ff;
    z-index: 5;
}

.banner-container__medal p{
    font-size: .75rem;
    color: #b4b4c2;
    z-index: 5;
}

/* =========================
   ANIMATION
========================= */
@keyframes rotationBG{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* =========================
   RESPONSIVE
========================= */
@media only screen and (max-width: 53.125rem){
    .banner-container{
        padding: 2rem 1rem;
    }

    .banner-container__medal-container{
        gap: 2rem;
    }

    .banner-container__medal{
        width: 8rem;
        height: 8rem;
    }

    .banner-container__medal span{
        font-size: 1rem;
    }

    .banner-container__medal p{
        font-size: .65rem;
    }
}

@media only screen and (max-width: 26.25rem){
    .banner-container__medal-container{
        grid-template-columns: 1fr;
        justify-items: center;
        width: 100%;
    }
}