.mainpage-panorama {
  width: 100%;
  flex-direction: column;
  background-image: url("/images-pages/mainpage/panorama2.jpg");
  background-size: 100%;
}
.mainpage-panorama-img {
  width: 100%;
}

.mainpage-contact {
  position: relative;
  display: grid;
  width: 100%;
  background-color: #25272C;
}

.mainpage-contact-1-1 {
  grid-area: mainpage-contact-1-1;
}
.mainpage-contact-1-2 {
  grid-area: mainpage-contact-1-2;
}
.mainpage-contact-1-3 {
  grid-area: mainpage-contact-1-3;
}
.mainpage-contact-2-1 {
  grid-area: mainpage-contact-2-1;
}
.mainpage-contact-2-2 {
  grid-area: mainpage-contact-2-2;
}
.mainpage-contact-2-3 {
  grid-area: mainpage-contact-2-3;
}

@media(min-width:992px){
  .mainpage-contact {
    grid-template-columns: calc(50% + 30px - 45vw) auto 320px auto 60px max(calc(22.5vw - 265px)) auto max(calc(22.5vw - 265px)) calc(50% + 30px - 45vw);
    grid-template-rows: 10px auto auto auto 10px;
    grid-template-areas:
      ". . . . . . . . ."
      ". . mainpage-contact-1-1 . . . mainpage-contact-2-1 . ."
      ". . mainpage-contact-1-2 . . . mainpage-contact-2-2 . ."
      ". mainpage-contact-1-3 mainpage-contact-1-3 mainpage-contact-1-3 . mainpage-contact-2-3 mainpage-contact-2-3 mainpage-contact-2-3 ."
      ". . . . . . . . .";
  }
  .mainpage-contact-1-3, .mainpage-contact-2-3 {
    width: calc(45vw - 60px);
  } 
}
@media(max-width:991.9999px){
  .mainpage-contact {
    grid-template-columns: auto 90vw auto;
    grid-template-rows: 10px auto auto auto 20px auto auto auto 10px;
    grid-template-areas:
      ". . ."
      ". mainpage-contact-1-1 ."
      ". mainpage-contact-1-2 ."
      ". mainpage-contact-1-3 ."
      ". . ."
      ". mainpage-contact-2-1 ."
      ". mainpage-contact-2-2 ."
      ". mainpage-contact-2-3 ."
      ". . .";
  }
}

.mainpage-contact h2 {
  color: #FFFFFF;
  margin: 4px 0;
}

.mainpage-contact svg>line {
  stroke: #FFFFFF;
  stroke-width: 2px;
  stroke-linecap: round;
}

.mainpage-contact-phone {
  color: #FFFFFF;
  font-weight: 700;
  padding: 8px 0;
  width: 150px;
  margin-left: 30px;
}
.mainpage-contact-phone a {
  text-decoration: none;
  color: #FFFFFF;
}

.mainpage-contact-calendar {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  margin-left: 30px;
}
.mainpage-contact-calendar a {
  text-decoration: none;
}
.mainpage-contact-calendar div {
  color: #FFFFFF;
  background-color: #929292;
  padding: 8px 0;
  width: 150px;
}
.mainpage-contact-calendar div:hover {
  color: #929292;
  background-color: #FFFFFF;
}


.mainpage-services-row {
  padding: 20px 0;
  width: 100%;
  background-color: #FFFFFF;
  justify-content: center;
}
.mainpage-services {
  display: grid;
  width: 90vw;
}

.mainpage-services-1-1 {
  grid-area: mainpage-services-1-1;
  display: block;
  overflow: hidden;
}
.mainpage-services-1-2 {
  grid-area: mainpage-services-1-2;
}
.mainpage-services-1-3 {
  grid-area: mainpage-services-1-3;
}
.mainpage-services-1-4 {
  grid-area: mainpage-services-1-4;
}
.mainpage-services-2-1 {
  grid-area: mainpage-services-2-1;
  display: block;
  overflow: hidden;
}
.mainpage-services-2-2 {
  grid-area: mainpage-services-2-2;
}
.mainpage-services-2-3 {
  grid-area: mainpage-services-2-3;
}
.mainpage-services-2-4 {
  grid-area: mainpage-services-2-4;
}
.mainpage-services-3-1 {
  grid-area: mainpage-services-3-1;
  display: block;
  overflow: hidden;
}
.mainpage-services-3-2 {
  grid-area: mainpage-services-3-2;
}
.mainpage-services-3-3 {
  grid-area: mainpage-services-3-3;
}
.mainpage-services-3-4 {
  grid-area: mainpage-services-3-4;
}

