/* IceGrid Kits page — page-specific layouts
   Prefix: igk-
*/

/* ===============================
   SECTION 1: KITS HERO GRID
   =============================== */

.igk-hero {
  padding-top: 4.4rem;
  padding-bottom: 4rem;
}

.igk-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
  gap: 3.2rem;
  align-items: center;
}

.igk-hero-text {
  position: relative;
  padding: 1.7rem 1.5rem 1.9rem;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(71, 211, 255, 0.14), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(255, 179, 77, 0.14), transparent 50%),
    linear-gradient(145deg, #081529, #050c19);
  border: 1px solid rgba(70, 114, 170, 0.95);
  box-shadow: var(--ig-shadow-soft);
  overflow: hidden;
}

.igk-hero-text::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image:
    linear-gradient(
      90deg,
      rgba(22, 52, 94, 0.8) 1px,
      transparent 1px
    ),
    linear-gradient(
      0deg,
      rgba(22, 52, 94, 0.8) 1px,
      transparent 1px
    );
  background-size: 30px 30px;
  opacity: 0.35;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 14px rgba(71, 211, 255, 0.6));
  pointer-events: none;
}

.igk-kicker {
  position: relative;
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igk-kicker::before {
  content: "";
  position: absolute;
  left: -0.8rem;
  top: 0.55rem;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #ffffff, var(--ig-accent-cyan));
  box-shadow:
    0 0 18px rgba(71, 211, 255, 0.8),
    0 0 0 3px rgba(71, 211, 255, 0.3);
}

.igk-hero-title {
  margin: 0 0 0.7rem;
  font-family: "IGDisplay", system-ui, sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ig-text-main);
}

.igk-hero-lead {
  margin: 0 0 1rem;
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--ig-text-soft);
}

.igk-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.igk-hero-pill {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px dashed rgba(99, 142, 198, 0.95);
  font-size: 0.8rem;
  color: var(--ig-text-soft);
  background: radial-gradient(circle at 0 0, #101b2e, #050913);
}

.igk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* hero cards */

.igk-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  justify-items: center;
  overflow: hidden;
}

.igk-hero-grid::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 30px;
  background-image:
    linear-gradient(
      90deg,
      rgba(29, 64, 107, 0.9) 1px,
      transparent 1px
    ),
    linear-gradient(
      0deg,
      rgba(29, 64, 107, 0.9) 1px,
      transparent 1px
    );
  background-size: 34px 34px;
  opacity: 0.2;
  filter: drop-shadow(0 0 16px rgba(71, 211, 255, 0.45));
  mix-blend-mode: screen;
  pointer-events: none;
}

.igk-hero-card {
  position: relative;
  padding: 0.7rem;
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, #18253a, #050913);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(71, 211, 255, 0.55);
  transition:
    transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.4s ease-out,
    border-color 0.35s ease-out;
}

.igk-hero-card--solo {
  grid-column: 1 / 3;
  max-width: 340px;
}

.igk-hero-card--family {
  justify-self: flex-start;
  max-width: 230px;
}

.igk-hero-card--deep {
  justify-self: flex-end;
  max-width: 230px;
}

.igk-hero-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 1),
    0 0 30px rgba(71, 211, 255, 0.9);
  border-color: rgba(71, 211, 255, 0.95);
}

.igk-hero-image {
  border-radius: 18px;
}

.igk-hero-caption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--ig-text-muted);
}

/* ===============================
   SECTION 2: LANE KIT MATRIX
   =============================== */

.igk-matrix-inner {
  position: relative;
}

.igk-matrix-grid {
  margin-top: 2rem;
  border-radius: 24px;
  padding: 1rem 1rem 1.1rem;
  background:
    radial-gradient(circle at 0 0, #141f34, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
}

.igk-matrix-head,
.igk-matrix-row {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1fr 1fr;
  gap: 0.7rem;
  align-items: flex-start;
}

.igk-matrix-head {
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(62, 99, 152, 0.95);
}

.igk-matrix-cell {
  font-size: 0.86rem;
  color: var(--ig-text-soft);
}

.igk-matrix-cell--blank {
  font-size: 0;
}

.igk-matrix-head .igk-matrix-cell {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igk-matrix-row {
  padding: 0.45rem 0.5rem;
  border-radius: 14px;
  margin-bottom: 0.4rem;
  background: radial-gradient(circle at 0 0, #10192b, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
}

.igk-matrix-row:last-child {
  margin-bottom: 0;
}

.igk-matrix-label {
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-main);
}

/* lane tints */

.igk-matrix-row--a {
  border-color: rgba(71, 211, 255, 0.95);
}

.igk-matrix-row--b {
  border-color: rgba(123, 255, 139, 0.95);
}

.igk-matrix-row--c {
  border-color: rgba(255, 179, 77, 0.95);
}

/* matrix images */

.igk-matrix-media {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 0.9rem;
  align-items: center;
}

.igk-matrix-figure {
  margin: 0;
  max-width: 260px;
}

.igk-matrix-figure--small {
  max-width: 190px;
}

.igk-matrix-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 3: KIT ANATOMY
   =============================== */

.igk-anatomy-inner {
  position: relative;
}

.igk-anatomy-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) auto;
  gap: 1.5rem;
  align-items: center;
}

