.skip-nav-links {

  position: absolute;
  transform: translateY(-120%);
  padding: .5rem 1.5rem;
  border-radius: 0 0 .25rem .25rem;
  left: 0.5rem;
  transition: transform 325ms ease-in;
  background-color: var(--color-contrast);
  color: white;
}

.skip-nav-links:focus {

  transform: translateY(0);
  outline: 2px solid var(--color-primary-accent);
  outline-offset: 2px;
  text-decoration: none;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  /* gap: 20px 0px; */
}

.wrapper > * {
  grid-column: col-start / span 12;
}


/* .header { */
  /* background-color: var(--color-white); */
  /* padding: var(--size-600); */
  /* padding: var(--size-600) 0 var(--size-600) var(--size-600); */
/* } */

.sidebar {
  padding-right: var(--size-300);
}

.main {

  grid-column: col-start 1 / span ;
  background-color: var(--color-white);
  padding: 0px;

}

.footer {
  background-color: var(--color-contrast);
  padding: var(--size-600);
}


@media (min-width: 50em) {

  .header {
    /* display: flex; */
    /* justify-content: space-between; */
    background-color: var(--color-white);
    color: var(--color-black-lighest);
    /* padding: var(--size-200) 0 var(--size-200) var(--size-500); */

  }

  .sidebar {
    grid-column: col-start / span 3;
    grid-row: 2;
  }

  .main {
    grid-column: col-start 4 / span 9;
    background-color: var(--color-white);
    /* padding: 0 var(--size-600) var(--size-600) var(--size-400); */
  }

  .footer {
    grid-column: col-start 1 / span 12;
    margin-bottom: 40px;
  }



}