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

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

    @screen md {
        font-size: $heading-font-size--225;
    }
}

.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 {
    margin-bottom: 1rem;

    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;
            position: absolute;
            top: 50%;
        }

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

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

.c-intro__icon--centered {
    margin: 0 auto;
}

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

    @screen md {
        font-size: $heading-font-size--225;
    }

    &.c-intro__title--with-background {
        color: #fff;
        display: inline-block;
        padding: .3em .5em;
    }
}

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

// Accent Color Modifiers

// Primary (Standard)
.c-intro__icon--primary {
    .c-page-intro__title {
        color: theme('colors.primary.500');
    }

    .c-intro__icon {
        fill: theme('colors.primary.500');

        &.c-intro__icon--with-border {
            &::before,
            &::after {
                border-color: theme('colors.primary.500');
            }
        }
    }

    .c-intro__title {
        &.c-intro__title--with-background {
            background: theme('colors.primary.500');
        }
    }
}

// Secondary
.c-intro__icon--secondary {
    .c-page-intro__title {
        color: theme('colors.secondary.500');
    }

    .c-intro__icon {
        fill: theme('colors.secondary.500');

        &.c-intro__icon--with-border {
            &::before,
            &::after {
                border-color: theme('colors.secondary.500');
            }
        }
    }

    .c-intro__title {
        &.c-intro__title--with-background {
            background: theme('colors.secondary.500');
        }
    }
}

// Accent
.c-intro__icon--accent {
    .c-page-intro__title {
        color: theme('colors.accent.500');
    }

    .c-intro__icon {
        fill: theme('colors.accent.500');

        &.c-intro__icon--with-border {
            &::before,
            &::after {
                border-color: theme('colors.accent.500');
            }
        }
    }

    .c-intro__title {
        &.c-intro__title--with-background {
            background: theme('colors.accent.500');
        }
    }
}

// CTA
.c-intro__icon--cta {
    .c-page-intro__title {
        color: theme('colors.cta.500');
    }

    .c-intro__icon {
        fill: theme('colors.cta.500');

        &.c-intro__icon--with-border {
            &::before,
            &::after {
                border-color: theme('colors.cta.500');
            }
        }
    }

    .c-intro__title {
        &.c-intro__title--with-background {
            background: theme('colors.cta.500');
        }
    }
}

// Ambient
.c-intro__icon--ambient {
    .c-page-intro__title {
        color: theme('colors.ambient.500');
    }

    .c-intro__icon {
        fill: theme('colors.ambient.500');

        &.c-intro__icon--with-border {
            &::before,
            &::after {
                border-color: theme('colors.ambient.500');
            }
        }
    }

    .c-intro__title {
        &.c-intro__title--with-background {
            background: theme('colors.ambient.500');
        }
    }
}
