/* global */
:root {
  --color-blue: #4858e7;
  --color-cyan: #7f9af9;
  --color-green: #87e22b;
  --color-white: #ffffff;
  --color-black: #000000;
}
main {
  padding-bottom: 0;
}
/* END global */

/* section__contacts */
.contacts__info {
  padding-bottom: 60rem;
}
.contacts__subtitle {
  margin-bottom: 10rem;
  color: #a4a4a4;
}
.contacts__desc {
  margin-top: 40rem;
  color: #717171;
}
.contacts__address {
  margin-top: 30rem;
  display: grid;
  gap: 5rem;
}
.contacts__phones {
  margin-top: 40rem;
  display: grid;
  gap: 10rem;
}
.contacts__mails {
  margin-top: 30rem;
  display: grid;
  gap: 10rem;
}
.contacts__socs {
  margin-top: 50rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.contacts__socs a {
  display: block;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: var(--color-blue);
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
.contacts__socs a:hover {
  background: var(--color-green);
}
.contacts__socs a:not(:first-child) {
  margin-left: 20rem;
}
.contacts__socs a.icon__vk::before {
  background: var(--color-white);
  width: 22rem;
  height: 16rem;
  -webkit-mask-image: url(../media/icon-vk.svg);
  mask-image: url(../media/icon-vk.svg);
}
.contacts__socs a.icon__telegram::before {
  background: var(--color-white);
  width: 22rem;
  height: 20rem;
  -webkit-mask-image: url(../media/icon-telegram.svg);
  mask-image: url(../media/icon-telegram.svg);
}
.contacts__socs a.icon__whatsapp::before {
  background: var(--color-white);
  width: 18rem;
  height: 18rem;
  -webkit-mask-image: url(../media/icon-whatsapp.svg);
  mask-image: url(../media/icon-whatsapp.svg);
}
.map__coordinates {
  display: none;
}
.contacts__map {
  width: 100%;
  height: 485rem;
}
@media (min-width: 900px) {
  .section__contacts {
    position: relative;
  }
  .contacts__info {
    padding-bottom: 70rem;
    max-width: 380rem;
  }
  .contacts__address {
    margin-top: 60rem;
    gap: 10rem;
  }
  .contacts__phones {
    margin-top: 30rem;
  }
  .contacts__map {
    position: absolute;
    top: 0;
    right: 0;
    width: 590rem;
    height: 100%;
  }
}
@media (min-width: 1200px) {
  main {
    padding-top: 0;
  }
  .section__contacts {
    padding-top: 50rem;
  }
  .contacts__info {
    padding-bottom: 100rem;
  }
  .contacts__subtitle {
    margin-bottom: 20rem;
  }
  .contacts__desc {
    margin-top: 50rem;
  }
  .contacts__address {
    margin-top: 30rem;
  }
  .contacts__map {
    position: absolute;
    top: 0;
    right: 0;
    width: 55vw;
    height: 100%;
  }
}
/* END section__contacts */