main.scss

@import './variables';
@import './mixins';
@import './buttons';
@import './grid';
@import '../styles/cards/cards';

.react-rater-star {
    font-size: 1rem;
    &.is-active,
    &.will-be-active {
        color: $accent!important;
    }
}

.intro {
    background-color: $section-bg-color;
    padding: 1rem 0 0.125rem;
    line-height: 40px;
    @include md {
        padding: 2rem 0 .5rem;
        line-height: 40px;
    }
    .container {
        text-align: left;
        margin-bottom: 2rem;
        padding-right: 20px;
        @include md {
            padding-right: 620px;
        }
    }
    &__heading {
            font-family: $sans-font;
            font-size: 1.75rem;
            font-weight: 700;
            line-height: 35px;
        @include md {
            font-size: 2.5rem;
            line-height: 44px;
        }
    }
    &__text {
        a {
            color: $accent;
            &:hover {
                text-decoration: underline;
            }
        }
    }
    &__ctas {
        display: inline-flex;
        flex-direction: column;
        @include md {
            display: inline-block;
        }
        a {
            margin-right: .75rem;
            margin-top: .5rem;
        }
        @include md {
        }
    }
    .accent {
        color: $accent;
    }
}