.c-page-intro {
    text-align: center;
    margin-top: 4rem;
}

.c-page-intro__title {
    font-size: 2.25rem;
    color: theme('colors.primary.500');
    margin-bottom: 2rem;
}

.c-page-intro__title,
.c-intro__title {
    hyphens: auto;
    word-break: break-word;
}

.c-page-intro__text {
    font-size: 1.25rem;
    margin-top: 1rem;
}


// Intro within the page
.c-intro {
    font-size: 1.25rem;
    text-align: center;
}

.c-intro__icon {
    svg {
        width: 4em;
        height: 4em;
        margin: 0 auto;
    }

    &.c-intro__icon--with-border {
        position: relative;

        &::before,
        &::after {
            content: '';
            margin-top: -1px;
            border-top: 2px solid theme('colors.secondary.500');
            position: absolute;
            top: 50%;
        }

        &::before {
            left: 60%;
            right: 0;
        }

        &::after {
            left: 0;
            right: 60%;
        }
    }
}

.c-intro__title {
    font-size: 1.875rem;
    color: theme('colors.gray.900');
    margin-bottom: 2rem;
    line-height: 1.2;
    font-family: 'BaseFontFamily', sans-serif;
    font-weight: bold;

    @screen md {
        font-size: 2.25rem;
    }

    &.c-intro__title--with-background {
        @apply bg-primary-500 text-white;
        display: inline-block;
        padding: .3em .5em;
    }
}

.c-intro__text {
    font-size: 1.25rem;
    margin-top: 1rem;
}
