.intro {
    background-color: var(--color-primary);
    padding: clamp(30px, calc(30px + (0 - 30) * ((100vw - 360px) / (768 - 360))), 30px) 20px;
    text-align: start;
    color: var(--text-light);
    align-items: flex-start;
    position: relative;
}

@media (min-width: 768px) {
    .intro {
        padding: 0 clamp(20px, calc(20px + (60 - 20) * ((100vw - 768px) / (1280 - 768))), 60px);
        padding-bottom: clamp(50px, calc(50px + (60 - 50) * ((100vw - 768px) / (1280 - 768))), 60px);
    }
}

@media (min-width: 1280px) {
    .intro {
        padding: 0 clamp(60px, calc(60px + (322 - 60) * ((100vw - 1280px) / (1920 - 1280))), 322px);
        padding-bottom: clamp(60px, calc(60px + (80 - 60) * ((100vw - 1280px) / (1920 - 1280))), 80px);
    }
}

@media (min-width: 1920px) {
    .intro {
        padding: 0 322px;
        padding-bottom: 80px;
    }
}

.intro__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

@media (min-width: 768px) {
    .intro__content {
        max-width: clamp(478px, calc(478px + (650 - 478) * ((100vw - 768px) / (1280 - 768))), 650px);
    }
}

@media (min-width: 1280px) {
    .intro__content {
        max-width: clamp(650px, calc(650px + (750 - 650) * ((100vw - 1280px) / (1920 - 1280))), 750px);
        gap: 20px
    }
}

@media (min-width: 1920px) {
    .intro__content {
        max-width: 750px;
    }
}

.intro__button {
    padding: 14px 48px;
    background-color: var(--bg-light);
    color: var(--text-dark);
    border-radius: 12px;
    width: 100%;
    border: none;
    cursor: pointer;
}

.intro__button:hover {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

@media (min-width: 768px) {
    .intro__button {
        width: auto;
    }
}

@media (min-width: 1280px) {
    .intro__button {
        padding: 20px 60px;
        border-radius: 20px;
    }
}



.intro__image-wrapper {
    display: none;
}

@media (min-width: 768px) {
    .intro__image-wrapper {
        position: absolute;
        display: block;
        z-index: 10;
        top: clamp(-168px, calc(-92px + (-168 - -92) * ((100vw - 768px) / (1280 - 768))), -92px);
        right: clamp(-46px, calc(-46px + (40 - -46) * ((100vw - 768px) / (1280 - 768))), 40px);
        width: clamp(283px, calc(283px + (393 - 283) * ((100vw - 768px) / (1280 - 768))), 393px);
        height: clamp(282px, calc(282px + (392 - 282) * ((100vw - 768px) / (1280 - 768))), 392px);
    }
}

@media (min-width: 1280px) {
    .intro__image-wrapper {
        top: clamp(-236px, calc(-168px + (-236 - -168) * ((100vw - 1280px) / (1920 - 1280))), -168px);
        right: clamp(40px, calc(40px + (296 - 40) * ((100vw - 1280px) / (1920 - 1280))), 296px);
        width: clamp(393px, calc(393px + (492 - 393) * ((100vw - 1280px) / (1920 - 1280))), 492px);
        height: clamp(392px, calc(392px + (490 - 392) * ((100vw - 1280px) / (1920 - 1280))), 490px);
    }
}


.intro__image {
    width: 100%;
    height: 100%;
    display: block;
}