.footer {
  --padding: 30px;
  --logoWidth: 160px;
  color: rgb(var(--color-light));
  background: rgb(var(--color-dark));
  padding: var(--padding);
}
.footer a {
  color: rgb(var(--color-light));
}

.footer__row {
  padding: 40px 0;
}
.footer__row:not(:last-of-type) {
  border-bottom: 1px solid #EBE5D9;
}

.footer__col + .footer__col {
  margin-top: 20px;
}

.footer__logo {
  width: var(--logoWidth);
}
.footer__logo img {
  display: block;
  width: 100%;
}

.footer__menu ul {
  column-count: 2;
  column-gap: 10px;
}
.footer__menu li + li {
  margin-top: 10px;
}
.footer__menu a {
  color: rgb(var(--color-light));
}

.footer__menu-alt {
  font-size: 80%;
}
.footer__menu-alt ul {
  display: -ms-flexbox;
  display: flex;
}
.footer__menu-alt span {
  margin: 0 10px;
}
.footer__menu-alt a {
  color: rgb(var(--color-light));
}
.footer__menu-alt li:last-of-type span {
  display: none;
}

.footer__menu a,
.footer__menu-alt a {
  transition: 250ms opacity ease;
}
@media (pointer: fine) {
  .footer__menu:hover a,
  .footer__menu-alt:hover a {
    opacity: 0.5;
  }
}
@media (pointer: fine) and (pointer: fine) {
  .footer__menu:hover a:hover,
  .footer__menu-alt:hover a:hover {
    opacity: 1;
  }
}

.footer__social a {
  border: 2px solid rgb(var(--color-primary));
  border-radius: 50px;
  color: rgb(var(--color-light));
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
  transition: 250ms opacity ease;
}
@media (pointer: fine) {
  .footer__social:hover a {
    opacity: 0.5;
  }
}
@media (pointer: fine) and (pointer: fine) {
  .footer__social:hover a:hover {
    opacity: 1;
  }
}

@media (min-width: 992px) {
  .footer {
    --logoWidth: 295px;
    --padding: 30px 100px;
  }
  .footer__row {
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .footer__col--full {
    width: 100%;
  }
  .footer__col + .footer__col {
    margin-top: 0;
  }
  .footer__menu ul {
    column-count: unset;
    display: -ms-flexbox;
    display: flex;
    gap: 25px;
  }
  .footer__menu li + li {
    margin-top: 0;
  }
}