/* Element | http://localhost:3000/ */

* {
    box-sizing: border-box;
}

h1.plain,
h2.plain,
h3.plain {
    font-size: inherit;
    font-weight: inherit;
    display: inline;
}

.heading.heading {
    font-weight: bold;
    text-transform: capitalize;
}

ol.thumb-grid {
    --thumbnail-width: 16rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--thumbnail-width));
    gap: 1rem;
    padding: 0;
    justify-content: center;

    @media (width < 34rem) {
        padding: 1rem;
        grid-template-columns: auto;
    }

    li {
        display: flex;
        flex-flow: column;
        gap: 0.5rem;

        vid-thumbnail {
            position: relative;

            img {
                width: 100%;
            }

            vid-timestamp {
                position: absolute;
                bottom: 0;
                right: 0;
                background: hsla(from black h s l / 70%);
                color: white;
                font-family: "Courier New", Courier, monospace;
            }
        }
        vid-details-large {
            display: flex;
            gap: 0.5rem;
            flex-flow: row nowrap;

            img {
                width: 3rem;
                height: 3rem;
                border-radius: 999rem;
            }
            vid-title {
                font-weight: bold;
            }
        }

        vid-details-small {
            display: flex;
            gap: 0.5rem;
            font-style: italic;
        }
    }
}