/* ---- Head ---- */

.uh-post-head.section-padding-top {
    margin-top: 0;
    padding-top: clamp(20px, 2.4vw, 42px);
}


@media (min-width: 992px) {
    .uh-post-head,
    .uh-post-grid {
        display: grid;
        grid-template-columns: 22% minmax(0, 55%) minmax(0, 1fr);
        column-gap: 0;
        align-items: start;
    }

    .uh-post-head-side {
        grid-column: 1;
    }

    .uh-post-head > .uh-reading-toggle {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .uh-post-head-main,
    .uh-post-grid .post-content-outer {
        grid-column: 2;
    }

    .uh-post-grid .post-content-outer {
        max-width: none;
    }
}

/* The flex parent aligns items flex-start, so an auto width shrink-to-fits
   and a wide card would widen the whole column. */
.uh-post-grid .post-content-outer {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.uh-post-head-kickers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 1.4vw, 24px);
    min-width: 0;
    margin-bottom: clamp(4px, 0.5vw, 9px);
}

.uh-post-head .uh-post-part {
    font-size: clamp(15px, 1.12vw, 24px);
}

/* ---- Byline ---- */

.uh-byline {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding-right: clamp(20px, 3vw, 60px);
}

.uh-byline-avatars {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.uh-byline-avatar {
    display: block;
    width: clamp(80px, 8.5vw, 155px);
    height: clamp(80px, 8.5vw, 155px);
    border-radius: 50%;
    overflow: hidden;
}

.uh-byline-avatar + .uh-byline-avatar {
    margin-left: -20px;
}

.uh-byline-avatar img,
.uh-byline-avatar svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.uh-byline-name {
    font: var(--t-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--t-track-label);
    margin: 0;
}

.uh-byline-date,
.uh-byline-read {
    font: var(--t-meta-lg);
    opacity: var(--t-emph-soft);
    margin: 0;
}

@media (max-width: 991px) {
    .uh-post-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 16px;
    }

    .uh-post-head-side {
        grid-column: 1;
        grid-row: 1;
    }

    .uh-post-head > .uh-reading-toggle {
        grid-column: 2;
        grid-row: 1;
    }

    .uh-post-head-main {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .uh-byline {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        text-align: left;
        gap: 10px;
        padding-right: 0;
        margin-bottom: clamp(18px, 4vw, 30px);
    }

    .uh-byline-avatars {
        margin-bottom: 0;
    }

    .uh-byline-avatar {
        width: 46px;
        height: 46px;
    }

    .uh-byline-name {
        width: 100%;
    }
}

/* ---- Quotes ---- */

@media (min-width: 992px) {
    .uh-post-grid .post-content {
        margin-top: clamp(30px, 3.9vw, 66px);
    }

    .uh-post-grid .post-content blockquote {
        margin-left: 9%;
    }
}

@media (max-width: 991px) {
    .uh-post-grid .post-content blockquote {
        margin-left: 6%;
    }
}