@layer components {
    div.logo-uploads {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--space-m);

        & h3 {
            grid-column: span 2;
            border: none;
            margin-bottom: var(--space-xs);

            font-family: var(--font--title--family--xsmall);
            font-size: var(--font--title--size--xsmall);
            font-weight: var(--font--title--weight--xsmall);
            line-height: var(--font--title--line-height--xsmall);
            letter-spacing: var(--font--title--letter-spacing--xsmall);
            text-transform: var(--font--title--casing--xsmall);
        }

        & > div {
            border-top: solid var(--size--border) var(--color--border);
            min-width: 12.125rem;
            padding-top: var(--space-s);
            margin-bottom: var(--space-xs);
        }

        & dl {
            display: block;

            & dt, & dd {
                display: block;
            }

            & dt {
                margin-bottom: var(--space-3xs);

                font-family: var(--font--title--family--xxsmall--all-caps);
                font-size: var(--font--title--size--xxsmall--all-caps);
                font-weight: var(--font--title--weight--xxsmall--all-caps);
                line-height: var(--font--title--line-height--xxsmall--all-caps);
                letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
                text-transform: var(--font--title--casing--xxsmall--all-caps);

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

            & dd {
                font-family: var(--font--input--family--small);
                font-size: var(--font--input--size--small);
                font-weight: var(--font--input--weight--small);
                line-height: var(--font--input--line-height--small);
                letter-spacing: var(--font--input--letter-spacing--small);
                text-transform: var(--font--input--casing--small);
            }

            & div {
                margin-bottom: var(--space-m);
            }

            & ul {
                list-style-type: none;
                margin-bottom: 0;

                & li {
                    margin-bottom: var(--space-3xs);
                }
            }
        }

        & figure {
            & div.studioLogo {
                border: solid var(--size--border) var(--color--border);
                width: 100%;
                aspect-ratio: 3;
                margin-bottom: var(--space-2xs);
                padding: var(--space-m);

                & > div {
                    box-sizing: content-box;
                    background-color: var(--color--brand);
                    width: 100%;
                    aspect-ratio: 3;
                    height: auto;
                    mask-size: contain;
                    mask-repeat: no-repeat;
                    mask-position: center center;
                }
            }

            & figcaption {
                margin-bottom: var(--space-s);

                font-family: var(--font--caption--family--medium);
                font-size: var(--font--caption--size--medium);
                font-weight: var(--font--caption--weight--medium);
                line-height: var(--font--caption--line-height--medium);
                letter-spacing: var(--font--caption--letter-spacing--medium);
                text-transform: var(--font--caption--casing--medium);
            }
        }

        & label.button {
            width: 100%;
            margin-bottom: var(--space-xs);

            & > input {
                /* TODO: Align to buttom of section */
                display: none;
            }
        }
    }

    @media screen and (min-width: 600px) {
        div.logo-uploads {
            display: grid;
            grid-template-columns: auto 1fr;

            & label.button {
                width: auto;
            }

            & figure {
                & figcaption {
                    margin-bottom: 0;
                }
            }
        }
    }
}