@import "../mixins/utils/border-box.css";
@import "../mixins/utils/center-items.css";
@import "../mixins/grid/column.css";
@import "../mixins/text/h1.css";
@import "../mixins/grid/row.css";
@import "../components/links.css";

.links {
  text-align: center;
  @mixin row;
  flex-wrap: wrap;
}

.links__title {
  @mixin h1;
}

.links__container {
  @mixin column 4;
  @mixin center-items;
  @mixin border-box;
  padding: 2rem;

  transition: all .1s ease-in-out .2s;

  .menu-active & {
    @mixin column 12;
  }
}