.footer {
  background-color: rgb(10, 10, 10);

  padding: 1rem 0;

  border-top: 1px solid rgb(42 42 42 / 0.5);
}

.footer-container {
  max-width: 1280px;
  margin-inline: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  gap: 1rem;
  margin-bottom: 2rem;
}

.footer-logo-area {
  @media (min-width: 1024px) {
    grid-column: span 2 / span 2;
  }
}

.footer-logo {
  height: 40px;
  width: auto;

  object-fit: contain;

  opacity: 70%;

  margin-bottom: 1rem;
}

.footer-logo-description {
  font-size: 0.75rem;
}

.footer-logo:hover {
  opacity: 90%;
}