.igk-anatomy-figure {
  margin: 0;
  max-width: 320px;
}

.igk-anatomy-image {
  border-radius: 20px;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 1),
    0 0 26px rgba(71, 211, 255, 0.7);
}

/* callouts */

.igk-anatomy-calls {
  display: grid;
  gap: 0.7rem;
}

.igk-anatomy-call {
  padding: 0.55rem 0.7rem 0.65rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igk-anatomy-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-anatomy-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* small color hints */

.igk-anatomy-call--shelter {
  border-color: rgba(71, 211, 255, 0.95);
}

.igk-anatomy-call--heat {
  border-color: rgba(255, 179, 77, 0.95);
}

.igk-anatomy-call--tackle {
  border-color: rgba(123, 255, 139, 0.95);
}

.igk-anatomy-call--safety {
  border-color: rgba(255, 86, 86, 0.95);
}

/* side image */

.igk-anatomy-side {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.igk-anatomy-side-figure {
  margin: 0;
  max-width: 210px;
}

.igk-anatomy-side-image {
  border-radius: 18px;
}

/* ===============================
   RESPONSIVE (kits page)
   =============================== */

@media (max-width: 1024px) {
  .igk-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
  }

  .igk-hero-grid {
    max-width: 430px;
  }

  .igk-matrix-media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-items: flex-start;
  }

  .igk-anatomy-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr);
  }
}

