.ftr.v4 {
  --flx-gap: 17.556rem;
  /* -- Background image overlay ------------ */

  .bg img {
    mix-blend-mode: luminosity;
  }

  /* -- Navigation --------------------------- */

  .ftr-v4-nav {
    padding-block: 1.25rem;

    ul {
      flex-wrap: wrap;
      row-gap: 0.75rem;
    }
  }


  /* -- Contact cards ----------------------- */


  .ctc-icn {
    flex-shrink: 0;
    color: var(--text-color);

    svg {
      font-size: 2.5rem;
    }
  }

  /* -- Social icons ------------------------ */

  .so-lk {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(from var(--bdr-clr) h s l / var(--bdr-clr-o));

    svg {
      font-size: 1.1rem;
    }
  }

  .so-lk:hover svg {
    color: #1a3a32;
  }

  .py-lk {
    font-size: 1.7rem;
  }

  .fourth {
    width: calc(var(--fourth) - (var(--flx-gap) / 2 ));
  }

  .fnt_t-co {
    text-wrap: initial;
  }

  /* -- Entrance animations ------------------ */

  &.mstg-anm {
    @media (prefers-reduced-motion: no-preference) {
      .two-thirds > div > a   { animation: ftr-v2-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s    both; }
      .two-thirds > div > strong { animation: ftr-v2-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s  both; }
      .two-thirds > div > span   { animation: ftr-v2-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s  both; }
      .two-thirds > div > ul     { animation: ftr-v2-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s  both; }
      .third .ctc-crd:nth-child(1) { animation: ftr-v2-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s  both; }
      .third .ctc-crd:nth-child(2) { animation: ftr-v2-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
      .third .ctc-crd:nth-child(3) { animation: ftr-v2-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s  both; }
    }
  }
  &[data-colors="primary-dark"]{
    .ctc-crd.bg-bx.lk-bg{
      background: rgba(255, 255, 255, 0.1);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ftr-v2-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
