.post-hero__wrp {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      420px;
    padding:         60px 40px;
    background:      var(--color-brown);
    border-radius:   10px;

    overflow:        hidden;
}

.post-hero__img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.post-hero__wrp::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, .5);
}

.post-hero__title {
    position:    relative;
    z-index:     1;
    margin:      0;
    font-size:   var(--fs-h1);
    line-height: 48px;
    color:       var(--color-white);
    text-align:  center;
}

.post-body { padding: 60px 0 80px; }

.post-content {
    font-size:   var(--fs-base);
    line-height: 24px;
    color:       var(--color-text-soft);
    text-align:  justify;
}

.post-content::after {
    content: '';
    display: block;
    clear:   both;
}

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

.post-content p { margin: 0 0 20px; }

.post-content li { margin: 0; }

.post-content :is(h2, h3, h4) {
    margin:     32px 0 16px;
    color:      var(--color-text);
    text-align: left;
}
.post-content :is(h2, h3, h4):first-child { margin-top: 0; }
.post-content h2 { font-size: var(--fs-h2); }
.post-content h3 { font-size: var(--fs-h3); }
.post-content h4 { font-size: var(--fs-lead); }

.post-content a {
    color:           var(--color-brown);
    text-decoration: underline;
    transition:      color var(--transition);
}
.post-content a:hover { color: var(--color-yellow); }

.post-content blockquote {
    margin:      0 0 20px;
    padding:     0 0 0 20px;
    border-left: 3px solid var(--color-yellow);
    font-style:  italic;
}

.post-content hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.post-content .wp-block-image { margin: 0; }

.post-content figure { margin: 0 0 20px; }

.post-content img {
    max-width: 100%;
    height:    auto;
}

.post-content figure.alignleft  { float: left;  margin: 9px 18px 9px 0; }
.post-content figure.alignright { float: right; margin: 9px 0 9px 18px; }
.post-content figure.aligncenter { margin: 0 auto 20px; }

.post-content figcaption {
    margin:     8px 0 0;
    font-size:  var(--fs-xs);
    color:      var(--color-muted);
    text-align: center;
}

.post-content table {
    width:           100%;
    margin:          0 0 20px;
    border-collapse: collapse;
    font-size:       var(--fs-sm);
    text-align:      left;
}
.post-content :is(th, td) {
    padding: 10px 12px;
    border:  1px solid var(--color-border);
}
.post-content th { background: var(--color-white); }

.post-date {
    margin:      40px 0 0;
    font-size:   var(--fs-base);
    line-height: 24px;
    color:       var(--color-brown);
}

@media (max-width: 1024px) {
    .post-hero__wrp   { min-height: 360px; padding: 50px 30px; }
    .post-hero__title { font-size: 36px; line-height: 42px; }
    .post-body        { padding: 40px 0 60px; }
    .post-content,
    .post-date        { line-height: 20px; }
}

@media (max-width: 767px) {
    .post-hero__wrp   { min-height: 340px; padding: 40px 20px; }
    .post-hero__title { font-size: 32px; line-height: 36px; }
    .post-body        { padding: 20px 0 40px; }
    .post-content     { font-size: var(--fs-sm); }

    .post-content figure.alignleft,
    .post-content figure.alignright {
        float:  none;
        margin: 0 0 20px;
    }
}