.post-hero{
    width: 100%;
    max-width: 100%;
    min-height: 45rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
    padding-top: var(--header-height);
}

.post-hero-breadcrumbs{
    padding: 0;
    margin: 0 0 0.8em;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1em;
    row-gap: var(--item-row-gap);
}

.post-hero-breadcrumbs li{
    display: flex;
    list-style: none;
    column-gap: 1em;
    align-items: center;
}

.post-hero-breadcrumbs li:not(:first-child):before{
    content: '';
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    margin: 0 0.8rem;
    border-top: 0.2rem solid;
    border-right: 0.2rem solid;
    transform: rotateZ(45deg);
}

.post-hero-breadcrumbs li a{
    text-decoration: none;
    color: var(--text-color);
}

.post-hero-breadcrumbs li a:is(:hover, :focus, :active){
    text-decoration: underline;
}

.post-hero-breadcrumbs li:last-child{
    font-weight: 700;
}

.post-hero-content{
    width: 100%;
    max-width: var(--wide-width);
    margin: var(--row-gap) auto var(--item-row-gap);
    align-self: end;
    z-index: 1;
}

.post-hero-content-inner > *{
    margin-bottom: 2.4rem;
}

.post-hero-content-inner > *:last-child{
    margin-bottom: 0;
}

.post-hero-content h1{
    font: var(--font-headline-2);
}

.post-hero-content time{
    display: block;
    font: var(--font-body-xsmall);
}




.post-hero-content-share{
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.6rem;
    row-gap: 0.6rem;
}

.post-hero-content-share li{
    display: block;
    list-style: none;
}

.post-hero-content-share li a{
    display: block;
}

.post-hero-content-share li a svg{
    width: 3.2rem;
    height: 3.2rem;
}

.post-hero-content-share li a svg:last-child:not(:first-child){
    display: none;
}

.post-hero-content-share li a svg *{
    transition: all 0.3s ease;
}

.post-hero-content-share li a svg rect{
    fill: var(--primary-button-background-color);
}

.post-hero-content-share li a svg path{
    fill: var(--primary-button-text-color);
}

.post-hero-content-share li a:is(:hover, :focus, :active) svg rect{
    fill: var(--primary-button-hover-background-color);
}

.post-hero-content-share li a:is(:hover, :focus, :active) svg path{
    fill: var(--primary-button-hover-text-color);
}

.post-hero-image img{
    width: 100%;
    max-width: 100rem;
    height: 35rem;
    object-fit: cover;
}

.post-hero-filler{
    display: none;
    z-index: 1;
}

@media (min-width: 992px){
    .post-hero{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .post-hero-content{
        margin: var(--item-row-gap) 0 0 auto;
        padding: var(--item-row-gap) var(--item-column-gap) var(--item-row-gap) 0;
        max-width: calc(var(--wide-width) / 2);
    }

    .post-hero-content:first-child:last-child{
        max-width: var(--wide-width);
        grid-column: span 2;
        margin-right: auto;
    }

    .post-hero-content:first-child:last-child .post-hero-content-inner{
        max-width: 100rem;
    }

    .post-hero-image{
        margin-top: var(--block-margin);
        grid-row: span 2;
    }

    .post-hero-image img{
        height: 43rem;
        min-height: 100%;
    }

    .post-hero-filler{
        display: block;
        height: var(--block-margin);
        background-color: var(--light-background-color);
    }

    .section-background[data-color-scheme|="medium"] .post-hero-filler{
        background-color: var(--medium-background-color);
    }

    .section-background[data-color-scheme|="dark"] .post-hero-filler{
        background-color: var(--dark-background-color);
    }

    .section-background:has(+ [data-color-scheme|="light"]) > .section-background > .post-hero:last-child .post-hero-filler,
    .post-hero:has(+ [data-color-scheme|="light"]) .post-hero-filler{
        background-color: var(--light-background-color);
    }

    .section-background:has(+ [data-color-scheme|="medium"]) > .section-background > .post-hero:last-child .post-hero-filler,
    .post-hero:has(+ [data-color-scheme|="medium"]) .post-hero-filler{
        background-color: var(--medium-background-color);
    }

    .section-background:has(+ [data-color-scheme|="dark"]) > .section-background > .post-hero:last-child .post-hero-filler,
    .post-hero:has(+ [data-color-scheme|="dark"]) .post-hero-filler{
        background-color: var(--dark-background-color);
    }
}