#map {
  width: 100%;
  height: 50vw; }
  @media (max-width : 900px) {
    #map {
      height: calc(100vw - (2 * var(--mainpad))); } }
  #map .mapboxgl-control-container {
    display: none; }
  #map .map-marker {
    height: var(--fontLarge);
    width: var(--fontLarge);
    border-radius: 500000px;
    background-color: var(--sand); }

@media (min-width : 900px) {
  section.map-section {
    margin-bottom: 10rem; } }

section.contact-details {
  font-size: var(--fontLarge);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  column-gap: var(--mainpad);
  row-gap: 1em;
  margin-bottom: 1em; }
  @media (max-width : 900px) {
    section.contact-details {
      grid-template-columns: repeat(4, 1fr);
      row-gap: calc(2 * var(--mainpad)); } }
  @media (max-width : 900px) {
    section.contact-details {
      font-size: var(--fontMedium); } }
  section.contact-details p {
    grid-column: 1/7; }
    @media (max-width : 900px) {
      section.contact-details p {
        grid-column: 1/5; } }
  section.contact-details div {
    grid-row: 2;
    grid-column-end: span 6;
    color: var(--grey); }
    @media (max-width : 900px) {
      section.contact-details div {
        grid-column-end: span 4;
        grid-row: auto; } }