.at-heroBanner {
    position: relative;
    height: 60vh;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.at-heroBanner.--fullscreen {
    height: 100vh;
}

.at-heroBanner__imageSection {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(0,0,0);
}

.at-heroBanner__imageWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background: no-repeat center center;
    background-size: cover;
}

.at-heroBanner__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.at-heroBanner__contentWrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-direction: column;
    height: 100%;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 95%);
}

.at-heroBanner__content {
    padding: 0 3vw 1rem;
}

.at-heroBanner__link {
    display: block;
    text-decoration: none;
}

.at-heroBanner__title,
.at-heroBanner__icon {
    text-align: center;
    color: var(--baseLight100);
}

.at-heroBanner__title {
    margin: 0 auto;
    word-break: break-word;
}

.at-heroBanner__icon {
    display: block;
    font-size: 2rem;
}

/**
*   Position header over hero banner and make it visible
**/

body.hasHeroBanner .header {
    position: absolute;
    top: 0;
    z-index: 4;
    width: 100%;
}

body.hasHeroBanner .mainNavigation a,
body.hasHeroBanner .friendlyBurger-toggler,
body.hasHeroBanner .search-toggler {
    color: var(--baseLight100);
}