.contact-details {
  ul {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    list-style-type: none;
    li {
      margin-bottom: 0.5rem;
      a {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: $text-light;
        transition: all 0.2s ease-in-out;
        border-bottom: 2px solid transparent;
        padding-bottom: 5px;
        span {
          margin-top: 2px;
        }
        svg {
          margin-right: 0.5rem;
          width: 24px;
          height: 24px;
        }

        &:hover {
          border-bottom: 2px solid $text-light;
        }
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .contact-details {
    ul {
      margin-top: 1rem;
      li {
        a {
          align-items: center;
        }
      }
    }
  }
}
