.language-options {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-template-areas:
  "afrikaans albanian catalan"
  "croatian czech danish"
  "dutch english estonian"
  "finnish french german"
  "hungarian icelandic italian"
  "latvian lithuanian maltese"
  "norwegian polish portuguese"
  "romanian slovak slovenian"
  "spanish swedish turkish"
  "vietnamese . .";

  @include breakpoint(large_up) {
    grid-column-gap: 5px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-template-areas:
    "afrikaans english italian romanian"
    "albanian estonian latvian slovak"
    "catalan finnish lithuanian slovenian"
    "croatian french maltese spanish"
    "czech german norwegian swedish"
    "danish hungarian polish turkish"
    "dutch icelandic portuguese vietnamese";
  }
}

.language-options__option {
  background-color: transparent;
  border-radius: $space--large;
  border: $border;
  font-size: .7rem;
  padding: $space--small;
  text-transform: uppercase;
  width: 85px;

  @include breakpoint(medium_up) {
    font-size: .8rem;
    width: 100px;
  }

  @include breakpoint(large_up) {
    font-size: .9rem;
    width: 120px;
  }

  &:nth-child(1) {
    grid-area: afrikaans;
  }

  &:nth-child(2) {
    grid-area: albanian;
  }

  &:nth-child(3) {
    grid-area: catalan;
  }

  &:nth-child(4) {
    grid-area: croatian;
  }

  &:nth-child(5) {
    grid-area: czech;
  }

  &:nth-child(6) {
    grid-area: danish;
  }

  &:nth-child(7) {
    grid-area: dutch;
  }

  &:nth-child(8) {
    grid-area: english;
  }

  &:nth-child(9) {
    grid-area: estonian;
  }

  &:nth-child(10) {
    grid-area: finnish;
  }

  &:nth-child(11) {
    grid-area: french;
  }

  &:nth-child(12) {
    grid-area: german;
  }

  &:nth-child(13) {
    grid-area: hungarian;
  }

  &:nth-child(14) {
    grid-area: icelandic;
  }

  &:nth-child(15) {
    grid-area: italian;
  }

  &:nth-child(16) {
    grid-area: latvian;
  }

  &:nth-child(17) {
    grid-area: lithuanian;
  }

  &:nth-child(18) {
    grid-area: maltese;
  }

  &:nth-child(19) {
    grid-area: norwegian;
  }

  &:nth-child(20) {
    grid-area: polish;
  }

  &:nth-child(21) {
    grid-area: portuguese;
  }

  &:nth-child(22) {
    grid-area: romanian;
  }

  &:nth-child(23) {
    grid-area: slovak;
  }

  &:nth-child(24) {
    grid-area: slovenian;
  }

  &:nth-child(25) {
    grid-area: spanish;
  }

  &:nth-child(26) {
    grid-area: swedish;
  }

  &:nth-child(27) {
    grid-area: turkish;
  }

  &:nth-child(28) {
    grid-area: vietnamese;
  }
}
