/* =========================================================
   ABOUT PAGE RESPONSIVE
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .about-page-container {
        width: min(100% - 32px, 700px);
    }


    /* Hero */

    .about-page-hero {
        padding: 60px 0 45px;
    }

    .about-page-hero h1 {
        font-size: 42px;
    }

    .about-page-stats {
        gap: 35px;
    }


    /* Story */

    .about-page-story {
        padding: 55px 0;
    }

    .about-page-story-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .about-page-story-content {
        text-align: left;
    }

    .about-page-story-image-wrapper img {
        height: 350px;
    }


    /* Values */

    .about-page-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Team */

    .about-page-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .about-page-container {
        width: calc(100% - 28px);
    }


    /* Hero */

    .about-page-hero {
        padding: 45px 0 35px;
    }

    .about-page-hero h1 {
        margin-top: 12px;

        font-size: 34px;
    }

    .about-page-hero-description {
        max-width: 430px;

        font-size: 11px;
        line-height: 1.55;
    }


    /* Stats */

    .about-page-stats {
        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 20px 10px;

        margin-top: 25px;
    }

    .about-page-stat strong {
        font-size: 22px;
    }

    .about-page-stat span {
        font-size: 7px;
    }


    /* Story */

    .about-page-story {
        padding: 45px 0;
    }

    .about-page-story-grid {
        gap: 30px;
    }

    .about-page-story-content h2 {
        font-size: 25px;
    }

    .about-page-story-content p {
        font-size: 10px;
        line-height: 1.65;
    }

    .about-page-story-image-wrapper img {
        height: 240px;
    }

    .about-page-growth-card {
        right: 5px;
        bottom: 8px;

        padding: 7px 9px;
    }


    /* Values */

    .about-page-values {
        padding: 45px 0;
    }

    .about-page-centered-heading {
        margin-bottom: 22px;
    }

    .about-page-centered-heading h2 {
        font-size: 24px;
    }

    .about-page-values-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .about-page-value-card {
        min-height: auto;

        padding: 15px;
    }


    /* Team */

    .about-page-team {
        padding: 45px 0 55px;
    }

    .about-page-team-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }

    .about-page-team-card {
        padding: 12px 8px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .about-page-hero h1 {
        font-size: 30px;
    }

    .about-page-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-page-team-grid {
        grid-template-columns: 1fr;
    }

}