@media (max-width: 768px) {
  .igk-hero {
    padding-top: 3.6rem;
  }

  .igk-hero-text {
    padding: 1.5rem 1.3rem 1.7rem;
  }

  .igk-hero-title {
    font-size: 1.6rem;
  }

  .igk-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: flex-start;
  }

  .igk-hero-card--solo {
    grid-column: 1 / 2;
  }

  .igk-hero-card--family,
  .igk-hero-card--deep {
    max-width: 230px;
  }

  .igk-matrix-grid {
    padding: 0.9rem 0.85rem 1rem;
  }

  .igk-matrix-head,
  .igk-matrix-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  }

  .igk-matrix-head .igk-matrix-cell:nth-child(n + 3),
  .igk-matrix-row .igk-matrix-cell:nth-child(n + 3) {
    /* второй столбец переносится на новую строку автоматически */
  }

  .igk-matrix-media {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-anatomy-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-anatomy-side {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .igk-hero {
    padding-top: 3.2rem;
  }

  .igk-hero-title {
    font-size: 1.4rem;
  }

  .igk-matrix-figure {
    max-width: 220px;
  }

  .igk-matrix-figure--small {
    max-width: 170px;
  }

  .igk-anatomy-figure {
    max-width: 280px;
  }

  .igk-anatomy-side-figure {
    max-width: 190px;
  }
}
/* ===============================
   SECTION 4: WEIGHT & COMFORT BALANCE
   =============================== */

.igk-balance-inner {
  position: relative;
}

.igk-balance-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-balance-rail {
  position: relative;
}

.igk-balance-axis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.igk-balance-axis-label {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igk-balance-track {
  position: relative;
  border-radius: 18px;
  padding: 0.6rem 0.7rem;
  background: radial-gradient(circle at 0 0, #111b2f, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igk-balance-track::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(71, 211, 255, 0.9),
    rgba(255, 179, 77, 0.95)
  );
  box-shadow: 0 0 16px rgba(71, 211, 255, 0.8);
}

.igk-balance-step {
  position: relative;
  margin-bottom: 0.45rem;
  padding: 0.35rem 0.6rem 0.4rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: radial-gradient(circle at 0 0, #151f32, #050913);
  border: 1px solid rgba(74, 117, 179, 0.95);
}

.igk-balance-step:last-child {
  margin-bottom: 0;
}

.igk-balance-chip {
  min-width: 70px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(99, 142, 198, 0.95);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
  text-align: center;
}

.igk-balance-text {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ig-text-soft);
}

/* lane colors */

.igk-balance-step--a {
  border-color: rgba(71, 211, 255, 0.95);
}

.igk-balance-step--b {
  border-color: rgba(123, 255, 139, 0.95);
}

.igk-balance-step--c {
  border-color: rgba(255, 179, 77, 0.95);
}

/* images */

.igk-balance-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-balance-figure {
  margin: 0;
  max-width: 230px;
}

.igk-balance-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igk-balance-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 5: PRESET BUNDLES
   =============================== */

.igk-presets-inner {
  position: relative;
}

.igk-presets-rail {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.igk-preset-card {
  position: relative;
  padding: 0.85rem 0.9rem 1rem;
  border-radius: 20px;
  background: radial-gradient(circle at 0 0, #121f33, #050913);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.35s ease-out,
    border-color 0.3s ease-out;
}

.igk-preset-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 24px 68px rgba(0, 0, 0, 1),
    0 0 26px rgba(71, 211, 255, 0.8);
  border-color: rgba(71, 211, 255, 0.95);
}

.igk-preset-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
}

.igk-preset-lane {
  padding: 0.23rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(71, 211, 255, 0.95);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igk-preset-lane--b {
  border-color: rgba(123, 255, 139, 0.95);
}

.igk-preset-lane--c {
  border-color: rgba(255, 179, 77, 0.95);
}

.igk-preset-tag {
  font-size: 0.8rem;
  color: var(--ig-text-soft);
}

.igk-preset-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
}

.igk-preset-media {
  margin: 0;
}

.igk-preset-image {
  border-radius: 14px;
}

.igk-preset-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* ===============================
   SECTION 6: POCKET MODULES
   =============================== */

.igk-pockets-inner {
  position: relative;
}

.igk-pockets-band {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-pockets-list {
  display: grid;
  gap: 0.8rem;
}

.igk-pocket-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: flex-start;
}

.igk-pocket-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #ffffff, var(--ig-accent-amber));
  box-shadow:
    0 0 14px rgba(255, 179, 77, 0.9),
    0 0 0 3px rgba(5, 10, 19, 1);
  margin-top: 0.3rem;
}

.igk-pocket-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-pocket-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igk-pockets-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-pockets-figure {
  margin: 0;
  max-width: 230px;
}

.igk-pockets-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igk-pockets-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE FOR 4–6
   =============================== */

@media (max-width: 1024px) {
  .igk-balance-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-balance-media {
    justify-items: flex-start;
  }

  .igk-balance-figure--small {
    transform: none;
  }

  .igk-presets-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .igk-pockets-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-pockets-media {
    justify-items: flex-start;
  }

  .igk-pockets-figure--small {
    transform: none;
  }
}

@media (max-width: 768px) {
  .igk-presets-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-balance-layout,
  .igk-pockets-band {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igk-balance-figure {
    max-width: 210px;
  }

  .igk-balance-figure--small {
    max-width: 170px;
  }

  .igk-pockets-figure {
    max-width: 210px;
  }

  .igk-pockets-figure--small {
    max-width: 170px;
  }
}
.igk-preset-media {
  margin: 0;
  width: 100%;
}

.igk-preset-image {
  display: block;
  width: 100%;
  max-width: 260px; /* впишется в общий лимит 350px */
  border-radius: 14px;
}
/* ===============================
   SECTION 7: RODS & LINE LANES
   =============================== */

.igk-rods-inner {
  position: relative;
}

.igk-rods-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-rods-list {
  display: grid;
  gap: 0.8rem;
}

.igk-rods-line {
  padding: 0.55rem 0.7rem 0.65rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igk-rods-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-rods-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* lane hints */

.igk-rods-line--a {
  border-color: rgba(71, 211, 255, 0.95);
}

.igk-rods-line--b {
  border-color: rgba(123, 255, 139, 0.95);
}

.igk-rods-line--c {
  border-color: rgba(255, 179, 77, 0.95);
}

/* media mosaic */

.igk-rods-media {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: auto auto;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-rods-figure {
  margin: 0;
  max-width: 190px;
}

.igk-rods-figure--tall {
  grid-row: 1 / 3;
  max-width: 230px;
  justify-self: flex-start;
}

.igk-rods-image {
  border-radius: 16px;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.igk-rods-image:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 1),
    0 0 22px rgba(71, 211, 255, 0.85);
}

/* ===============================
   SECTION 8: AUGERS & HOLE TOOLS
   =============================== */

.igk-augers-inner {
  position: relative;
}

.igk-augers-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-augers-list {
  display: grid;
  gap: 0.8rem;
}

.igk-augers-line {
  padding: 0.55rem 0.7rem 0.65rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
}

.igk-augers-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.2rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(99, 142, 198, 0.95);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igk-augers-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

.igk-augers-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-augers-figure {
  margin: 0;
  max-width: 230px;
}

.igk-augers-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igk-augers-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 9: STORAGE BAND
   =============================== */

.igk-storage-inner {
  position: relative;
}

.igk-storage-band {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-storage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.igk-storage-card {
  padding: 0.6rem 0.7rem 0.7rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igk-storage-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-storage-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* color hints */

.igk-storage-card--crate {
  border-color: rgba(71, 211, 255, 0.95);
}

.igk-storage-card--bag {
  border-color: rgba(123, 255, 139, 0.95);
}

.igk-storage-card--pouch {
  border-color: rgba(255, 179, 77, 0.95);
}

.igk-storage-card--bucket {
  border-color: rgba(255, 86, 86, 0.95);
}

/* media */

.igk-storage-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-storage-figure {
  margin: 0;
  max-width: 230px;
}

.igk-storage-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igk-storage-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE FOR 7–9
   =============================== */

@media (max-width: 1024px) {
  .igk-rods-layout,
  .igk-augers-layout,
  .igk-storage-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-rods-media,
  .igk-augers-media,
  .igk-storage-media {
    justify-items: flex-start;
  }

  .igk-rods-figure--tall,
  .igk-augers-figure--small,
  .igk-storage-figure--small {
    transform: none;
  }
}

@media (max-width: 768px) {
  .igk-rods-layout,
  .igk-augers-layout,
  .igk-storage-band {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igk-rods-figure--tall {
    max-width: 210px;
  }

  .igk-rods-figure {
    max-width: 180px;
  }

  .igk-augers-figure {
    max-width: 210px;
  }

  .igk-augers-figure--small {
    max-width: 170px;
  }

  .igk-storage-figure {
    max-width: 210px;
  }

  .igk-storage-figure--small {
    max-width: 170px;
  }

  .igk-storage-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .igk-rods-figure,
  .igk-augers-figure,
  .igk-storage-figure {
    max-width: 200px;
  }

  .igk-rods-figure--tall {
    max-width: 200px;
  }
}
/* ===============================
   SECTION 10: LIGHT GRID BAR
   =============================== */

.igk-light-inner {
  position: relative;
}

.igk-light-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-light-bands {
  display: grid;
  gap: 0.8rem;
}

.igk-light-line {
  padding: 0.55rem 0.7rem 0.65rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igk-light-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.2rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px dashed rgba(99, 142, 198, 0.95);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igk-light-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* media mosaic */

.igk-light-media {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: auto auto;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-light-figure {
  margin: 0;
  max-width: 180px;
}

.igk-light-figure--tall {
  grid-row: 1 / 3;
  max-width: 230px;
  justify-self: flex-start;
}

.igk-light-image {
  border-radius: 16px;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.igk-light-image:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 1),
    0 0 22px rgba(71, 211, 255, 0.85);
}

/* ===============================
   SECTION 11: FUEL & POWER CUBES
   =============================== */

.igk-fuel-inner {
  position: relative;
}

.igk-fuel-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-fuel-list {
  display: grid;
  gap: 0.8rem;
}

.igk-fuel-line {
  padding: 0.55rem 0.7rem 0.65rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igk-fuel-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-fuel-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* subtle lane tint */

.igk-fuel-line--gas {
  border-color: rgba(255, 179, 77, 0.95);
}

.igk-fuel-line--elec {
  border-color: rgba(71, 211, 255, 0.95);
}

.igk-fuel-line--backup {
  border-color: rgba(123, 255, 139, 0.95);
}

/* fuel images */

.igk-fuel-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-fuel-figure {
  margin: 0;
  max-width: 220px;
}

.igk-fuel-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 12: PACKING CHECK STRIP
   =============================== */

.igk-pack-inner {
  position: relative;
}

.igk-pack-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-pack-list {
  display: grid;
  gap: 0.8rem;
}

.igk-pack-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: flex-start;
}

.igk-pack-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #ffffff, var(--ig-accent-amber));
  box-shadow:
    0 0 14px rgba(255, 179, 77, 0.9),
    0 0 0 3px rgba(5, 10, 19, 1);
  margin-top: 0.3rem;
}

.igk-pack-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-pack-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igk-pack-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-pack-figure {
  margin: 0;
  max-width: 220px;
}

.igk-pack-figure--small {
  max-width: 180px;
  transform: translateX(-12px);
}

.igk-pack-figure--sled {
  max-width: 220px;
}

.igk-pack-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE FOR 10–12
   =============================== */

@media (max-width: 1024px) {
  .igk-light-layout,
  .igk-fuel-layout,
  .igk-pack-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-light-media,
  .igk-fuel-media,
  .igk-pack-media {
    justify-items: flex-start;
  }

  .igk-light-figure--tall,
  .igk-pack-figure--small {
    transform: none;
  }
}

@media (max-width: 768px) {
  .igk-light-layout,
  .igk-fuel-layout,
  .igk-pack-layout {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igk-light-figure--tall {
    max-width: 210px;
  }

  .igk-light-figure {
    max-width: 180px;
  }

  .igk-fuel-figure {
    max-width: 210px;
  }

  .igk-pack-figure {
    max-width: 210px;
  }

  .igk-pack-figure--small,
  .igk-pack-figure--sled {
    max-width: 170px;
  }
}

@media (max-width: 480px) {
  .igk-light-figure,
  .igk-fuel-figure,
  .igk-pack-figure {
    max-width: 200px;
  }

  .igk-light-figure--tall {
    max-width: 200px;
  }
}
/* ===============================
   SECTION 13: LAYERS & BOOTS GRID
   =============================== */

.igk-wear-inner {
  position: relative;
}

.igk-wear-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-wear-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.igk-wear-card {
  padding: 0.6rem 0.7rem 0.7rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igk-wear-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-wear-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* lane tints */

.igk-wear-card--a {
  border-color: rgba(71, 211, 255, 0.95);
}

.igk-wear-card--b {
  border-color: rgba(123, 255, 139, 0.95);
}

.igk-wear-card--c {
  border-color: rgba(255, 179, 77, 0.95);
}

.igk-wear-card--boots {
  border-color: rgba(255, 86, 86, 0.95);
}

/* media */

.igk-wear-media {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: auto auto;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-wear-figure {
  margin: 0;
  max-width: 190px;
}

.igk-wear-figure--tall {
  grid-row: 1 / 3;
  max-width: 230px;
  justify-self: flex-start;
}

.igk-wear-image {
  border-radius: 16px;
}

/* ===============================
   SECTION 14: KIDS & GUESTS OVERLAY
   =============================== */

.igk-guests-inner {
  position: relative;
}

.igk-guests-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1.5fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-guests-grid {
  display: grid;
  gap: 0.8rem;
}

.igk-guests-card {
  padding: 0.6rem 0.7rem 0.7rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igk-guests-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-guests-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igk-guests-figure {
  margin: 0;
  max-width: 210px;
}

.igk-guests-figure--small {
  max-width: 190px;
}

.igk-guests-image {
  border-radius: 18px;
}

/* ===============================
   SECTION 15: DOCK & DRY
   =============================== */

.igk-dock-inner {
  position: relative;
}

.igk-dock-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-dock-copy {
  display: grid;
  gap: 0.8rem;
}

.igk-dock-line {
  padding: 0.2rem 0;
}

.igk-dock-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-dock-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* images */

.igk-dock-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-dock-figure {
  margin: 0;
  max-width: 220px;
}

.igk-dock-figure--small {
  max-width: 190px;
  transform: translateX(-12px);
}

.igk-dock-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE FOR 13–15
   =============================== */

@media (max-width: 1024px) {
  .igk-wear-layout,
  .igk-guests-layout,
  .igk-dock-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-wear-media,
  .igk-guests-layout,
  .igk-dock-media {
    justify-items: flex-start;
  }

  .igk-dock-figure--small {
    transform: none;
  }
}

@media (max-width: 768px) {
  .igk-wear-layout,
  .igk-guests-layout,
  .igk-dock-layout {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igk-wear-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-wear-figure--tall {
    max-width: 210px;
  }

  .igk-wear-figure {
    max-width: 180px;
  }

  .igk-guests-figure,
  .igk-guests-figure--small {
    max-width: 200px;
  }

  .igk-dock-figure {
    max-width: 210px;
  }

  .igk-dock-figure--small {
    max-width: 170px;
  }
}

@media (max-width: 480px) {
  .igk-wear-figure,
  .igk-guests-figure,
  .igk-dock-figure {
    max-width: 200px;
  }

  .igk-wear-figure--tall {
    max-width: 200px;
  }
}
/* ===============================
   SECTION 16: PRE-TRIP FLOW STRIP
   =============================== */

.igk-flow-inner {
  position: relative;
}

.igk-flow-band {
  margin-top: 2rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(71, 211, 255, 0.18), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

.igk-flow-step {
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igk-flow-step-number {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-text-muted);
}

.igk-flow-step-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-flow-step-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* ===============================
   SECTION 17: WALL OVERVIEW SHELF
   =============================== */

.igk-shelves-inner {
  position: relative;
}

.igk-shelves-layout {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr);
  gap: 1.7rem;
  align-items: center;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #151f32, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  overflow: hidden;
}

.igk-shelves-figure {
  margin: 0;
  max-width: 230px;
}

.igk-shelves-image {
  border-radius: 18px;
}

.igk-shelves-grid {
  display: grid;
  gap: 0.8rem;
}

.igk-shelves-card {
  padding: 0.6rem 0.7rem 0.7rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, #121f33, #040711);
  border: 1px solid rgba(62, 99, 152, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.95);
}

.igk-shelves-title {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--ig-text-main);
}

.igk-shelves-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ig-text-soft);
}

/* ===============================
   SECTION 18: NEXT KIT MOVES
   =============================== */

.igk-nextkits-inner {
  position: relative;
}

.igk-nextkits-panel {
  margin-top: 2.1rem;
  padding: 1.2rem 1.2rem 1.35rem;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, #131f33, #050913),
    linear-gradient(145deg, rgba(255, 179, 77, 0.22), transparent 60%);
  border: 1px solid rgba(74, 117, 179, 0.95);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) auto;
  gap: 1.8rem;
  align-items: center;
  overflow: hidden;
}

.igk-nextkits-main {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.igk-nextkits-title {
  margin: 0;
  font-family: "IGDisplay", system-ui, sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ig-text-main);
}

.igk-nextkits-text {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ig-text-soft);
}

.igk-nextkits-links {
  display: grid;
  gap: 0.6rem;
}

/* ссылки используют общий .ig-next-link из style.css */

.igk-nextkits-media {
  display: grid;
  gap: 0.7rem;
  justify-items: flex-end;
}

.igk-nextkits-figure {
  margin: 0;
  max-width: 210px;
}

.igk-nextkits-figure--small {
  max-width: 180px;
}

.igk-nextkits-image {
  border-radius: 16px;
}

/* ===============================
   RESPONSIVE FOR 16–18
   =============================== */

@media (max-width: 1024px) {
  .igk-flow-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .igk-shelves-layout,
  .igk-nextkits-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-nextkits-media {
    justify-items: flex-start;
  }
}

@media (max-width: 768px) {
  .igk-flow-band,
  .igk-shelves-layout,
  .igk-nextkits-panel {
    padding: 0.95rem 0.9rem 1.05rem;
    gap: 1.3rem;
  }

  .igk-flow-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-shelves-figure {
    max-width: 210px;
  }

  .igk-nextkits-figure {
    max-width: 200px;
  }

  .igk-nextkits-figure--small {
    max-width: 170px;
  }

  .igk-nextkits-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .igk-shelves-figure,
  .igk-nextkits-figure {
    max-width: 200px;
  }
}
/* SECTION 5: PRESET BUNDLES RAIL — FIX LAYOUT */

.igk-presets-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  align-items: stretch;
  max-width: 100%;
  overflow: visible; /* чтобы ничего не обрезалось по краям */
}

/* карточка — вертикальная колонка */
.igk-preset-card {
  display: flex;
  flex-direction: column;
}

/* тело карточки: картинка сверху, текст под ней */
.igk-preset-body {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* медиа не тянем шире контейнера */
.igk-preset-media {
  margin: 0;
  max-width: 100%;
}

/* картинка по центру, внутри лимита 350px */
.igk-preset-image {
  width: 100%;
  max-width: 350px;
  height: auto;
  margin: 0 auto;
}

/* адаптив: 2 карточки в ряд, затем 1 */
@media (max-width: 1024px) {
  .igk-presets-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .igk-presets-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .igk-preset-card {
    max-width: 430px;
    margin-inline: auto;
  }
}