.banner {
	display: block;
	overflow: visible;

	/* Set as position parent */
	position: relative;

	/* Force img, video, svg to scale. */
	height: auto;

    /* 1280:375 Aspect ratio */
    width: 100vw;
    height: 35.7vw;
    max-height: 28.125rem;
    max-width: 100%;
    min-height: 200px;

	/* Negate possible spacing when .block is used on something typographic like
	   a <p>, for example. Also, make blocks behave as centered wraps by default. */
	margin: 0;
	padding: 0;

	background-size: cover;
	background-position: 60% 40%;
	background-color: var(--blue-color);
}

h1 + .banner{
    margin-top: 40px;
    margin-bottom: 40px;
}

.banner > img,
.banner > svg,
.banner > video,
.banner > canvas,
.banner > object,
.banner > embed,
.banner > iframe {
	/* Don't allow media to break out of .block bounds. */
	max-width: 100%;
}

.banner > .wrap {
	width: calc(100vw - 8.75rem);
	height: 100%;
	position: relative;
}

.banner > .wrap > .box-banner {
    position: absolute;
    top: 2.1875rem;
    left: -4.1875rem;
    /* Adapt all dimesntions to size of screen, maxing at a box of 380x380px
       at a screen width of 1280px */
    font-size: calc(1.3671875vw + 1.0938rem);
    line-height: 1.257142em;
	width: calc(12.9167rem + 13.54166667vw);
	max-width: 23.75rem;
	height: calc(100% - 4.375rem);
    max-height: 23.75rem;
}

@media (min-width: 80em) {
    .banner > .wrap > .box-banner {
        font-size: 2.1875rem;
    }
}


.banner-offset > .wrap > .box-banner {
    top: 2.25rem;
	height: calc(100% - 5rem);
}