#steps-block {
  background-color: var(--bg-primary-second);
  border-radius: 20px;
}
#steps-block .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
#steps-block .steps .step {
  position: relative;
  padding: 55px 30px 30px 30px;
  border-radius: 10px;
  background-color: var(--bg-primary-main);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
}
#steps-block .steps .step .number {
  position: absolute;
  left: 20px;
  top: -15px;
  width: 50px;
  height: 50px;
  background-color: var(--colors-third);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
#steps-block .steps .step .number p {
  color: var(--text-alt-head);
}
#steps-block .steps .step .name {
  color: var(--text-primary-head);
}
#steps-block .steps .step .subtext {
  color: var(--text-primary-second);
}
#steps-block .steps .step a {
  color: var(--text-primary-head);
}
#steps-block .steps .step a:hover {
  color: var(--hover);
}
#steps-block .steps .step .phones, #steps-block .steps .step .emails {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#steps-block .steps .step .socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
#steps-block .steps .step .socials .soc {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-primary-second);
  border-radius: 10px;
}
#steps-block .steps .step .socials .soc img {
  width: 26px;
  height: 26px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
#steps-block .steps .step .socials .soc:hover {
  background-color: var(--hover);
}
#steps-block .steps .step.blue {
  background-color: var(--colors-main);
}
#steps-block .steps .step.blue *:not(.number, .number > p, .btn) {
  color: var(--text-alt-head);
}
#steps-block .steps .step.blue .btn {
  background-color: var(--bg-primary-second);
  color: var(--text-primary-head);
}
#steps-block .steps .step.blue .btn:hover {
  background-color: var(--hover);
  color: var(--text-alt-head);
}
#steps-block .steps .step.blue .btn:hover svg path {
  stroke: var(--text-alt-head);
}/*# sourceMappingURL=block.css.map */

@media (max-width: 1200px){
  #steps-block .steps{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px){
  #steps-block .steps{
    gap: 10px;
  }
}

@media (max-width: 560px){
  #steps-block .steps{
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
  }
}