/* =========================================================
   GIZMOO CORE
   Section Heading Component
   ========================================================= */


/* =========================================================
   SECTION HEADING
   ========================================================= */

.gizmoo-section-heading {

    width: 100%;

    margin-bottom: var(--gizmoo-space-7);

}


/* =========================================================
   EYEBROW
   ========================================================= */

.gizmoo-section-heading .gizmoo-section-eyebrow {

    display: inline-flex;

    align-items: center;

    margin: 0 0 14px;

    color: var(--gizmoo-primary);

    font-size: var(--gizmoo-font-size-xs);

    font-weight: 700;

    line-height: 1.5;

    letter-spacing: .10em;

    text-transform: uppercase;

}


/* Small decorative line */

.gizmoo-section-heading .gizmoo-section-eyebrow::before {

    content: "";

    width: 22px;

    height: 2px;

    margin-left: 8px;

    border-radius: var(--gizmoo-radius-pill);

    background: var(--gizmoo-primary);

}


/* =========================================================
   TITLE
   ========================================================= */

.gizmoo-section-title,
.gizmoo-section-heading h2 {

    max-width: 720px;

    margin: 0;

    color: var(--gizmoo-text);

    font-size:
        clamp(30px, 4vw, 44px);

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -.03em;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.gizmoo-section-description,
.gizmoo-section-heading > p:not(.gizmoo-section-eyebrow) {

    max-width: 620px;

    margin: 16px 0 0;

    color: var(--gizmoo-text-muted);

    font-size: var(--gizmoo-font-size-base);

    line-height: 1.85;

}


/* =========================================================
   CENTER
   ========================================================= */

.gizmoo-section-heading-center {

    margin-inline: auto;

    text-align: center;

}


.gizmoo-section-heading-center
.gizmoo-section-title,

.gizmoo-section-heading-center h2,

.gizmoo-section-heading-center
.gizmoo-section-description,

.gizmoo-section-heading-center
> p:not(.gizmoo-section-eyebrow) {

    margin-inline: auto;

}


.gizmoo-section-heading-center
.gizmoo-section-eyebrow {

    justify-content: center;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .gizmoo-section-heading {

        margin-bottom: var(--gizmoo-space-6);

    }


    .gizmoo-section-title,
    .gizmoo-section-heading h2 {

        font-size: 30px;

    }


    .gizmoo-section-description,
    .gizmoo-section-heading
    > p:not(.gizmoo-section-eyebrow) {

        font-size: 15px;

    }

}


@media (max-width: 480px) {

    .gizmoo-section-title,
    .gizmoo-section-heading h2 {

        font-size: 27px;

    }

}