.banner.section--color:first-child {
    padding-top: 0;
}

.banner > .flow > [class$="__container"] {
    position: relative;
}

.banner__visual {
    display: block;
}

.banner__image {
    height: auto;
    width: 100%;
    vertical-align: top;
}

.banner__content-frame {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 62rem) {
    .banner:not(.banner--layout-1),
    .banner:not(.banner--layout-1) > .flow,
    .banner:not(.banner--layout-1) > .flow > .flow,
    .banner:not(.banner--layout-1) .banner__content {
        display: flex;
    }

    .banner:not(.banner--layout-1)::before {
        content: '';
        float: left;
        width: 0.063rem;
        margin-left: -0.063rem;
    }

    .banner:not(.banner--layout-1)::after {
        content: '';
        display: table;
        clear: both;
    }

    .banner--layout-0::before {
        padding-top: calc((100% * 1/3) + 3rem);
    }

    .banner--layout-2::before,
    .banner--layout-3::before {
        padding-top: calc(100% * 1/3);
    }

    .banner--layout-0 {
        padding-bottom: 3rem;
    }

    .banner:not(.banner--layout-1) > .flow,
    .banner:not(.banner--layout-1) > .flow > .flow,
    .banner:not(.banner--layout-1) .banner__content {
        width: 100%;
    }

    .banner:not(.banner--layout-1) .banner__visual {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .banner--layout-3 .banner__visual {
        z-index: 1;
    }

    .banner--layout-3 .banner__image {
        height: 100%;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(0,-50%);
        width: auto;
    }

    .banner__content-frame {
        padding: 2rem;
    }

    .banner--layout-2 .banner__content-frame {
        width: 50%;
    }

    .banner--layout-3 .banner__content-frame {
        padding: 0;
        width: calc(50% - 2rem);
    }

    .banner--layout-0 .banner__content {
        align-items: flex-end;
    }

    .banner--layout-2 .banner__content,
    .banner--layout-3 .banner__content {
        align-items: center;
    }
}

@media (min-width: 100rem) {
    .banner--layout-0::before {
        padding-top: calc((100% * 1/4) + 3rem);
    }

    .banner--layout-2::before,
    .banner--layout-3::before {
        padding-top: calc(100% * 1/4);
    }
}