.cards {
        width: 100%;
  max-width: none;
  background: var(--color-background-second);
  color: var(--btn-text);
    background-image: 
  linear-gradient(to right, #07070718 1px, transparent 1px),
  linear-gradient(to bottom, #07070718 1px, transparent 1px);
  background-size: 60px 60px;
  font-family: "Tektur", sans-serif;
}
.cards_wrapper {
    padding: 85px 0;

}
.cards_title {
  text-align: center;
  font-size: var(--h1-size-main, clamp(28px, 4vw, 42px));
  font-weight: 700;
  color: var(--btn-text);
  margin-bottom: 30px;
  @media (max-width: 768px) {
    font-size: clamp(24px, 6vw, 32px);
    margin-bottom: 28px;
  }
}
.cards_subtitle {
  text-align: center;
  width: 100%;
}
.cards_block {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  align-items: stretch;
  justify-content: space-around;
}

.card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 30%;
  min-height: 100%;
  gap: 16px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--color-background-second);
  padding: 16px;
  border: 1px solid #7fa6d96e;
  padding: 40px;
  position: relative;
  --corner-color: #0B1F3A;
  --corner-size: 20px;
  --corner-thickness: 2px;
  background-image: 
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color));

  background-repeat: no-repeat;
  background-size: 
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size),
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size),
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size),
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size);

  background-position: 
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
  background-origin: border-box;
  @media (max-width: 1024px) {
    width: 48%;
    @media (max-width: 768px) {
      width: 100%;
    }
  }
}
/* Ширина по количеству карточек. Медиазапросы здесь же — иначе эти
   классы перебивают адаптив .card и на телефоне карточки остаются узкими */
.card6,
.card3 {
  width: 30%;
}
.card4,
.card2 {
  width: 48%;
}
.card1 {
  width: 100%;
}
@media (max-width: 1024px) {
  .card6,
  .card3 {
    width: 48%;
  }
}
@media (max-width: 768px) {
  .card6,
  .card4,
  .card3,
  .card2 {
    width: 100%;
  }
}
.card_text {
  min-width: 0;
  overflow-wrap: break-word;
}
.card {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 30%;
  min-height: 100%;
  gap: 16px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  padding: 0;
  @media (max-width: 1024px) {
    width: 48%;
    @media (max-width: 768px) {
      width: 100%;
    }
  }
}
.card_img {
  aspect-ratio: 16/9;
  overflow: hidden;
  width: 100%;
  border-radius: var(--border-radius);
  background: var(--color-background);
  background-size: cover;
    background-image: 
  linear-gradient(to right, #e0e0e018 1px, transparent 1px),
  linear-gradient(to bottom, #e0e0e018 1px, transparent 1px);
  background-size: 30px 30px;
}
.card_text_head {
  font-size: 18px;
  font-weight: 600;
  color: var(--btn-text);
  margin-bottom: 6px;
  padding: 0 16px;
}
.card_text_text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--btn-text);
  opacity: 0.8;
  margin: 0;
  padding: 0 16px 16px;
}