article {
  display: grid;
  grid-template-columns: 150px auto;
  grid-gap: 14px;

  margin: 0 32px 5em 32px;
}

article {
  clear: both;
  padding-right: 145px;
}

.button {
  padding: 0.7em 3.8em 0.7em 1em;
  color: #fff;

  text-decoration: none;
  border: none;

  background-color: #00AF66;
  background-image: url("../img/icon-fwrd.svg");
  background-repeat: no-repeat;
  background-position: right 0.5em center;

  transition: background-color 250ms;
}
.button:hover {
  background-color: #1DE994;
}

.button:active {
  background-color: #5A00B4;
}

#intro {
  display: grid;
  grid-template-columns: auto 546px;

  margin-top: 65px;
  padding-right: 0;
}
#intro .content {
  padding-right: 50px;
}

#intro .content>* {
  max-width: 500px;
}

#intro .promo {
  background: url("../img/grid.png");
  height: 546px;
}

#intro .promo img {
  display: block;
  margin: 72px 0 0 72px;
  position: absolute;
  animation: promo-slideshow 9s linear infinite 0s;
}
#intro .promo img { opacity: 0; }
#intro .promo img:nth-child(1) { animation-delay: 6s; }
#intro .promo img:nth-child(2) { animation-delay: 3s; }
#intro .promo img:nth-child(3) { animation-delay: 0s; }

@keyframes promo-slideshow {
  0%   { opacity: 0;  }
  5%   { opacity: 1; animation-timing-function: ease-in; }
  35%  { opacity: 1; animation-timing-function: ease-out; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}


#intro .button {
  display: inline-block;
}

#services > ul {
  margin: 0 0 0 24px; padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
}

#services li {
  display: grid;
  grid-gap: 16px;
  grid-template:
  "e h" auto
  "p b" 1fr
  ;
}

#services li h4 {
  margin: 0;
  grid-area: h;
}

#services li h4 a {
  color: #00AF66;
  text-decoration: none;
}

#services li p {
  grid-area: b;
  margin-top: 0;
}

#services .promo {
  background: url("../img/grid.png") no-repeat 0 0 ;
  margin-top: 0.4em;
  padding: 36px 36px 0 0;
  width: 78px; height: 78px;
  grid-area: p;
}

#proofs .content {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 1fr 1fr 1fr;
}

#proofs .content p {
  background: url("../img/heart.svg") no-repeat;
  padding-top: 110px;
}

#form {
  grid-template-columns: 150px 433px auto;
}

#form .promo {
  background: url("../img/grid.png") no-repeat 0 0;
  width: 333px; height: 333px;
}

#form .promo img {
  margin: 72px 0 0 36px;
}

#form form {
  max-width: 600px;
}


#form form label {
  display: block;
  width: 100%;
  margin-bottom: 0.5em;
}

#form form input:focus {
  outline: none;
}

#form form input.text-alike {
  border-style: none;
  border-bottom: solid 1px #37373C;
  width: 100%;
  margin-bottom: 2em;

  transition: color 500ms, border-bottom-color 500ms;
}

#form form input.text-alike:not(:placeholder-shown):invalid {
  border-bottom: solid 1px #FF5E5E;
  color: #FF5E5E;
}

#form form #submit {
  float: right;
  background-image: url("../img/icon-corner.svg");
}

#contacts {
  padding-right: 0;
  grid-template-columns: 150px 433px auto;
  grid-template-areas: "header text map";
}
#contacts h2 {
  grid-area: header;
}

#contacts dl {
  display: grid; align-items: baseline; grid-gap: 1em;
  grid-template-columns: 134px auto;
  height: fit-content;
  grid-area: text;
}

#contacts dt, #contacts dd {
  margin: 0; padding: 0;
}

#contacts dt {
  font-size: 1.5em;
  color: #00AF66;
}

#contacts .map {
  grid-area: map;
  background-position: center right;
  background-repeat: no-repeat;
  height: 300px;
}

@media (max-width: 1200px) {
  article {
    padding-right: 100px;
  }
}

@media (max-width: 1100px) {
  article {
    padding-right: 50px;
  }

  #proofs .content {
    grid-template-columns: 1fr 1fr;
  }

  #contacts {
    grid-template-columns: 150px auto;
    grid-template-areas:
    "header text"
    "e      map";
  }

  #contacts .map {
    background-position: left center;
  }
}

@media (max-width: 1000px) {
  #services > ul {
    grid-template-columns: 1fr;
    grid-gap: 30px;
  }
}

#intro, #services, #proofs, #form, #contacts {
  scroll-behavior: smooth;
}