@import url(./common.css);

header {
  padding-bottom: 20vh;
  padding-top: 20vh;
}

main > #snippets {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: repeat(5, auto);
  column-gap: 1rem;
  row-gap: 2rem;
  width: 50%;
  min-width: 800px;
  height: auto;
  position: relative;
}

#examples {
  grid-column: span 2;
  text-align: center;
  margin: 0;
  padding: 0;
}

main > #snippets > div:nth-of-type(2n+1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding-right: 1rem;
  border-right: 1px solid var(--border);
}

@media (max-width: calc(800px + 2rem)) {
  main > #snippets {
    grid-template-columns: auto;
    grid-template-rows: repeat(9, auto);
    min-width: 300px;
  }

  main > #snippets > * {
    grid-column: 1;
    width: 100%;
    max-width: 350px;
    margin-left: 0;
  }

  main > #snippets > h1 {
    text-align: center;
    justify-self: center;
  }

  main > #snippets > div:nth-of-type(2n) {
    justify-self: center;
    width: 100%;
  }

  main > #snippets > div:nth-of-type(2n+1) {
    justify-self: center;
    border-right: none;
    text-align: center;
    align-items: center;
    padding-right: 0;
    width: 100%;
  }

  main > #snippets > div:nth-last-of-type(2n+1):not(:last-of-type) {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.5rem;
    margin-bottom: -0.5rem;
  }

  main > #snippets {
    min-width: 400px;
    width: 90%;
  }

  html {
    min-width: 300px;
  }
}