@layer components {

    main:has(+ .studiolink) h1 {
        margin-bottom: var(--space-s);
    }

    .studioLink {
        display: flex;
        align-items: center;
        flex-direction: column;
        border-bottom: solid var(--size--border) var(--color--border);
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: var(--space-s);
        margin-bottom: var(--space-m);

        & a.link {
            text-decoration: none;
            flex-grow: 1;

            & .suffix {
                display: none;
            }
        }

        & .suffix {
            display: none;
        }

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

    @media (min-width: 600px) {
        .studioLink {
            flex-direction: row;
            justify-content: space-between;

            & a.link {
                & .suffix {
                    display: inline;
                }
            }
        }
    }
}