@media(min-width:992px){
  .mainpage-services {
    grid-template-columns: 30px auto 30px auto 30px auto 30px;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      ". mainpage-services-1-1 . mainpage-services-2-1 . mainpage-services-3-1 ."
      ". mainpage-services-1-2 . mainpage-services-2-2 . mainpage-services-3-2 ."
      ". mainpage-services-1-3 . mainpage-services-2-3 . mainpage-services-3-3 ."
      ". mainpage-services-1-4 . mainpage-services-2-4 . mainpage-services-3-4 .";
  }
}
@media(max-width:991.9999px){
  .mainpage-services {
    grid-template-columns: auto 90vw auto;
    grid-template-rows: auto auto auto auto 40px auto auto auto auto 40px auto auto auto auto;
    grid-template-areas:
      ". mainpage-services-1-1 ."
      ". mainpage-services-1-2 ."
      ". mainpage-services-1-3 ."
      ". mainpage-services-1-4 ."
      ". . ."
      ". mainpage-services-2-1 ."
      ". mainpage-services-2-2 ."
      ". mainpage-services-2-3 ."
      ". mainpage-services-2-4 ."
      ". . ."
      ". mainpage-services-3-1 ."
      ". mainpage-services-3-2 ."
      ". mainpage-services-3-3 ."
      ". mainpage-services-3-4 .";
  }
}

.mainpage-services img {
  width: 100%;
  margin-bottom: 16px;
  object-fit: contain;
}
.mainpage-services h1 {
  margin-bottom: 16px;
}

.mainpage-characteristics {
  display: grid;
  margin: 20px 0;
  width: 90vw;
}

.mainpage-characteristics-1-1 {
  grid-area: mainpage-characteristics-1-1;
}
.mainpage-characteristics-1-2 {
  grid-area: mainpage-characteristics-1-2;
  text-align: center;
}
.mainpage-characteristics-1-3 {
  grid-area: mainpage-characteristics-1-3;
}
.mainpage-characteristics-2-1 {
  grid-area: mainpage-characteristics-2-1;
}
.mainpage-characteristics-2-2 {
  grid-area: mainpage-characteristics-2-2;
  text-align: center;
}
.mainpage-characteristics-2-3 {
  grid-area: mainpage-characteristics-2-3;
}
.mainpage-characteristics-3-1 {
  grid-area: mainpage-characteristics-3-1;
}
.mainpage-characteristics-3-2 {
  grid-area: mainpage-characteristics-3-2;
  text-align: center;
}
.mainpage-characteristics-3-3 {
  grid-area: mainpage-characteristics-3-3;
}

@media(min-width:992px){
  .mainpage-characteristics {
    grid-template-columns: 80px auto 80px auto 80px auto 80px;
    grid-template-areas:
      ". mainpage-characteristics-1-1 . mainpage-characteristics-2-1 . mainpage-characteristics-3-1 ."
      ". mainpage-characteristics-1-2 . mainpage-characteristics-2-2 . mainpage-characteristics-3-2 ."
      ". mainpage-characteristics-1-3 . mainpage-characteristics-2-3 . mainpage-characteristics-3-3 .";
  }
}
@media(max-width:991.9999px){
  .mainpage-characteristics {
    grid-template-columns: 80px auto 80px;
    grid-template-rows: auto auto auto 30px auto auto auto 30px auto auto auto;
    grid-template-areas:
      ". mainpage-characteristics-1-1 ."
      ". mainpage-characteristics-1-2 ."
      ". mainpage-characteristics-1-3 ."
      ". . ."
      ". mainpage-characteristics-2-1 ."
      ". mainpage-characteristics-2-2 ."
      ". mainpage-characteristics-2-3 ."
      ". . ."
      ". mainpage-characteristics-3-1 ."
      ". mainpage-characteristics-3-2 ."
      ". mainpage-characteristics-3-3 .";
  }
}

.mainpage-characteristics img {
  height: 70px;
  
}
.mainpage-characteristics p {
  text-align: center;
}