@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

.homeMoreResource {
  color: $black;
  padding: $hl-3 0;

  [data-role="list-content"] {
    margin-top: -3.75rem;
  }

  [data-role="list-loop"] {
    margin-top: 3.75rem;
  }

  a {
    display: inline-block;
  }

  .iconLink {
    line-height: 0;
  }

  .icon {
    text-align: center;
    margin: 0 auto;
    $size: 64px;
    width: $size;
    height: $size;
  }

  h3 {
    margin: $hl-9 0 $hl-10 0;
  }

  p {
    opacity: 0.6;
  }
}

@media screen and (max-width: $wide) {
  .homeMoreResource [data-role="list-content"] [data-role="list-loop"] {
    min-width: 25%;
    max-width: 25%;
  }
}

@media screen and (max-width: 767px) {
  .homeMoreResource [data-role="list-content"] [data-role="list-loop"] {
    min-width: 50%;
    max-width: 50%;
  }
}