div#post-header {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: calc(var(--main-menu-height) + 1rem);
        padding-bottom: 2rem;
}

div#post-header h1.title {
        font-size: 3rem;
        font-weight: 700;
        color: #000;
        text-align: left;
        margin: 0 0 0.5rem 0;
        padding: 0 10%;
}

div#post-header h2.subtitle {
        font-size: 1.5rem;
        color: #333;
        text-align: left;
        margin: 0 0 2rem 0;
        padding: 0 10%;
}

div#post-header .page-header-img,
div#post-header .page-header-video {
        position: relative;
        align-self: stretch;
        margin-left: 10%;
        margin-right: 10%;
        border-radius: 10px;
        overflow: hidden;
        aspect-ratio: 16 / 9;
}

div#post-header .page-header-img {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
}

div#post-header .page-header-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

@media only screen and (max-width: 481px) {
        div#post-header h1.title,
        div#post-header h2.subtitle {
                padding: 0 5%;
        }

        div#post-header .page-header-img,
        div#post-header .page-header-video {
                margin-left: 5%;
                margin-right: 5%;
        }
}