/* ОБЩИЕ */
.br {
    display: block;
}

.icon {
    width: 1em;
    height: 1em;
}

.invoice__title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    color: #1e1e1e;
}

.invoice__title_2 {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.875em;
    text-align: center;
    text-transform: none;
}

@media (min-width: 576px) {
    .invoice__title {
        font-size: 2em;
    }

    .invoice__title_2 {
        font-size: 1.875em;
    }
}

@media (min-width: 992px) {
    .lg-no-br {
        display: inline;
    }

    .invoice__title {
        font-size: 2.5em;
    }

    .invoice__title_2 {
        margin-bottom: 1.666666667em;
        font-size: 2.25em;
    }
}

/* БАННЕР */
.invoice__banner {
    display: flex;
    min-height: 27em;
    padding-top: 3.25em;
    padding-bottom: 3.25em;
    background-color: #f1f1f1;
    background-image: url(./img/header/invoice_xs.webp);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
}

.invoice__slogan {
    display: none;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 1.125em;
    line-height: 1.67;
    color: #000000;
}

.invoice__banner .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.invoice__banner p:last-child {
    margin-bottom: 0;
}

@media (min-width: 576px) {
    .invoice__banner {
        min-height: auto;
        background-image: url(./img/header/invoice_sm.webp);
    }

    .invoice__slogan {
        display: block;
    }
}

@media (min-width: 768px) {
    .invoice__banner {
        background-image: url(./img/header/invoice_lg.webp);
    }
}

@media (min-width: 992px) {
    .invoice__banner {
        padding-top: 15em;
        padding-bottom: 15em;
    }

    .invoice__slogan {
        font-size: 1.375em;
    }
}

@media (min-width: 1200px) {
    .invoice__banner {
        background-image: url(./img/header/invoice_xl.webp);
    }
}

@media (min-width: 1600px) {
    .invoice__banner {
        background-image: url(./img/header/invoice_xxl.webp);
    }
}

/* ИКОНКИ */
.invoice__icon {
    --foreground-color: #61aaa3;
    --background-color: #ffffff;
    position: relative;
    font-size: 5em;
    z-index: 1;
}

.invoice__icon .icon {
    position: relative;
    z-index: 1;
}

.invoice__icon::after {
    position: absolute;
    right: -12px;
    bottom: -20px;
    display: inline-block;
    width: 0.7125em;
    height: 0.7125em;
    background-color: #b1e5df;
    border-radius: 50%;
    z-index: 0;
    content: '';
}

/* ПРЕИМУЩЕСТВА СЕРВИСА */
.invoice__advantages {
    margin-top: 4.25em;
    margin-bottom: 5.25em;
}

.invoice__advantages-list {
    display: flex;
    flex-wrap: wrap;
    margin: -1em;
    padding-left: 0;
    list-style: none;
    text-align: center;
}

.invoice__advantages-item {
    width: 100%;
    padding: 1em;
}

.invoice__advantages-item p {
    margin: 0;
}

.invoice__advantages-item p.invoice__advantages-title {
    margin-top: 1em;
    margin-bottom: 0.72222222em;
    font-size: 1.125em;
}

@media (min-width: 576px) {
    .invoice__advantages-item {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .invoice__advantages-item {
        width: 25%;
    }

    .invoice__advantages-title {
        margin-top: 1.1em;
        margin-bottom: 0.9em;
        font-size: 1.25em;
    }
}

/* ДОСТУПНОСТЬ СЕРВИСА */
.invoice__availability {
    margin-top: 5.25em;
    margin-bottom: 2.5em;
}

.invoice__availability-content {
    padding: 2em 0.75em;
    background-color: #f1f1f1;
}

.invoice__availability-content p {
    text-align: center;
}

.invoice__availability-content p .button {
    margin-right: auto;
    margin-left: auto;
}

.invoice__availability-cloud {
    margin-bottom: 2em;
    padding-top: 10.5em;
    background-image: url(./img/cloud.png);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
}

@media (min-width: 576px) {
    .invoice__availability-content {
        padding: 1.5em;
    }
}

@media (min-width: 992px) {
    .invoice__availability-content {
        display: grid;
        grid-template-columns: 66% 33%;
        padding: 2.5em;
        font-size: 1.25em;
    }

    .invoice__availability-content .invoice__title {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .invoice__availability-content ul {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .invoice__availability-cloud {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        background-image: url(./img/cloud-lg.png);
    }

    .invoice__advantages-button {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
    }
}

@media (min-width: 1440px) {
    .invoice__availability-content {
        padding: 4em;
    }
}

/* МАРКИРОВАННЫЙ СПИСОК */
.invoice__list {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.invoice__list li:not(:last-child) {
    margin-bottom: 0.75em;
}

.invoice__list li {
    display: flex;
    align-items: baseline;
}

.invoice__list li::before {
    position: relative;
    bottom: 3px;
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    flex-shrink: 0;
    margin-right: 1em;
    background-color: #00898d;
    border-radius: 50%;
    content: '';
}

/* ПРЕДУПРЕЖДЕНИЕ */
.invoice__warning {
    margin-top: 2.5em;
    margin-bottom: 4em;
}

.invoice__alert {
    display: flex;
    align-items: center;
    padding: 1.25em 1.5em;
    font-weight: 700;
    color: #ffffff;
    background-color: #00898d;
}

.invoice__alert::before {
    display: block;
    width: 1.3em;
    height: 1.3em;
    margin-right: 0.5em;
    font-size: 2em;
    line-height: 1.3em;
    text-align: center;
    color: #00898d;
    background-color: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
    content: '!';
}

.invoice__alert p:last-child {
    margin-bottom: 0;
}

@media (min-width: 576px) {
    .invoice__warning {
        margin-top: 2.25em;
        margin-bottom: 3.75em;
    }
}

@media (min-width: 992px) {
    .invoice__warning {
        margin-top: 2.8125em;
        margin-bottom: 4.6875em;
        font-size: 1.125em;
    }
}

@media (min-width: 1200px) {
    .invoice__warning {
        margin-bottom: 5.3125em;
    }
}

@media (min-width: 1440px) {
    .invoice__warning {
        margin-top: 4.125em;
        font-size: 1.25em;
    }
}

/* КАК ПОДКЛЮЧИТЬ */
.invoice__howto {
    margin-top: 4em;
    margin-bottom: 4em;
}

@media (min-width: 576px) {
    .invoice__howto {
        margin-top: 3.75em;
    }
}

@media (min-width: 992px) {
    .invoice__howto {
        margin-top: 4.6875em;
    }
}

/* НУМЕРОВАННЫЙ СПИСОК */
.invoice__order {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: order;
}

.invoice__order li {
    display: flex;
    align-items: center;
}

.invoice__order li::before {
    display: block;
    width: 2em;
    height: 2em;
    margin-right: 1em;
    font-size: 1.5em;
    text-align: center;
    line-height: 2em;
    color: #00898d;
    border: 2px solid currentColor;
    border-radius: 50%;
    content: counter(order);
    flex-shrink: 0;
    counter-increment: order;
}

.invoice__order li:not(:last-child) {
    margin-bottom: 2em;
}

@media (min-width: 992px) {
    .invoice__order {
        display: flex;
        gap: 1em;
    }

    .invoice__order li:not(:last-child) {
        margin-bottom: 0;
    }
}

/* ПОДВАЛ */
.invoice__footer {
    margin-top: 4em;
    margin-bottom: 4em;
}

.invoice__footer .button {
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 992px) {
    .invoice__footer {
        margin-top: 5.5em;
        margin-bottom: 5.5em;
    }
}