.resources {
  padding: 0;

  .links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 1rem 1rem 4rem 1rem;

    ul {
      list-style-type: none;
      white-space:nowrap;
      padding: 0;
      margin: 1rem .3rem;

      h3 {
        color: var(--f-color);
        font-size: 1.05rem;
        font-weight: 600;
        padding: 0;
        margin: .2rem 0 1rem 0;
      }

      li {
        margin: .5rem 0;

        &:first-of-type { margin: 0 }

        a {
          position: relative;
          color: var(--l-color);
          font-size: 1.15rem;
    
          &:after {
            content: '';
            position: absolute;
            width: 100%;
            bottom: -1px;
            left: 0;
            right: 0;
            border-bottom: 1px dotted var(--l-color);
          }
        }
      }
    }
  }
}

@media only screen and (--viewport-4) {
  .resources {
    padding: 0;

    .links {
      grid-template-columns: repeat(2, 1fr);
      padding: 1rem 2.25rem 2rem 2.25rem;
    }
  }
}