/*
 * RESUME
 */

#main.resume {
  display: grid;
  grid-template-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  max-width: 70rem;
  row-gap: 3rem;
  @media (min-width: 768px) {
    column-gap: 4rem;
    grid-template-columns: 1fr 1fr;
  }
  header {
    display: flex;
    justify-content: center;
    margin: 0px;
    padding-bottom: 3rem;
    padding-top: 4rem;
    @media (min-width: 768px) {
      grid-column: 1 / 3;
    }
  }
  section {
    h2, h3, p, dl, dt, dd, ul {
      margin-top: 0px;
    }
    h2 {
      font-size: 3rem;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      position: relative;
      text-transform: uppercase;
      &::before {
        background-image: repeating-linear-gradient(45deg, var(--color-fg-pattern) 0px, var(--color-fg-pattern) 1px, transparent 0px, transparent 50%);
        background-repeat: repeat;
        background-size: 8px 8px;
        bottom: 0px;
        content: "";
        height: 8px;
        left: 0;
        position: absolute;
        width: 100%;
      }
    }
    h3 {
      font-size: 1.5rem;
      font-weight: 500;
    }
    dt {
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.125;
      margin-bottom: 0.25em;
    }
    dd {
      margin-bottom: 2rem;
      margin-left: 0px;
    }
    &#experience {
      @media (min-width: 768px) {
        grid-column: 1 / 3;
      }
      ul {
        margin-top: 1rem;
        @media (min-width: 768px) {
          column-count: 2;
          column-gap: 4rem !important;
        }
        li {
          break-inside: avoid;
          margin-top: 0px !important;
          padding-bottom: 1rem;
        }
      }
    }
    &#previous {
      @media (min-width: 768px) {
        grid-column: 1 / 2;
        grid-row: span 3;
      }
    }
    &#education {
      @media (min-width: 768px) {
        grid-column: 2 / 3;
      }
    }
    &#skills {
      @media (min-width: 768px) {
        grid-column: 2 / 3;
      }
    }
  }
}