@layer components {
    .intro {
        margin-top: calc(var(--spacer-vertical) * 2);
        margin-bottom: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        column-gap: calc(var(--spacer-vertical) * 2);
    }

    .name {
        margin-top: 0;
        margin-bottom: var(--spacer-vertical);
        text-align: center;
        font-weight: 500;
        font-size: var(--font-size-h1);
        line-height: var(--line-height-h1);
        letter-spacing: var(--letter-spacing-h1);
    }

    .intro__text {
        margin-top: 0;
        margin-bottom: 0;
        align-self: flex-start;
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        letter-spacing: var(--letter-spacing-body);
    }

    .intro__text p {
        margin-top: 0;
        margin-bottom: var(--spacer-vertical);
    }

    .intro__photo {
        margin-top: 0;
        margin-bottom: 0;
        margin-inline-start: calc(-1 * var(--intro-photo-inline-shift, 0px));
        aspect-ratio: var(--photo-id-aspect-ratio);
        width: min(var(--photo-id-width), var(--intro-photo-width-cap, 9999px));
        height: auto;
        /* width: 100%; */
        /* height: 100%; */
        border-radius: var(--corner-radius-large);
        overflow: hidden;
        align-self: center;
        justify-self: center;
    }

    .intro__photo img {
        margin-top: 0;
        margin-bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    /* @supports not (aspect-ratio: 1 / 1) {
        .intro__photo {
            position: relative;
            height: auto;
        }

        .intro__photo::before {
            content: "";
            display: block;
            padding-top: 61.803%;
        }

        .intro__photo img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }
    } */
}