:root {
    --hero-wrapper-padding-top: 40px;
    --hero-wrapper-padding-bottom: 40px;

    --hero-wrapper-padding-left: 16px;
    --hero-wrapper-padding-right: 16px;
}

@media (min-width: 1361px) {
    .industry-solutions-hero__container {
        --hero-wrapper-padding-top: 60px;
        --hero-wrapper-padding-bottom: 60px;
    }
}

@media (min-width: 1729px) {
    .industry-solutions-hero__container {
        --hero-wrapper-padding-top: 100px;
        --hero-wrapper-padding-bottom: 100px;
    }
}

@media (min-width: 576px) {
    .industry-solutions-hero__container {
        --hero-wrapper-padding-left: 18px;
        --hero-wrapper-padding-right: 18px;
    }
}

@media (min-width: 1201px) {
    .industry-solutions-hero__container {
        --hero-wrapper-padding-left: 24px;
        --hero-wrapper-padding-right: 24px;
    }
}

.industry-solutions-hero {
    background: #F7F9FC;
}

.industry-solutions-hero__container {
    max-width: 1508px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--hero-wrapper-padding-left);
    padding-right: var(--hero-wrapper-padding-right);
}

.industry-solutions-hero__container {
    display: grid;
    gap: 24px;
    align-items: center;
    padding-top: var(--hero-wrapper-padding-top);
    padding-bottom: var(--hero-wrapper-padding-bottom);
}

@media (min-width: 1100px) {
    .industry-solutions-hero__container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.industry-solutions-hero__info > *:first-child {
    margin-top: 0;
}

.industry-solutions-hero__buttons {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

@media (max-width: 770px) {
    .industry-solutions-hero__info h1,
    .industry-solutions-hero__info p {
        text-align: center;
    }

    .industry-solutions-hero__buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.industry-solutions-hero__button {
    display: flex;
    flex-direction: column;
}


.industry-solutions-hero__media {

}

.industry-solutions-hero__image {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .industry-solutions-hero__image {
        margin: 0 0 0 auto;
    }
}

@media (min-width: 771px) and (max-width: 1100px) {
    .industry-solutions-hero__image {
        width: 90%;
    }
}