.block-cards-with-icons {
  position: relative;
  overflow: hidden;
  padding: 220px 0 228px;
  background-color: #efeded;
  background-image: linear-gradient(to right, rgba(17, 17, 17, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(17, 17, 17, 0.08) 1px, transparent 1px);
  background-size: 228px 228px;
  background-position: top center;
}

.block-cards-with-icons__inner {
  position: relative;
}

.block-cards-with-icons__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 684px;
  margin-bottom: 40px;
  color: var(--tg-color-black);
}

.block-cards-with-icons__title {
  margin: 0;
  text-transform: uppercase;
}

.block-cards-with-icons__text {
  max-width: 684px;
  margin: 0;
}

.block-cards-with-icons__markers {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  width: 472px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='472' height='16' viewBox='0 0 472 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.99512 0V16' stroke='%23111111'/%3E%3Cpath d='M16 7.99512L-5.96046e-08 7.99512' stroke='%23111111'/%3E%3Cpath d='M235.995 0V16' stroke='%23111111'/%3E%3Cpath d='M244 7.99512L228 7.99512' stroke='%23111111'/%3E%3Cpath d='M463.995 0V16' stroke='%23111111'/%3E%3Cpath d='M472 7.99512L456 7.99512' stroke='%23111111'/%3E%3C/svg%3E%0A");
  position: absolute;
  z-index: 2;
  right: -8px;
  top: 0;
}

.block-cards-with-icons__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--tg-color-black);
  border-left: 1px solid var(--tg-color-black);
}

.block-cards-with-icons__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 228px;
  padding: 20px;
  background-color: var(--tg-color-beige);
  border-right: 1px solid var(--tg-color-black);
  border-bottom: 1px solid var(--tg-color-black);
}

.block-cards-with-icons__icon {
  display: block;
  width: 48px;
  height: 48px;
  -o-object-fit: contain;
     object-fit: contain;
}

.block-cards-with-icons .block-cards-with-icons__card-title {
  margin: 0;
  color: var(--tg-color-black);
}

@media (max-width: 1024px) {
  .block-cards-with-icons__markers {
    background-image: url("data:image/svg+xml,%3Csvg width='82' height='81' viewBox='0 0 82 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M73.9951 65V81' stroke='%23111111'/%3E%3Cpath d='M82 72.9954L66 72.9954' stroke='%23111111'/%3E%3Cpath d='M73.9951 0V16' stroke='%23111111'/%3E%3Cpath d='M82 7.99536L66 7.99536' stroke='%23111111'/%3E%3Cpath d='M7.99512 65V81' stroke='%23111111'/%3E%3Cpath d='M16 72.9954L-5.96046e-08 72.9954' stroke='%23111111'/%3E%3C/svg%3E%0A");
    width: 82px;
    height: 81px;
    top: unset;
    bottom: -8px;
  }

  .block-cards-with-icons__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .block-cards-with-icons {
    padding: 125px 0;
    background-size: 65px 65px;
  }

  .block-cards-with-icons__head {
    gap: 12px;
    margin-bottom: 30px;
  }

  .block-cards-with-icons__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .block-cards-with-icons__card {
    min-height: 130px;
    padding: 16px;
  }

  .block-cards-with-icons__icon {
    width: 40px;
    height: 40px;
  }

  .block-cards-with-icons .block-cards-with-icons__card-title {
    font-size: 16px;
    line-height: 24px;
  }
}