/* =========================================
   RED ECHO – ABOUT US
   RESPONSIVE / MOBILE FIRST

   Navigation, Titel und Logo
   kommen aus style.css.
========================================= */


/* =========================================
   1. VARIABLEN
========================================= */

.about {
    --fs-name: calc(clamp(2.2rem, 1.9rem + 2.2vw, 4rem) * var(--scale));
}


/* =========================================
   2. HAUPTLAYOUT – MOBILE FIRST
========================================= */

.about__layout {
    display: flex;
    flex-direction: column;
}

.about__heading {
    width: 100%;
}


/* =========================================
   3. TEXTBEREICHE
========================================= */

.about__section {
    width: 100%;
}

.about__section p {
    margin: 0 0 1.4rem;

    color: var(--color-white);

    font-size: var(--fs-body);
    font-weight: 400;

    line-height: 1.4;
}


/* =========================================
   4. MUSIKERINNEN – MOBILE
========================================= */

.about__visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 3.5rem 0 3rem;
}

.about__people-wrap {
    position: relative;

    width: min(78%, 28rem);

    margin: 0 auto;
}

.about__people {
    position: relative;

    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;
    object-position: center bottom;

    mix-blend-mode: luminosity;
}


/* =========================================
   5. NAMEN

   Die Position ist in em angegeben.
   So bleiben die Namen bei jeder
   Schriftgrösse gleich weit über dem Bild.
========================================= */

.about__name {
    position: absolute;
    z-index: 5;

    color: var(--color-white);

    font-family: "Caveat", cursive;

    font-size: var(--fs-name);
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;
}

.about__name--celly {
    top: -0.72em;
    left: 5%;
}

.about__name--mj {
    top: -1.05em;
    right: 8%;
}


/* =========================================
   TABLET / IPAD
   700px – 1099px

   Text links, Musikerinnen rechts.
========================================= */

@media (min-width: 700px) {

    .about__layout {
        display: grid;

        grid-template-columns:
            minmax(0, 53fr)
            minmax(0, 47fr);

        grid-template-areas:
            "heading heading"
            "who visual"
            "what visual";

        align-items: start;
    }

    .about__heading {
        grid-area: heading;
    }

    .about__section--who {
        grid-area: who;

        padding-right: 2rem;
    }

    .about__section--what {
        grid-area: what;

        margin-top: calc(3.5rem * var(--scale));

        padding-right: 2rem;
    }

    .about__visual {
        grid-area: visual;

        align-self: start;

        align-items: flex-start;

        margin: 0.8rem 0 0;

        padding-left: 1rem;
    }

    .about__people-wrap {
        width: 100%;
        max-width: 31rem;
    }
}


/* =========================================
   DESKTOP
   ab 1100px

   Das Bild reicht neben dem Titel
   bis nach oben.
========================================= */

@media (min-width: 1100px) {

    .about__layout {
        grid-template-columns:
            minmax(0, 45fr)
            minmax(0, 55fr);

        grid-template-areas:
            "heading visual"
            "who visual"
            "what visual";
    }

    .about__heading {
        margin-bottom: calc(1.7rem * var(--scale));
    }

    .about__section--who,
    .about__section--what {
        max-width: calc(var(--fs-body) * 28);

        padding-right: 1rem;
    }

    .about__section--what {
        margin-top: calc(3rem * var(--scale));
    }

    .about__visual {
        align-self: center;

        align-items: center;

        margin: calc(5rem * var(--scale)) 0 0;

        padding:
            0
            1rem
            0
            2rem;
    }

    .about__people-wrap {
        width: min(90%, 48rem);
        max-width: none;
    }

    .about__name--mj {
        right: 11%;
    }
}


/* =========================================
   DESKTOP MIT GERINGER HÖHE
========================================= */

@media (min-width: 1100px) and (max-height: 700px) {

    .about__people-wrap {
        max-width: 35rem;
    }
}