/* ==================================================
   PAGE TEMPLATE
================================================== */

.page-content {

    padding: 4rem 0;

}

.page-article {

    max-width: 900px;

    margin: 0 auto;

}

.page-header {

    margin-bottom: 2rem;

}

.page-title {

    font-size: clamp(
        2.25rem,
        4vw,
        3.5rem
    );

    line-height: 1.2;

    color: var(--primary-dark);

    margin-bottom: 1rem;

}

.page-featured-image {

    margin-bottom: 2rem;

}

.page-featured-image img {

    width: 100%;

    height: auto;

    border-radius: var(--radius-lg);

    display: block;

}

.page-body {

    font-size: 1.125rem;

    line-height: 1.9;

    color: var(--gray-800);

}

.page-body p {

    margin-bottom: 1.5rem;

}

.page-body h2 {

    margin-top: 3rem;

    margin-bottom: 1rem;

    color: var(--primary-dark);

}

.page-body h3 {

    margin-top: 2rem;

    margin-bottom: 1rem;

    color: var(--primary-dark);

}

.page-body ul,
.page-body ol {

    margin-bottom: 2rem;

    padding-left: 2rem;

}

.page-body li {

    margin-bottom: .5rem;

}



/* ==================================================
   BREADCRUMBS
================================================== */

.breadcrumbs {

    margin-bottom: 2rem;

    font-size: .95rem;

    color: var(--gray-600);

}

.breadcrumbs a {

    color: var(--primary);

    text-decoration: none;

}

.breadcrumbs a:hover {

    text-decoration: underline;

}

.breadcrumbs .separator {

    margin: 0 .5rem;

    color: var(--gray-500);

}

.breadcrumbs .current {

    color: var(--gray-700);

}