/* 04.2. БЫСТРЫЙ ДОСТУП. Исходные цветные плитки с крупными фоновыми значками */

#kru-services {
  color: var(--kru-ink);
}

#kru-services {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

#kru-services .kr-heading {
  margin: 0 0 27px;
}

#kru-services h2 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
  margin: 0;
  color: var(--kru-ink);
  letter-spacing: -0.5px;
}

#kru-services .kr-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#kru-services .kr-link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 253px;
  padding: 27px 23px 25px;
  overflow: hidden;
  text-decoration: none;
  color: var(--kru-ink);
  border: 0;
  border-radius: 3px;
  background: var(--kru-service-one);
  transition: background-color 0.2s;
}

#kru-services .kr-link-2 {
  background: var(--kru-service-two);
  color: #154b45;
}

#kru-services .kr-link-3 {
  background: var(--kru-service-three);
  color: #5b482c;
}

#kru-services .kr-link-4 {
  background: var(--kru-service-four);
  color: #353f64;
}

#kru-services .kr-service-art {
  position: absolute;
  z-index: -1;
  top: -8px;
  right: -20px;
  width: 182px;
  height: 182px;
  opacity: 0.19;
  transform: rotate(-9deg);
  pointer-events: none;
  transition: transform 0.3s,
    opacity 0.3s;
}

#kru-services .kr-link-2 .kr-service-art {
  top: 1px;
  right: -27px;
  transform: rotate(9deg);
}

#kru-services .kr-link-3 .kr-service-art {
  top: 0;
  right: -26px;
  transform: rotate(-10deg);
}

#kru-services .kr-link-4 .kr-service-art {
  top: -18px;
  right: -31px;
  transform: rotate(12deg);
  width: 198px;
  height: 198px;
}

#kru-services .kr-service-art :is(svg, img.kru-svg) {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#kru-services .kr-service-copy {
  position: relative;
  display: block;
  width: 100%;
}

#kru-services .kr-link strong {
  display: block;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.4px;
  max-width: 215px;
  overflow-wrap: normal;
  word-break: normal;
}

#kru-services .kr-link small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 11px;
  color: inherit;
  opacity: 0.82;
  max-width: 190px;
}

#kru-services .kr-arrow {
  position: absolute;
  left: 23px;
  top: 22px;
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
}

#kru-services .kr-link:hover .kr-service-art {
  transform: translate(-3px, 4px) rotate(0);
  opacity: 0.29;
}

#kru-services .kr-link:hover {
  background: #dae8f3;
}

#kru-services .kr-link-2:hover {
  background: #d9e9e3;
}

#kru-services .kr-link-3:hover {
  background: #ede2ce;
}

#kru-services .kr-link-4:hover {
  background: #dfe2ee;
}

#kru-services a:focus-visible {
  outline: 3px solid #d47734;
  outline-offset: 4px;
}

/* Адаптация: ширина до 1199px */

@media (max-width: 1199px) {
  #kru-services .kr-link {
    padding: 22px 17px;
    min-height: 252px;
  }

  #kru-services .kr-link strong {
    font-size: 18px;
  }

  #kru-services .kr-arrow {
    left: 17px;
  }

  #kru-services .kr-service-art {
    width: 160px;
    height: 160px;
  }

  #kru-services .kr-link-4 .kr-service-art {
    width: 180px;
    height: 180px;
  }
}

/* Адаптация: ширина до 991px */

@media (max-width: 991px) {
  #kru-services .kr-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #kru-services .kr-link strong {
    font-size: 21px;
  }
}

/* Адаптация: ширина до 767px */

@media (max-width: 767px) {
  #kru-services .kr-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #kru-services .kr-link {
    min-height: 235px;
    padding: 25px;
  }

  #kru-services .kr-link strong {
    font-size: 20px;
    max-width: 260px;
  }

  #kru-services .kr-link small {
    font-size: 13px;
  }

  #kru-services .kr-arrow {
    left: 25px;
    top: 24px;
  }

  #kru-services .kr-service-art {
    width: 190px;
    height: 190px;
    right: -10px;
  }

  #kru-services .kr-link-4 .kr-service-art {
    width: 210px;
    height: 210px;
  }
}

/* Адаптация: ширина до 650px */

@media (max-width: 650px) {
  #kru-services h2 {
    font-size: 25px;
  }

  #kru-services .kr-heading {
    margin-bottom: 22px;
  }

  #kru-services .kr-link {
    min-height: 233px;
    padding: 20px 17px;
  }

  #kru-services .kr-link strong {
    font-size: 20px;
    letter-spacing: -0.5px;
  }

  #kru-services .kr-link small {
    font-size: 12px;
  }

  #kru-services .kr-arrow {
    left: 18px;
    top: 20px;
    font-size: 24px;
  }

  #kru-services .kr-service-art {
    width: 157px;
    height: 157px;
    right: -30px;
  }

  #kru-services .kr-link-4 .kr-service-art {
    width: 177px;
    height: 177px;
  }
}

/* Адаптация: ширина до 575px */

@media (max-width: 575px) {
  #kru-services .kr-links {
    grid-template-columns: 1fr;
  }

  #kru-services .kr-link {
    min-height: 190px;
    padding: 25px;
  }

  #kru-services .kr-link strong {
    font-size: 23px;
    max-width: 275px;
  }

  #kru-services .kr-link small {
    font-size: 13px;
    max-width: 260px;
  }

  #kru-services .kr-arrow {
    left: 25px;
    top: 22px;
  }

  #kru-services .kr-service-art {
    width: 185px;
    height: 185px;
    right: -16px;
  }

  #kru-services .kr-link-4 .kr-service-art {
    width: 200px;
    height: 200px;
    right: -19px;
  }
}

/* Доступность: отключение анимации по системной настройке. */

@media (prefers-reduced-motion: reduce) {
  #kru-services .kr-link,
  #kru-services .kr-service-art {
    transition: none;
  }
}