/* ========================= */
/* [[[ CONTACT PAGE LAYOUT ]]] */
/* ========================= */

.contact-section {
  display: grid;
  grid-template-columns: subgrid;
  column-gap: 2rem;
}

.contact-details {
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 1rem;
}

.contact-map {
  grid-column: 6 / -1;
  width: 100%;
  height: 100%;
  min-height: 450px;
  background-color: var(--color-grey-lighter);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================== */
/* [[[ RESPONSIVE STYLES ]]]   */
/* =========================== */

/* Tablet (1200px): Wrapper becomes 8 cols (layout-wide 1/-1) */
@media (max-width: 1200px) {


  .contact-details {
    grid-column: 1 / 5;
    /* 4 cols */
  }

  .contact-map {
    grid-column: 5 / -1;
    /* 4 cols */
  }
}

/* Mobile (800px): Wrapper becomes 4 cols (layout-wide 1/-1) */
@media (max-width: 800px) {

  .contact-section {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
  }

  /* clear grid columns because of flexbox*/
  .contact-details {
    grid-column: auto;
    margin-bottom: 0;
  }

  .contact-map {
    grid-column: auto;
    min-height: 350px;
  }
}