.header {
    &__ieros {
        white-space: nowrap;
        width: 100vw;
        font-size: 30px;
        line-height: 43px;
        text-align: center;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: $gray;
        font-family: $fontIero;
        overflow: hidden;
        margin-top: 15px;
    }

    &__container,
    &__inner {
        position: relative;
        z-index: 1;
    }

    &__container {
        padding-top: 35px;
        padding-bottom: 20px;
    }

    &__inner {
        max-width: 730px;
    }

    &__top {
        max-width: 600px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 23px;
    }

    &__date {
        padding-left: 22px;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 16px;
            height: 16px;
            transform: translateY(-50%);
            background: url(../img/clock.svg) no-repeat 0 0;
            background-size: 16px 16px;
        }
    }

    &__date--start {
        &::before {
            background: url(../img/flag.svg) no-repeat 0 0;
            background-size: 18px 18px;
        }
    }

    &__event,
    &__date {
        margin-bottom: 12px;
    }

    &__title {
        font-size: 52px;
        line-height: 1.2;
        margin-bottom: 14px;
    }

    &__lead {
        max-width: 600px;
        font-size: 18px;
        line-height: 1.4;
    }

    &__author {
        position: absolute;
        top: -65px;
        right: -75px;
    }

    &__form {
        margin-top: 61px;
        position: relative;
        background-color: transparent;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(242, 242, 242, .7);
            backdrop-filter: blur(64px);
        }

        .form__label {
            color: $black;
        }
    }

    &__author--mobile,
    &__fish-mobile {
        display: none;
    }

    @media (max-width:1200px) {
        &__author {
            display: none;
            top: 0;
            right: 30px;
        }

        &__author--mobile {
            display: block;
        }
    }

    @media (max-width:767px) {
        &__container {
            padding-top: 13px;
        }

        &__ieros {
            font-size: 20px;
            line-height: 29px;
            margin-top: 15px;
        }

        &__top {
            display: block;
            margin-bottom: 18px;
            padding-right: 70px;
        }

        &__author {
            top: -18px;
        }

        &__title {
            font-size: 7vh;
            margin-bottom: 14px;
        }

        &__lead {
            font-size: 14px;
            line-height: 1.5;

            strong {
                display: block;
                font-size: 16px;
                margin-bottom: 4px;
            }
        }

        &__form {
            margin-top: 33px;
        }

        &__fish-mobile {
            display: block;
            position: absolute;
            top: -80px;
            right: -30px;
            pointer-events: none;
        }
    }

    @media (max-width:576px) {
        &__event {
            strong {
                display: block;
            }
        }

        &__title {
            font-size: 3.93vh;
            margin-bottom: 14px;
        }
    }
}







/* header offer */

.header--offer {
    color: $white;
    background-color: $red2;
    position: relative;
    min-height: 612px;
    overflow: hidden;
    z-index: 9;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(45.07% 249.52% at 75.42% 100%, #FF674F 0%, rgba(213, 37, 39, 0) 100%);
        pointer-events: none;
    }

    .header__ieros {
        color: #FF9979;
        opacity: .5;
        margin-top: 25px;
    }

    .header__top {
        max-width: 474px;
        margin-bottom: 12px;
        padding-right: 0;
    }

    .header__title {
        margin-bottom: 16px;
    }

    .header__title-span {
        display: block;
        font-size: 76px;
        line-height: 1.1;
        letter-spacing: 0.1em;
        margin-bottom: 5px;
    }

    .header__author {
        right: 30px;
        display: block;
    }

    .header__prepayment {
        display: flex;
        align-items: center;
        margin-top: 47px;
    }

    .header__prepayment-btn {
        margin-right: 20px;
    }

    .header__prepayment-text {
        font-size: 14px;
        line-height: 1.4;
    }

    .grid{
        position: absolute;

        &__line{
            background-color: #F1483D;
        }
    }

    @media (max-width:1200px) {
        .header__author {
            right: 0;
        }
    }

    @media (max-width:991px) {
        & {
            min-height: 1px;
        }

        .header__container{
            padding-bottom: 55px;
        }        

        .header__inner {
            max-width: 100%;
        }

        .header__title-span {
            font-size: 66px;
        }

        .header__author {
            display: none;
        }
    }

    @media (max-width:767px) {
        .header__top {
            max-width: 100%;
            margin-bottom: 18px;
        }

        .header__title {
            font-size: 5.3vw;
            line-height: 1.2;
        }

        .header__title-span {
            font-size: 8.5vw;
            line-height: 1.2;
            margin-bottom: 0;
        }

        .header__prepayment {
            display: block;
            margin-top: 32px;
        }
    
        .header__prepayment-btn {
            margin-right: 0;
        }
    
        .header__prepayment-text {
            margin-top: 16px;
            max-width: 240px;
        }
    }
}