.inclua-site-footer {
  background: #f1f3f7;
  border-top: 1px solid #f1f3f7;
  color: #31302e;

  & .inclua-site-footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: clamp(var(--spacing-6), 3.2vw, var(--spacing-16));
    row-gap: var(--spacing-8);
    padding-top: var(--spacing-18);
    padding-bottom: var(--spacing-16);
    width: 100%;

    @media (max-width: 75rem) {
      justify-content: flex-start;
      column-gap: var(--spacing-10);
    }

    @media (max-width: 51.25rem) {
      justify-content: flex-start;
      column-gap: var(--spacing-6);
      padding-top: var(--spacing-16);
      padding-bottom: var(--spacing-14);
    }

    @media (max-width: 32.5rem) {
      gap: var(--spacing-8);
    }
  }

  & .inclua-site-footer__column {
    flex: 0 1 auto;

    @media (max-width: 51.25rem) {
      flex: 1 1 calc(50% - var(--spacing-6));
    }

    @media (max-width: 32.5rem) {
      flex-basis: 100%;
    }
  }

  & .inclua-site-footer__column-title {
    margin: 0 0 var(--spacing-8);
    color: #31302e;
    font-size: var(--font-size-heading-5);
    font-weight: 600;
    line-height: var(--line-height-heading-5);
    letter-spacing: 0;
  }

  & .inclua-site-footer__list {
    display: grid;
    gap: var(--spacing-6);
    margin: 0;
    padding: 0;
    list-style: none;

    & a {
      color: #444;
      font-size: var(--font-size-body);
      font-weight: 400;
      line-height: var(--line-height-body);
      letter-spacing: 0;
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.2s ease, background-size 0.3s ease;
      background-image: linear-gradient(#fbcb49, #fbcb49);
      background-size: 0% 2px;
      background-repeat: no-repeat;
      background-position: left bottom;

      &:hover {
        color: #0b0b0b;
        background-size: 100% 2px;
      }
    }
  }

  & .inclua-site-footer__social-list {
    display: grid;
    gap: var(--spacing-4);
  }

  & .inclua-site-footer__social-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: #444;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;

    &:hover {
      color: #0b0b0b;
    }
  }

  & .inclua-site-footer__social-icon {
    width: var(--spacing-8);
    height: var(--spacing-8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: #444;
    color: #fff;
    transition: background-color 0.2s ease;

    &:hover {
      background: #0b0b0b;
    }

    & .inclua-icon {
      font-size: var(--font-size-caption);
      line-height: 1;
    }
  }

  & .inclua-site-footer__social-label {
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: var(--line-height-body);
    letter-spacing: 0;
  }

  & .inclua-site-footer__bottom {
    border-top: 1px solid #e1e4ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
    padding-block: var(--spacing-6);

    @media (max-width: 51.25rem) {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  & .inclua-site-footer__logo {
    width: 11.75rem;
    max-width: 100%;
    height: auto;
    display: block;
  }

  & .inclua-site-footer__copy {
    margin: 0;
    color: #31302e;
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: var(--line-height-body);
    letter-spacing: 0;
    white-space: nowrap;

    @media (max-width: 51.25rem) {
      white-space: normal;
    }

    & a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease, background-size 0.3s ease;
      background-image: linear-gradient(#fbcb49, #fbcb49);
      background-size: 0% 2px;
      background-repeat: no-repeat;
      background-position: left bottom;

      &:hover {
        color: #0b0b0b;
        background-size: 100% 2px;
      }
    }
  }
}