.footer__main {
  @apply grid;
  grid-template-areas: "brand"
                       "social"
                       "main-links"
}

.footer__brand {
  grid-area: brand;
}

.footer__social {
  grid-area: social;
}

.footer__main-links {
  grid-area: main-links;
}

@screen lg {
  .footer__main {
    @apply gap-4;

    grid-template-areas: "brand main-links social";
    grid-template-columns: 25% 1fr 25%;
  }
}


.footer-contacts {
  @apply gap-4 grid-cols-1;

  @screen lg {
    @apply grid-cols-3;
  }

  @screen xl {
    grid-template-columns: 1fr 1fr 1fr auto;
  }
}