/*==================== FOOTER ====================*/
.footer {
  padding-top: 2rem;
}

.footer__container {
  row-gap: 3.5rem;
}

.footer__bg {
  background-color: rgb(20, 47, 44);/*var(--first-color-second)*/
  padding: 2rem 0 3rem;
}

.footer__title {
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb-0-25);
}

.footer__subtitle {
  font-size: var(--small-font-size);
}

.footer__links {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}

.footer__link:hover {
  color: var(--first-color-lighter);
}

.footer__social {
  font-size: 1.25rem;
  margin-right: var(--mb-1-5);
}

.footer__social:hover {
  color: var(--first-color-lighter);
}

.lin:hover {
  color: rgb(0, 125, 241);/*#bde*/
}

.git:hover {
  color: #191919;/*#000000*/
}

.ins:hover {
  color: #f0c;
}

.footer__copy {
  font-size: var(--smaller-font-size);
  text-align: center;
  color: var(--text-color-light);
  margin-top: var(--mb-3);
}

.footer__title,
.footer__subtitle,
.footer__link,
.footer__social {
  color: #fff;
}

.lin {
  color: #16c;
}

.git {
  color: #000000;/*#111 #222*/
}

.ins {
  color: #f09;/*#f04*/
}

@media screen and (min-width: 767px) {
    .footer__container {
      padding: 0 1rem;
      grid-template-columns: repeat(3, 1fr);
    }
    .footer__bg {
      padding: 3rem 0 3.5rem;
    }

    .footer__links {
      flex-direction: row;
      column-gap: 2rem;
    }
    .footer__socials {
      justify-self: flex-end;
    }
    .footer__copy {
      margin-top: 4.5rem;
    }

}

@media screen and (min-width: 1024px) {
  .footer__container {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .footer__bg {
    padding: 2rem 0 5rem;
  }
}