/* =====================
   m_about — «About»
   Desktop: Figma 1:386 (1142×928) — full viewport, justify-between via
            margin-top:auto: photo 1142×295 top, «About» 52/1.1 + 4 paragraphs
            (16/1.3, mb 6) in a 808 column at the bottom.
   Mobile:  Figma 1:664 (353×534) — flow gap 16, ORDER FLIPS:
            title → photo 180h → text (open Figma annotation for Polina).
===================== */

.m_about {
  min-height: calc(100svh - 40px); /* page_main pad-block 20×2 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: 16px;
}

/* portrait photo, right-aligned (Figma 2084:2329 — 467×571) */
.m_about_media {
  width: 467px;
  max-width: 100%;
  height: 571px;
  align-self: flex-end;
}
.m_about_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* pushes the title+text cluster to the section bottom (Figma justify-between) */
.m_about_title {
  margin-top: auto;
  font-size: var(--font-size--h1);
  line-height: var(--line-height--tight);
}

.m_about_text {
  width: 808px;
  max-width: 100%;
}
.m_about_text p {
  font-size: var(--font-size--body);
  line-height: var(--line-height--body);
  margin-bottom: 6px;
}
.m_about_text p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .m_about {
    min-height: 0;
    padding-block: 0;
  }

  /* mobile order: title first, photo second, text third */
  .m_about_title {
    order: -1;
    margin-top: 0;
    font-size: var(--font-size--h1-mob);
  }

  .m_about_media {
    width: 100%;
    height: 320px; /* portrait crop, scaled for the narrow column */
    align-self: stretch;
  }

  /* the desktop-only manual break in paragraph one flows naturally on mobile */
  .m_about_text br { display: none; }
}