.hatk {

  --kartya-magas: 420px;
  --kartya-fej: 126px;
  --kep-magas: 304px;
  --kep-bal: 0px;
  --kep-jobb: 0px;
  --kep-felul: 0px;
  --kep-alatt: 0px;
  --res: 36px;
  --r-kartya: 48px;

  --r-kep: clamp(18px, 4.5vw, 40px);
  --k-ikon-meret: 26px;

  --hatk-tinta: #0d1b33;
  --hatk-halk: #5a6a85;
  --hatk-szurke: #eaeef4;
  --hatk-melyebb: #dfe4ec;

  --hatk-tartalom: min(1240px, var(--tartalom));

  padding: clamp(24px, 2.5vw, 48px) 0;
  background: #fff;
}
.hatk-in {
  max-width: var(--hatk-tartalom);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

.hatk-fej {
  max-width: 760px;
  margin: 0 auto clamp(28px, 3.4vw, 44px);
  text-align: center;
}

.hatk-szemold {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--kek, #095fe1);
}

.hatk-cim br {
  display: none;
}
@media (min-width: 700px) {
  .hatk-cim br {
    display: inline;
  }
}
.hatk-cim {
  margin: 0;
  font-size: var(--cim-szekcio);
  max-width: var(--cim-szeles);

  margin-inline: auto;
  text-wrap: balance;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--hatk-tinta);
}

.hatk-racs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--res);
}
@media (min-width: 700px) and (max-width: 1100px) {
  .hatk-racs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1101px) {
  .hatk-racs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hatk .kartya {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--kartya-magas);
  background: var(--hatk-szurke);
  border-radius: var(--r-kartya);
  overflow: hidden;
}

.hatk .k-szoveg {
  flex: 0 0 auto;
  min-height: var(--kartya-fej);
  padding: 26px 26px 0;
}
.hatk .k-cim {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--hatk-tinta);
}
.hatk .k-leir {
  margin: 0;
  max-width: 42ch;
  font-size: 15.5px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--hatk-halk);
}

.hatk .k-cim {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hatk .k-ikon {
  flex: 0 0 auto;

  width: var(--k-ikon-meret);
  height: var(--k-ikon-meret);
  color: var(--kek, #095fe1);
}

.hatk .k-media {
  flex: 1 1 auto;
  min-height: 0;
  margin: var(--kep-felul) var(--kep-jobb) var(--kep-alatt) var(--kep-bal);
  border-radius: var(--r-kep);
  overflow: hidden;
  background: var(--hatk-melyebb);
}
.hatk .k-media img {
  display: block;
  width: 100%;
  height: var(--kep-magas);
  object-fit: cover;
  object-position: var(--kep-poz, 50% 38%);
}

.hatk .kep--kepernyo img {
  --kep-poz: 0% 0%;
}

.hatk .k-helyorzo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 68px 18px 0;
  border: 1.5px dashed #c3cedd;
  border-bottom: 0;
  border-radius: inherit;
  background: #eef1f6;
  color: #93a2b8;
  text-align: center;
}
.hatk .k-helyorzo svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
.hatk .k-helyorzo span {
  font-size: 12.5px;
  line-height: 1.4;
}

.hatk .kartya {
  opacity: 0;
  transform: translateY(18px);
}
.hatk .hatk-racs.lat .kartya {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease-out var(--kesl, 0ms),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--kesl, 0ms);
}
.hatk-racs > :nth-child(2) {
  --kesl: 70ms;
}
.hatk-racs > :nth-child(3) {
  --kesl: 140ms;
}
.hatk-racs > :nth-child(4) {
  --kesl: 210ms;
}
.hatk-racs > :nth-child(5) {
  --kesl: 280ms;
}
.hatk-racs > :nth-child(6) {
  --kesl: 350ms;
}

@media (max-width: 699px) {
  .hatk {
    --kartya-magas: 342px;
    --kartya-fej: 136px;
    --kep-magas: 262px;
    --kep-bal: 0px;
    --kep-jobb: 0px;
    --res: 16px;
    --r-kartya: 28px;
  }
  .hatk .k-szoveg {
    padding: 22px 22px 0;
  }
  .hatk .k-helyorzo {
    padding-top: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hatk .kartya {
    opacity: 1;
    transform: none;
    transition: none;
  }
}