.page {
    color: var(--main-text-color);
    font-family: var(--main-font, sans-serif);
    font-size: var(--font-size);
    background-color: var(--bg-color);
    line-height: var(--line-h);
    overflow-x: hidden;
}

.wrapper {
    inline-size: clamp(22.375rem, 14.166rem + 35.02vw, 45.688rem);
    margin: 0 auto;
}

.content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 42px;
    block-size: 100dvh;
    overflow: hidden;
}

.content__img-box {
    inline-size: clamp(11.75rem, 0.962rem + 48.22vw, 36.25rem);
}
.content__img {
    object-position: center;
    object-fit: contain;
    inline-size: 100%;
}


.content::after {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    background-image: url('../images/background-img.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    inline-size: clamp(37.5rem, 24.934rem + 53.62vw, 73.188rem);
    block-size: clamp(35.625rem, -52.585rem + 167.22vw, 54.438rem);
}

.content__text {
    display: flex;
    gap: 16px;
    flex-direction: column;
    align-items: center;
}

.content__title {
    font-size: var(--h2-font-size);
    line-height: var(--line-h);
    text-align: center;
}

.content__description {
    text-align: center;
    font-size: var(--h3-font-size);
    line-height: var(--line-h);
    font-weight: var(--font-w);
}

@media screen and (max-width: 650px) {
    .content {
        gap: 28px;
    }
    .content__text {
        gap: 12px;
    }
    .content__title {
        white-space: pre-wrap;
    }
    .content__description {
        white-space: pre-wrap;
    }
    .content__img-box {
        inline-size: clamp(14.375rem, 8.32rem + 27.06vw, 28.125rem);
    }
    .content__img {
        content: url('../images/img_mobile.svg');
    }
}