@layer {
    ul.font-samples {
        list-style-type: none;

        & li {
            border-top: solid var(--size--border) var(--color--border);
            min-height: 8.44rem;
            display: flex;
            flex-direction: column;
            padding-top: var(--space-s);
            margin-bottom: var(--space-2xl);
            row-gap: var(--space-l);

            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);
        }

        .font-attribution {
            font-weight: 450;
        }

        & .font-preview {
            text-align: right;
            justify-self: right;
        }

        & .large-headlines .font-preview {
            margin-bottom: 0;

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

        & .medium-headlines .font-preview {
            margin-bottom: 0;

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

        & .small-headlines .font-preview {
            margin-bottom: 0;

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

        & .small-text .font-preview {
            margin-bottom: 0;

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

        & .large-text .font-preview {
            margin-bottom: 0;

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

            text-align: left;
        }

        & .input-text .font-preview {
            margin-bottom: 0;

            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: 1000px) {
        ul.font-samples {
            & li {
                flex-direction: row;
                justify-content: space-between;
            }

            & .font-preview {
                max-width: 60%;
            }
        }
    }
}