.hero-section[data-type=type-1] {
    text-align: var(--alignment);
    margin-bottom: var(--margin-bottom, 40px)
}

    .hero-section[data-type=type-1] .page-description {
        display: inline-block;
        max-width: var(--description-max-width, 100%)
    }

.hero-section[data-type=type-2] {
    position: relative;
    padding-top: calc(var(--has-transparent-header)*var(--header-height))
}

    .hero-section[data-type=type-2] > [class*=ct-container] {
        display: flex;
        flex-direction: column;
        justify-content: var(--vertical-alignment, center);
        text-align: var(--alignment, center);
        position: relative;
        z-index: 2;
        padding: var(--container-padding, 50px 0);
        min-height: var(--min-height, 250px)
    }

    .hero-section[data-type=type-2] > figure {
        position: absolute;
        overflow: hidden;
        z-index: 1;
        inset: 0;
        background-color: inherit
    }

        .hero-section[data-type=type-2] > figure .ct-media-container {
            height: 100%;
            vertical-align: top
        }

            .hero-section[data-type=type-2] > figure .ct-media-container img {
                height: 100%
            }

    .hero-section[data-type=type-2] .ct-title-label {
        display: block;
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: .5em
    }

.entry-header > *:not(:first-child) {
    margin-top: var(--itemSpacing, 20px)
}

.entry-header .page-title {
    margin-bottom: 0
}

.entry-header .page-description {
    color: var(--theme-text-color)
}

    .entry-header .page-description > *:last-child {
        margin-bottom: 0
    }