.slideshow {
    position: relative;
    contain: content;

    .wrapper {
        display: flex;
        gap: 1rem;

        overflow-x: auto;
        padding-bottom: 0.5rem;
        margin-top: max(320px, min(calc(90dvh - 225px + 0.5rem), calc(100% / 3 * 2 + 0.5rem)));
    }

    .feature, .placeholder {
        display: none;
        position: absolute;
        transform: translateX(-50%);
        top: 0;
        left: 50%;

        min-width: 120px;
        width: 100%;
        max-height: max(320px, calc(90dvh - 225px));
        aspect-ratio: 3 / 2;
        padding: 4px;
        border-radius: calc(0.5rem + 4px);

        align-items: center;
        justify-content: center;

        background: transparent;
        object-fit: contain;
    }

    .placeholder {
        background: rgba(0, 0, 0, 0.15);
    }

    img {
        display: none;
        user-drag: none;
        -webkit-user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    label {
        width: 225px;
        aspect-ratio: 3 / 2;
    }

    [type=radio] {
        position: absolute;
        visibility: hidden;
        width: 0;
        height: 0;
        opacity: 0;
    }

    [type=radio] ~ img.thumbnail {
        display: block;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border: 6px solid transparent;
        border-radius: calc(0.5rem + 4px);
        box-sizing: border-box;
        cursor: pointer;

        filter: contrast(0.8) saturate(0.6);
    }

    [type=radio]:checked ~ img.thumbnail {
        border: 3px solid black;
        padding: 3px;

        filter: none;
    }

    label [type=radio]:checked ~ .feature {
        display: flex;
        flex-direction: column;
    }

    &:has(label [type=radio]:checked ~ .feature.loading) .placeholder {
        display: flex;
        flex-direction: column;

        &::before {
            content: "";
            display: inline-block;
            width: 2cap;
            height: 2cap;
            border: 1pt solid black;
            border-radius: 50%;
            border-bottom-color: transparent;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
            margin-bottom: 1rem;
        }

        &::after {
            content: "Loading";
        }
    }

    &:has(label [type=radio]:checked ~ .feature.error) .placeholder {
        display: flex;
        flex-direction: column;

        &::before {
            content: "i";
            display: inline-flex;
            width: 2cap;
            height: 2cap;
            border: 1pt solid black;
            border-radius: 50%;
            box-sizing: border-box;
            margin-bottom: 1rem;
            align-items: center;
            justify-content: center;
        }

        &::after {
            content: "Failed to load";
        }
    }
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}