.contacts {
  margin-bottom: 5rem;
  display: grid;
  grid-template-columns: auto 60%;
  grid-template-areas: 'list req' 'map map';
  gap: 0 2.4rem; }
  @media (max-width: 767px) {
    .contacts {
      grid-template-columns: 100%;
      grid-template-areas: 'list' 'map' 'req';
      margin-bottom: 0; } }
  .contacts-container {
    position: relative; }
    @media (min-width: 1024px) {
      .contacts-container {
        padding: 0 6rem; } }
  .contacts-head {
    display: grid;
    background-color: #F8F8F8;
    grid-template-columns: repeat(4, 1fr);
    padding: 5.4rem 0;
    border: 1px solid #D8D8D8;
    border-radius: .8rem;
    margin-bottom: 11rem; }
    @media (max-width: 1023px) {
      .contacts-head {
        border-radius: 8px;
        margin-bottom: 70px;
        padding: 30px 14px;
        grid-template-columns: 1fr 1fr; } }
    @media (max-width: 767px) {
      .contacts-head {
        grid-template-columns: 100%; } }
    .contacts-head__card {
      padding: 0 2.4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center; }
      @media (max-width: 1023px) {
        .contacts-head__card {
          padding: 0;
          padding-left: 66px;
          position: relative;
          align-items: start;
          text-align: left; } }
      .contacts-head__card:not(:last-child) {
        border-right: 1px solid #D8D8D8; }
        @media (max-width: 1023px) {
          .contacts-head__card:not(:last-child) {
            padding-bottom: 24px;
            margin-bottom: 24px;
            border: none; } }
        @media (max-width: 767px) {
          .contacts-head__card:not(:last-child) {
            border-right: none;
            border-bottom: 1px solid #D8D8D8; } }
      .contacts-head__card-img {
        width: 7rem;
        height: 7rem;
        margin-bottom: 2.4rem; }
        @media (max-width: 1023px) {
          .contacts-head__card-img {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            margin-bottom: 0; } }
        .contacts-head__card-img img {
          width: 100%;
          height: 100%;
          object-fit: contain; }
      .contacts-head__card-title {
        font-weight: 500;
        margin-bottom: .8rem; }
        @media (max-width: 1023px) {
          .contacts-head__card-title {
            margin-bottom: 4px; } }
      .contacts-head__card-desc {
        color: #6F7682;
        margin-bottom: 2rem; }
        @media (max-width: 1023px) {
          .contacts-head__card-desc {
            margin-bottom: 8px; } }
      .contacts-head__card-link {
        font-weight: 500;
        color: #353535; }
  .contacts__box {
    padding: 4rem;
    background-color: #fff;
    border-radius: .8rem;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.13); }
    @media (max-width: 1023px) {
      .contacts__box {
        border-radius: 8px;
        padding: 40px 14px 20px; } }
  .contacts__list {
    position: relative;
    z-index: 2;
    grid-area: list;
    padding-bottom: 0; }
    @media (min-width: 1024px) {
      .contacts__list {
        margin-left: 6rem; } }
    .contacts__list-head {
      position: absolute;
      top: 0;
      left: 4rem;
      transform: translateY(-50%);
      display: flex;
      gap: .8rem; }
      @media (max-width: 1023px) {
        .contacts__list-head {
          left: 14px;
          gap: 10px; } }
    .contacts__list-toggle {
      height: 4rem;
      padding: 0 1.6rem;
      border-radius: .4rem;
      border: 1px solid #D8D8D8;
      transition: all ease .3s;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all ease .3s; }
      @media (max-width: 1023px) {
        .contacts__list-toggle {
          height: 34px;
          padding: 0 12px;
          border-radius: 4px; } }
      @media (min-width: 1024px) {
        .contacts__list-toggle {
          cursor: pointer; }
          .contacts__list-toggle:hover {
            border-color: #00A19B; } }
      .contacts__list-toggle.active {
        background-color: #00A19B;
        border-color: #00A19B;
        color: #ffffff;
        pointer-events: none; }
  .contacts__req {
    grid-area: req;
    position: relative;
    z-index: 2; }
    @media (min-width: 1024px) {
      .contacts__req {
        margin-right: 6rem;
        column-count: 2;
        column-gap: 3.8rem; } }
    .contacts__req-row:not(:last-child) {
      margin-bottom: .6rem; }
    .contacts__req-row span {
      white-space: nowrap;
      color: #6F7682;
      padding-right: .6rem; }
      @media (max-width: 767px) {
        .contacts__req-row span {
          white-space: normal; } }
    .contacts__req-row--head {
      column-span: all;
      margin-bottom: 2.6rem !important; }
      @media (max-width: 1023px) {
        .contacts__req-row--head {
          margin-bottom: 16px !important; } }
    .contacts__req-footer {
      padding-top: 2.4rem;
      margin-top: 2.4rem;
      border-top: 1px solid #D8D8D8; }
      @media (max-width: 1023px) {
        .contacts__req-footer {
          padding-top: 24px;
          margin-top: 24px; } }
  .contacts__map {
    grid-area: map;
    margin-top: -8rem;
    border-radius: .4rem;
    overflow: hidden; }
    @media (max-width: 767px) {
      .contacts__map {
        border-radius: 4px;
        margin: -60px -16px 30px; } }

.contacts-block__title {
  margin-bottom: 2.4rem; }

.contacts-block__subtitle {
  margin-bottom: 1rem;
  font-weight: 600; }

.contacts-block__item {
  margin-bottom: 4rem; }

.map {
  width: 100%;
  height: 100%;
  min-height: 50rem; }
  @media (max-width: 767px) {
    .map {
      min-height: 460px; } }