@layer components {
    section.client-details {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: var(--space-m);

        dl {
            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);
            row-gap: var(--space-3xs);

            margin-bottom: 0;

            dd {
                font-weight: 400;
            }
        }

        > div.contact-info {
            display: grid;
            grid-template-columns: subgrid;
            align-items: center;
            grid-column: 1 / -1;
            margin-top: var(--space-xl);
            border-top: solid var(--size--border) var(--color--border);
            padding-top: var(--space-m);

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

        @media screen and (min-width: 1000px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .address {
        white-space: pre-wrap;
    }
}