.main-banner {
    padding: var(--header-height) 0 40px;
    position: relative
}

@media (min-width: 760px) {
    .main-banner {
        padding: var(--header-height) 0 60px
    }
}

@media (min-width: 1200px) {
    .main-banner {
        padding: var(--header-height) 0 80px
    }
}

.main-banner__blob {
    position: absolute;
    pointer-events: none;
    max-width: 65vw
}

.main-banner__blob--left {
    top: 0;
    left: 0
}

.main-banner__blob--right {
    top: 200px;
    right: 0
}

.main-banner__content {
    text-align: center;
    width: 100%;
    max-width: 824px;
    margin: 0 auto;
    padding-top: 40px
}

.main-banner__title {
    color: var(--black)
}

.main-banner__title b, .main-banner__title span, .main-banner__title strong {
    color: var(--primary)
}

.main-banner__text {
    color: var(--gray);
    margin-top: 16px
}

.main-banner__text p {
    margin-bottom: 0
}

.main-banner__text p:not(:first-of-type) {
    margin-top: 16px
}

.main-banner__btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px
}

@media (min-width: 760px) {
    .main-banner__content {
        padding-top: 60px
    }

    .main-banner__btns {
        margin-top: 32px;
        gap: 16px 24px
    }
}

.main-banner__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.main-banner__image-col {
    margin: 47px auto 11px;
    width: 100%;
    max-width: 1036px;
    position: relative
}

@media (min-width: 760px) {
    .main-banner__image-col {
        margin-top: 60px;
        margin-bottom: 23px
    }
}

@media (min-width: 1200px) {
    .main-banner__content {
        padding-top: 80px
    }

    .main-banner__image-col {
        margin-bottom: 15px
    }
}

.main-banner__image-wrapper {
    position: relative;
    padding-bottom: 45.934%;
    width: 100%;
    margin: 0 auto;
    -webkit-box-shadow: 0 12px 40px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, .08)
}

@media (min-width: 760px) {
    .main-banner__image-wrapper {
        padding-bottom: 38.753%;
        max-width: calc(100% - 108px)
    }
}

@media (min-width: 1200px) {
    .main-banner__image-wrapper {
        padding-bottom: 36.584%;
        max-width: calc(100% - 212px)
    }
}

.main-banner__image-text {
    position: absolute;
    z-index: 1;
    border-radius: 100px;
    font-size: 7px;
    line-height: var(--lh-default);
    font-weight: var(--fw-normal);
    -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .08)
}

.main-banner__image-percent {
    color: var(--gray);
    background-color: var(--orange-100);
    top: -5%;
    right: 25%;
    padding: 4px 12px
}

@media (min-width: 760px) {
    .main-banner__image-text {
        font-size: var(--text-size-14)
    }

    .main-banner__image-percent {
        top: 17%;
        right: 0;
        padding: 8px 24px
    }
}

.main-banner__image-time {
    color: var(--gray);
    background-color: var(--purple-100);
    bottom: -7%;
    left: 3%;
    padding: 6px 12px
}

@media (min-width: 760px) {
    .main-banner__image-time {
        bottom: -8%;
        left: 0;
        padding: 12px 24px
    }
}

@media (min-width: 1200px) {
    .main-banner__image-percent {
        top: 24%;
        right: 2.5%
    }

    .main-banner__image-time {
        bottom: -3.5%;
        left: 2%
    }
}