/*
  Responsive styles — friend-portfolio
  Breakpoints measured from the reference: desktop >=1200,
  tablet 810-1199, mobile <=809.
*/

.nav__menu { display: none; }

@media (max-width: 1199.98px) {
  :root {
    --text-heading: 34px;
    --lh-heading: 0.9;
  }

  .to-top svg { display: none; }
}

@media (max-width: 809.98px) {
  :root {
    --gutter: 16px;
    --media-h: 380px;
    --text-heading: 26px;
  }

  .nav { padding: var(--nav-pad-y) var(--gutter-nav-mobile); }
  .clock,
  .nav__center,
  .nav__contact { display: none; }
  .nav__menu { display: flex; }

  .row,
  .info,
  .cards {
    flex-direction: column;
  }

  .row { align-items: center; }
  .info > *,
  .row > *,
  .cards > * { flex: none; width: 100%; }
  .info { align-items: flex-start; }

  .block--half { width: 100%; }
  .media--tall { height: var(--media-h-tall); }

  .footer { padding: var(--footer-pad) 16px var(--footer-pad) 17px; }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gap-l);
    height: auto;
  }

  .footer__brand {
    gap: var(--gap-brand-mobile);
    align-self: auto;
  }

  .footer__links {
    gap: var(--gap-links-mobile);
    align-self: auto;
  }

}