@use "components/common/_variables.scss";

.text {
    line-height: 1.5;

    a {
        color: variables.$color-alt;

        &:hover {
            text-decoration: none;
        }
    }

    &_lead {
        font-weight: variables.$font-weight-bold;
        line-height: 1.3;
        font-size: variables.$font-size-h1;

        @media (min-width: variables.$container-breakpoint-lg) {
            font-size: variables.$font-size-lead;
        }
    }

    &_h1 {
        font-size: variables.$font-size-h2;
        font-weight: variables.$font-weight-bold;
        line-height: 1.3;

        @media (min-width: variables.$container-breakpoint-lg) {
            font-size: variables.$font-size-h1;
        }
    }

    &_h2 {
        font-size: variables.$font-size-h3;
        font-weight: variables.$font-weight-regular;
        line-height: 1.3;

        @media (min-width: variables.$container-breakpoint-lg) {
            font-size: variables.$font-size-h2;
        }
    }

    &_h3 {
        font-size: variables.$font-size-h3;
        font-weight: variables.$font-weight-bold;
        line-height: 1.25;
    }

    &__form-h3 {
        margin-bottom: 16px;
        font-size: 24px;
        color: #222a5e;

        > .anchorjs-link {
          display: none;
        }
    }

    &__form {
        margin: 0;
        margin-bottom: 32px;
        font-size: 14.7px;
        letter-spacing: .6px;
    }

    &_base {
        font-size: variables.$font-size-base;
        font-weight: variables.$font-weight-regular;
        line-height: 1.5;
    }

    &_big {
        font-size: 18px;
        font-weight: variables.$font-weight-light;
        line-height: 1.5;

        @media (min-width: variables.$container-breakpoint-lg) {
            font-size: variables.$font-size-h3;
        }
    }

    &_alt {
        color: variables.$color-alt;
    }

    &_bold {
        font-weight: bold;
    }

    &_small {
        opacity: 0.6;
        font-size: variables.$font-size-small;
    }

    &_center {
        text-align: center;
    }
}
