.resultDebug {
    --base-gap: 20px;
    display: flex;
    gap: var(--base-gap);
    flex-wrap: wrap;
    justify-content: center;

    > div {
        flex-basis: calc(33.333% - var(--base-gap));
        flex-grow: 0;

        > .image {
            aspect-ratio: var(--aspect-ratio);
            display: flex;
            border-radius: var(--border-radius);
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.2);

            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cstyle%3E%40import url('https%3A//fonts.googleapis.com/css2%3Ffamily%3DInconsolata%3Awght%40400')%3B%3C/style%3E%3Crect width='100%25' height='100%25' fill='none'/%3E%3Ctext x='50%25' y='40%25' dominant-baseline='middle' text-anchor='middle' font-family='Inconsolata' font-size='12' fill='white'%3EYour browser does%3C/text%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Inconsolata' font-size='12' fill='white'%3Enot support this%3C/text%3E%3Ctext x='50%25' y='60%25' dominant-baseline='middle' text-anchor='middle' font-family='Inconsolata' font-size='12' fill='white'%3Eimage format%3C/text%3E%3C/svg%3E");

            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;

            > img {
                width: 100%;
                float: left;
            }

            > video {
                width: 100%;
                float: left;
            }
        }

        .subTitle {
            font-size: var(--font-size-small);
            color: var(--color-text-faint);
        }
    }
}