.location {
  margin: var(--s2) auto;
  margin-bottom: 0;
  max-width: 1400px;
}

.location div {
  margin-bottom: var(--s0);
}

.location div:last-of-type {
  margin-bottom: 0;
}

.location h3 {
  color: var(--gold);
  font-size: var(--s1);
  margin-bottom: var(--s-4);
}

.location p {
  color: var(--blue);
  margin-bottom: var(--s-4);
}

.location img {
  margin: var(--s0) 0;
}

@media (min-width: 860px) {
  .location {
    padding: var(--s4);
  }
}

@media (min-width: 1200px) {
  .location div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--s4);
    margin-bottom: var(--s6);
  }

  .location article {
    text-align: right;
  }

  .location p {
    font-size: var(--s-1);
  }

  .location div:nth-of-type(odd) article {
    grid-column: 2;
    text-align: left;
  }

  .location div:nth-of-type(odd) img {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  .location img {
    margin: 0;
    max-width: 96%;
  }
}