/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.background-main-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    bottom: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    z-index: 1;
    flex-shrink: 0;
    font-family: 'object-fit: cover;';
}

.background-left-image,
.background-right-image {
    width: 100%;
    flex-shrink: 0;
}

.background-left-image {
    float: left;
}

.background-right-image {
    float: right;
}

.hero__content {
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.hero__wrapper {
    position: relative;
}

.hero__player__wrapper {
    position: relative;
    width: 100%;
}

.hero__player {
    width: 100%;
    max-width: none;
}

.hero__wrapper .columns {
    display: block;
    position: relative;
    z-index: 10;
}