@layer layout {

    .header20 {
        position: relative;
        height: 558px;
        display: grid;
        margin-block: auto;
        color: var(--text-color-inverted);
    }

    .header20__background-image {
        position: absolute;
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    .header20__content-wrap {
        display: grid;
        z-index: 1;
        row-gap: 20px;
        grid-auto-rows: min-content;
        grid-row: none;
        font-size: 22px;
        line-height: 35px;
    }

    .header20__content-wrap * {
        color: var(--text-color-inverted);
    }

}