.banner {
    position: relative;
    width: 100%;
    height: $banner-height;
    padding: $banner-padding;
    background: var(--navy-blue-80);
    box-shadow: $banner-box-shadow;
}

.banner-description {
    flex-grow: 1;
    color: var(--white);
    font-size: $medium-title-font-size;
    text-align: center;

    button {
        margin-left: 20px;
        border: none;
    }
}

.banner-name {
    color: var(--white);
    font-size: $small-font-size;
    text-transform: uppercase;
    opacity: $transparency-3;
}

.banner-subtitle {
    color: var(--white);
    font-size: $big-font-size;
}

.banner-main {
    box-sizing: border-box;
    width: 100%;
    margin-top: 2 * $spacing;
    margin-bottom: 2 * $spacing;
    color: var(--white);
}

.banner-title {
    color: var(--white);
    font-size: $big-title-font-size;
}

.banner-warning-title {
    color: var(--warning-70);
}

.banner-error-title {
    color: var(--pomegranate-red-80);
}

.banner-warning-icon {
    position: relative;
    top: $banner-warning-icon-fix;
    fill: var(--warning-70);

    .banner-error-title & {
        fill: var(--pomegranate-red-80);
    }
}

.banner-right {
    color: rgb(var(--white-rgb) / $transparency-2);
    font-size: var(--default-font-size);
}

.banner-bottom-right-infos {
    display: inline;
    max-width: $banner-right-width;
}