/* Where the Figma design differs from the original WordPress theme. The section styles load later in <body>, so rules
   that override them carry the section class too. */
/* «Для кого»: the heading is one line on desktop, a little wider than the content column. */
@media (min-width: 1025px) {
  .whom__title { margin-left: -3rem; margin-right: -3rem; }
}
/* Footer: the same menu as the header, between the logo and the socials (desktop), a list under the logo (phone). */
.footer__menu { display: flex; gap: 2rem; margin: 0 auto; padding: 0; list-style: none; }
.footer__menu a { font-size: max(0.875rem, 12px); font-weight: 300; text-transform: uppercase; color: #fff; }
@media (max-width: 768px) {
  .footer__container { flex-wrap: wrap; }
  .footer__container { margin-bottom: 24px; }
  .footer__menu { order: 3; width: 100%; flex-direction: column; gap: 14px; margin: 40px 0 0; }
}
/* First screen: the globe with its cards is smaller in the design and sits fully inside the content column. */
@media (min-width: 1025px) {
  .promo__img { translate: -55px 30px; scale: .82; transform-origin: 0 0; } /* separate properties: the appear animation owns transform */
}
/* First screen on a phone: the design's description is 16px with more air before the button. */
@media (max-width: 768px) {
  .promo .promo__text { font-size: 16px; line-height: 1.5; margin-top: 20px; }
  .promo .promo__button { margin-top: 40px; }
}