media-input,
credits-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;

    & .item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        border: 2px solid var(--surface1);
        border-radius: var(--space-2);
        background: var(--paper);
        &.dragging {
            opacity: 0.4;
        }
    }

    & .handle {
        cursor: grab;
        color: var(--grey);
        flex-shrink: 0;

        & svg {
            inline-size: var(--space-4);
            block-size: var(--space-4);
        }
    }

    & .item img {
        inline-size: 6rem;
        aspect-ratio: 16 / 9;
        block-size: auto;
        object-fit: cover;
        flex-shrink: 0;
    }

    & .video-preview {
        display: grid;
        place-items: center;
        inline-size: 6rem;
        aspect-ratio: 16 / 9;
        flex-shrink: 0;
        background: #222;
        color: white;

        & svg {
            inline-size: var(--space-5);
            block-size: var(--space-5);
        }
    }

    & :is(.alt, .role, .person input) {
        min-inline-size: 0;
        border: 2px solid var(--outline);
        border-radius: var(--space-2);
        background: var(--paper);
    }

    & :is(.alt, .role) {
        flex: 1;
        padding: 0 var(--space-2);
    }

    & .person {
        flex: 2;
        min-inline-size: 0;

        & input {
            inline-size: 100%;
            padding-inline: var(--space-2);
        }

        &.input-icon input {
            padding-inline-start: var(--space-6);
        }
    }

    & .add-person {
        align-self: flex-start;
    }

    & .remove {
        all: unset;
        cursor: pointer;
        color: oklch(from var(--red) l c h / 0.8);
        flex-shrink: 0;
        padding: var(--space-1);

        & svg {
            inline-size: var(--space-4);
            block-size: var(--space-4);
        }

        &:hover {
            color: var(--red);
        }
    }

    /* The link field is drawn like the form's other fields, and as tall as
       the button and the shadow under it. */
    & .youtube-add {
        display: flex;
        align-items: stretch;
        gap: var(--space-2);

        & .youtube-url {
            flex: 1;
            min-inline-size: 0;
            margin-block-end: -2px;
        }
    }
}