painted-content {
    p:has(a > img) {
        text-align: center;
    }

    img {
        height: var(--image-height);
        overflow: hidden;
        object-fit: cover;
    }

    section:has(h1#affiliations, h1#sponsors) {
        --image-height: 5rem;

        & img {
            border-radius: 0;
        }
    }

    section:has(h1#interviewees) {
        --image-height: 15rem;

        & img {
            aspect-ratio: 3/4;
        }
    }

    h2 {
        /* text-align: center; */
    }

    div.platinum,
    div.silver,
    div.bronze {
        border-radius: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline: 3rem;
        font-weight: bolder;
        font-size: 1.5rem;
        padding: 0.2rem 2rem;
        height: fit-content;
        /* width: fit-content; */
        /* text-decoration: underline; */
    }

    div.platinum {
        position: relative;
        rainbow: 0.5s;
        transition: 0.5s;
        text-align: center;
        color: white;
        box-sizing: border-box;
        background-size: 400%;
        z-index: 1;
        animation: rainbow 60s linear infinite;
        border: 2px solid white;
        margin-block: 1rem;
        background: var(--gradient);
        --gradient: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);

        &::before {
            border-radius: inherit;
            rainbow: 0.5s;
            transition: 0.5s;
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
            background: var(--gradient);
            background-size: 400%;
            opacity: 0;
            transition: 0.5s;
            filter: blur(10px);
            opacity: 1;
            animation: rainbow 60s linear infinite;
        }
    }

    div.silver {
        color: black;
        background-color: rgb(222, 222, 222);
        box-shadow:
            0px 2px 4px rgba(0, 0, 0, 0.4),
            0px 7px 13px -3px rgba(0, 0, 0, 0.3),
            0px -3px 0px rgba(0, 0, 0, 0.2) inset;
    }

    div.bronze {
        color: black;
        background-color: rgb(238, 206, 177);
        box-shadow:
            rgba(0, 0, 0, 0.16) 0px 3px 6px,
            rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }
}

@keyframes rainbow {
    0% {
        background-position: 0%;
        scale: 1;
    }

    50% {
        scale: 1.01;
    }

    100% {
        background-position: 400%;
        scale: 1;
    }
}