body {
  overflow-x: hidden;

  @container small (min-width: 0) {
    overflow-x: initial;
  }
}

.contacts {
  display: flex;
  row-gap: 100px;
  flex-direction: column;

  @container medium (min-width: 0) {
    row-gap: 30px;
  }
}

.contacts-group {
  display: grid;
  row-gap: 100px;
  column-gap: 90px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  color: var(--primary-color);
  
  @container xlarge (min-width: 0) {
    column-gap: 45px;
    grid-template-columns: repeat(2, 1fr);
  }

  @container small (min-width: 0) {
    row-gap: 48px;
    grid-template-columns: repeat(1, 1fr);
  }
}

.contacts-column {
  display: flex;
  row-gap: 30px;
  flex-direction: column;
}
.contacts-column:last-child {
  grid-column: span 2;

  @container small (min-width: 0) {
    grid-column: span 1;
  }
}

.contacts-title {
  font-weight: 600;
  font-size: calc(20px + 4 * var(--window-resize));
  color: inherit;
}

.contacts-row {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}
.contacts-row__title {
  font-weight: 300;
  font-size: calc(18px + 0 * var(--window-resize));
  color: var(--primary-accent4);
}
.contacts-row__text {
  font-weight: 300;
  font-size: calc(18px + 0 * var(--window-resize));
  color: var(--primary-color);
  margin-top: -12px;
}
.contacts-row__value {
  --link-color: var(--primary-accent2);
  --link-hover: var(--primary-color);

  display: flex;
  row-gap: 4px;
  flex-direction: column;

  font-weight: 400;
  font-size: calc(24px + 0 * var(--window-resize));
  color: var(--primary-color);
}
.contacts-row__value a {
  font-weight: 500;
  font-size: calc(24px + 0 * var(--window-resize));
}

.contacts-group--end {
  padding: 100px 0;
  z-index: 0;
  position: relative;
  color: var(--primary-accent);
  background-color: var(--primary-accent5);
  margin-bottom: -130px;

  @container medium (min-width: 0) {
    padding: 48px 0 60px;
    margin-top: 130px;
    margin-bottom: -80px;
  }
  @container small (min-width: 0) {
    margin-bottom: -60px;
  }
  @container xsmall (min-width: 0) {
    margin-bottom: -40px;
  }
}
.contacts-group--end::before {
  content: '';
  width: 100vw;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%);
  background-color: var(--primary-accent5);
}
.contacts-group--end .contacts-title {
  font-weight: 400;
}
.contacts-group--end .contacts-row__value {
  --link-color: var(--primary-accent);
  --link-hover: var(--primary-accent2);

  color: var(--primary-accent);
  font-weight: 300;
  font-size: calc(18px + 0 * var(--window-resize));
}
.contacts-group--end .contacts-row__value .link--email {
  --link-color: var(--primary-accent2);
  --link-hover: var(--primary-accent);
}
.contacts-group--end .separator {
  opacity: .1;
  background-color: var(--primary-accent4);
}

.contacts-map {
  width: 100%;
  height: 380px;
}
.map-balloon {
  display: flex;
  row-gap: 8px;
  flex-direction: column;
}
.map-balloon__item {
  color: var(--primary-accent4);
  font-weight: 300;
  font-size: calc(14px + 0 * var(--window-resize));
  font-family: 'Mont', 'Montserrat', Arial, Helvetica, sans-serif !important;
}
.map-balloon span {
  display: block;
  margin-top: 4px;
  color: var(--primary-color);
  font-weight: 400;
  font-size: calc(18px + 0 * var(--window-resize));
}