/* ========================== page Hero ========================== */

.page-hero {
    height: 300px;
    padding: 80px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    background: var(--pink-500);
}

.page-hero__container {
    width: 100%;
    max-width: 1280px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 80px;
}

.page-hero__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-hero__title {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-family-primary);
    font-size: var(--text-h1);
    font-weight: var(--font-bold);
    line-height: var(--leading-h1);
    font-style: italic;
}

.page-hero__subtitle {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-family-primary);
    font-size: var(--text-h2);
    font-weight: var(--font-bold);
    line-height: var(--leading-h2);
}

.page-hero__description {
    width: 500px;
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-family-primary);
    font-size: var(--text-body-lg);
    font-weight: var(--font-regular);
    line-height: var(--leading-body-lg);
}


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

/* ========================== Laptop (≤1200px) ========================== */

@media (max-width: 1200px) {

    .page-hero {
        height: 400px;
        padding-inline: 32px;
    }

    .page-hero__container {
        gap: 64px;
    }

    .page-hero__description {
        width: 420px;
    }

}


/* ========================== Tablet (≤992px) ========================== */

@media (max-width: 992px) {

    .page-hero {
        height: 400px;
        padding-inline: 24px;
    }

    .page-hero__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .page-hero__description {
        width: 100%;
        max-width: 700px;
    }

}


/* ========================== Mobile (≤768px) ========================== */

@media (max-width: 768px) {

    .page-hero {
        height: 450px;
        padding-inline: 20px;
    }

    .page-hero__container {
        align-items: center;
        text-align: center;
        gap: 32px;
    }

    .page-hero__heading {
        align-items: center;
    }

    .page-hero__description {
        width: 100%;
        max-width: 100%;
    }

}