/* =====================================================================
   10. FOOTER — логотип, слоган, видео, подписка, две колонки ссылок, низ
   Колонки ссылок: заголовок и ссылки отсчитываются от угла колонки.
   ===================================================================== */

.footer { height: 645px; }
.footer .wrap > * { position: absolute; }

.footer__logo    { left: 60px; top: 72px; width: 220px; }
.footer__tagline { left: 60px; top: 167px; width: 384px; font: 500 24px/24px var(--head); }
.footer__video   { left: 718px; top: 43.5px; width: 662px; height: 227px; object-fit: cover; border: 1px solid var(--line); border-radius: 20px; }
.footer__line    { left: 60px; top: 313px; width: 1320px; height: 1px; background: var(--line); }

.footer__subscribe { left: 60px; top: 365px; width: 384px; font: 600 18px/18px var(--head); }
.footer__form      { left: 17px; top: 356px; width: 368.1px; height: 143px; border: 0; background: transparent; }
.footer__social    { top: 522px; width: 30px; }
.footer__social--linkedin  { left: 60px; }
.footer__social--instagram { left: 128px; }

/* колонки «Explore» и «Contact us» */
.footer__col { top: 356px; width: 203px; height: 184px; }
.footer__col--explore { left: 664px; }
.footer__col--contact { left: 939px; }
.footer__col > * { position: absolute; left: 43px; }
.footer__col::before {      /* стрелка у заголовка */
  content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  background: url(../../img/icon-arrow-bullet.png) center / contain no-repeat;
}
.footer__col h3 { top: 14px; font: 600 18px/0 var(--head); }
.footer__col ul { top: 41px; width: 160px; font-size: 12px; line-height: 16px; }
.footer__col li { height: 29px; }
.footer__col li:nth-child(3) { height: 28px; }
.footer__col li:nth-child(4) { height: 26px; }
.footer__col a:hover { text-decoration: underline; }

.footer__copy  { left: 60px; top: 603px; font-size: 10px; line-height: 0; }
.footer__top   { left: 712px; top: 586px; width: 17px; }
.footer__built { left: 1077px; top: 603px; width: 303px; font-size: 10px; line-height: 0; text-align: right; }

/* desktop 1250–1439 */
@media (max-width: 1439px) {
  .footer { height: 633px; }
  .footer__logo    { left: 59.5px; top: 60px; }
  .footer__tagline { left: 59.5px; top: 155px; }
  .footer__video   { left: 527.5px; top: 31px; }
  .footer__line    { left: 53.5px; top: 301px; width: 1130px; }
  .footer__subscribe { left: 59.5px; top: 353px; }
  .footer__form    { left: 17.5px; top: 344px; width: 321px; height: 172px; }
  .footer__social  { top: 521px; }
  .footer__social--linkedin  { left: 59.5px; }
  .footer__social--instagram { left: 127.5px; }
  .footer__col { top: 344px; }
  .footer__col--explore { left: 569.5px; }
  .footer__col--contact { left: 748.5px; }
  .footer__copy  { left: 59.5px; top: 591px; }
  .footer__top   { left: 616.5px; top: 574px; }
  .footer__built { left: 886.5px; top: 591px; }
}

/* tablet 740–1249 */
@media (max-width: 1249px) {
  .footer { height: 730px; }
  .footer__logo    { left: 50.5px; top: 24px; }
  .footer__tagline { left: 50.5px; top: 116px; width: 640px; }
  .footer__video   { left: 50.5px; top: 186px; width: 640px; }
  .footer__line    { left: 50.5px; top: 433px; width: 640px; }
  .footer__subscribe { left: 49.5px; top: 462px; width: 240px; }
  .footer__form    { left: 10.5px; top: 466px; width: 345px; height: 137px; }
  .footer__social  { top: 627px; }
  .footer__social--linkedin  { left: 49.5px; }
  .footer__social--instagram { left: 112.5px; }
  .footer__col { top: 458px; width: 139px; }
  .footer__col--explore { left: 344.8px; }
  .footer__col--contact { left: 517.8px; }
  .footer__col > * { left: 41px; }
  .footer__col ul { width: 98px; }
  .footer__col--contact li:first-child { margin-left: 2px; }
  .footer__copy  { left: 49.5px; top: 684px; }
  .footer__top   { left: 361.5px; top: 667px; }
  .footer__built { left: 474.5px; top: 681px; width: 216px; line-height: 12px; }
}

/* mobile <740 */
@media (max-width: 739px) {
  .footer { height: 695px; }
  .footer__logo    { left: .5px; top: 22px; width: 145px; }
  .footer__tagline { left: 2.5px; top: 94px; width: 293px; font-size: 18px; line-height: 18px; }
  .footer__video   { left: .5px; top: 156px; width: 320px; height: 139px; }
  .footer__line    { left: .5px; top: 310px; width: 320px; }
  .footer__line--2 { top: 517px; }
  .footer__subscribe { left: -.5px; top: 328px; width: 320px; font-size: 14px; line-height: 14px; }
  .footer__form    { left: -44.5px; top: 318px; width: 340px; height: 76px; }
  .footer__social--linkedin  { left: 6.5px; top: 473px; }
  .footer__social--instagram { left: 57.5px; top: 472px; }
  .footer__col { top: 526px; width: 93px; height: 120px; }
  .footer__col--explore { left: .5px; }
  .footer__col--contact { left: 113.5px; top: 525px; }
  .footer__col::before { display: none; }
  .footer__col > * { left: 0; }
  .footer__col h3 { font-size: 14px; }
  .footer__col ul { top: 26px; width: 93px; font-size: 10px; }
  .footer__col li { height: 19px; }
  .footer__col li:nth-child(n+3) { height: 18px; }
  .footer__col--contact li:first-child { margin-left: 0; }
  .footer__copy  { left: .5px; top: 668px; font-size: 8px; }
  .footer__top   { left: 151.5px; top: 654px; }
  .footer__built { left: 196.5px; top: 658px; width: 124px; font-size: 8px; line-height: 9.6px; }
}