/* SERVICES PAGE SPECIFIC */

/* базовый фон для второй страницы */
.gp-sv-hero,
.gp-sv-flow,
.gp-sv-oil {
  position: relative;
}

/* SECTION 1 – HERO */

.gp-sv-hero {
  background: radial-gradient(circle at top left, #1b2354, #050714 70%);
}

.gp-sv-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: center;
}

.gp-page-title {
  margin: 0 0 14px;
  font-size: 30px;
  letter-spacing: 0.03em;
}

.gp-sv-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.gp-sv-hero-pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(154, 160, 198, 0.6);
  font-size: 12px;
  color: var(--gp-text-muted);
  background: rgba(5, 7, 20, 0.9);
}

/* матрица пакетов */

.gp-sv-hero-matrix {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gp-sv-hero-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gp-sv-hero-row--wide {
  grid-template-columns: minmax(0, 1fr);
}

.gp-sv-hero-card {
  position: relative;
  padding: 12px 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.8);
}

.gp-sv-hero-card--plus {
  border-color: rgba(255, 216, 107, 0.9);
}

.gp-sv-hero-card--fleet {
  border-style: dashed;
}

.gp-sv-hero-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.gp-sv-hero-card-title {
  margin: 0;
  font-size: 16px;
}

.gp-sv-hero-card-tag {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(154, 160, 198, 0.6);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-text-muted);
}

.gp-sv-hero-card-tag--accent {
  border-color: rgba(255, 216, 107, 0.9);
  color: var(--gp-accent-yellow);
}

.gp-sv-hero-card-text {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--gp-text-soft);
}

.gp-sv-hero-card-thumb {
  display: flex;
  justify-content: flex-start;
}

.gp-sv-hero-card-thumb--wide {
  justify-content: center;
}

.gp-img--sv-hero {
  max-width: 220px; /* < 350px */
}

.gp-img--sv-hero-wide {
  max-width: 260px; /* < 350px */
}

/* hover эффект */

.gp-sv-hero-card:hover {
  border-color: rgba(53, 225, 255, 0.9);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.9);
}

/* SECTION 2 – SERVIS FLOW */

.gp-sv-flow {
  background: radial-gradient(circle at top right, #181f4a, #050714 70%);
}

.gp-sv-flow-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gp-sv-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gp-sv-flow-step {
  padding: 10px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(140deg, #141b46, #050714);
}

.gp-sv-flow-step-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.gp-sv-flow-index {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gp-text-muted);
}

.gp-sv-flow-title {
  margin: 0;
  font-size: 14px;
}

.gp-sv-flow-text {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--gp-text-soft);
}

.gp-sv-flow-thumb {
  display: flex;
  justify-content: flex-start;
}

.gp-img--sv-flow {
  max-width: 200px; /* < 350px */
}

/* SECTION 3 – OIL SERVICE */

.gp-sv-oil {
  background: radial-gradient(circle at bottom, #171f4a, #050714 70%);
}

.gp-sv-oil-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.gp-sv-oil-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.gp-sv-oil-main,
.gp-sv-oil-side {
  border-radius: 22px;
  padding: 8px;
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
}

.gp-img--sv-oil-main {
  max-width: 280px;
}

.gp-img--sv-oil-side {
  max-width: 200px;
}

/* ========== ADAPTIVE ========== */

@media (max-width: 1024px) {
  .gp-sv-hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  }

  .gp-sv-oil-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .gp-sv-flow-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .gp-sv-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* порядок: сначала текст, потом карточки */
  .gp-sv-hero-copy {
    order: 0;
  }

  .gp-sv-hero-matrix {
    order: 1;
  }

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

  .gp-sv-oil-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .gp-sv-oil-media {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .gp-page-title {
    font-size: 24px;
  }

  .gp-sv-hero-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .gp-img--sv-hero,
  .gp-img--sv-hero-wide {
    max-width: 230px;
  }

  .gp-img--sv-flow {
    max-width: 200px;
  }

  .gp-img--sv-oil-main {
    max-width: 240px;
  }

  .gp-img--sv-oil-side {
    max-width: 180px;
  }
}
/* ========== SECTION 4: BRAKE SERVICE ========== */

.gp-sv-brake {
  background: radial-gradient(circle at top left, #161c46, #050714 70%);
}

.gp-sv-brake-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.gp-sv-brake-list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--gp-text-soft);
}

.gp-sv-brake-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.gp-sv-brake-main,
.gp-sv-brake-side {
  border-radius: 22px;
  padding: 8px;
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
}

.gp-img--sv-brake-main {
  max-width: 280px;
}

.gp-img--sv-brake-side {
  max-width: 200px;
}

/* ========== SECTION 5: ELECTRONICS ========== */

.gp-sv-electro {
  background: radial-gradient(circle at top right, #181f4a, #050714 70%);
}

.gp-sv-electro-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gp-sv-electro-modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gp-sv-electro-card {
  padding: 10px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(140deg, #141b46, #050714);
}

.gp-sv-electro-title {
  margin: 0 0 4px;
  font-size: 14px;
}

.gp-sv-electro-text {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--gp-text-soft);
}

.gp-sv-electro-thumb {
  display: flex;
  justify-content: flex-start;
}

.gp-img--sv-electro {
  max-width: 180px;
}

/* ========== SECTION 6: COMBO PACKS ========== */

.gp-sv-combo {
  background: radial-gradient(circle at bottom, #171f4a, #050714 70%);
}

.gp-sv-combo-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gp-sv-combo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gp-sv-combo-card {
  padding: 10px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
}

.gp-sv-combo-title {
  margin: 0 0 4px;
  font-size: 14px;
}

.gp-sv-combo-text {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--gp-text-soft);
}

.gp-sv-combo-thumb {
  display: flex;
  justify-content: flex-start;
}

.gp-img--sv-combo {
  max-width: 200px;
}
@media (max-width: 768px) {
  .gp-sv-brake-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* текст сверху, картинки снизу */
  .gp-sv-brake-copy {
    order: 0;
  }

  .gp-sv-brake-media {
    order: 1;
    align-items: center;
  }

  .gp-sv-electro-modules,
  .gp-sv-combo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .gp-img--sv-brake-main {
    max-width: 240px;
  }

  .gp-img--sv-brake-side {
    max-width: 180px;
  }

  .gp-img--sv-electro {
    max-width: 190px;
  }

  .gp-img--sv-combo {
    max-width: 200px;
  }
}
/* ========== SECTION 7: SUSPENSION ========== */

.gp-sv-suspension {
  background: radial-gradient(circle at top left, #151c46, #050714 70%);
}

.gp-sv-suspension-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.gp-sv-suspension-list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--gp-text-soft);
}

.gp-sv-suspension-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.gp-sv-suspension-main,
.gp-sv-suspension-side {
  border-radius: 22px;
  padding: 8px;
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
}

.gp-img--sv-suspension-main {
  max-width: 280px; /* < 350px */
}

.gp-img--sv-suspension-side {
  max-width: 220px; /* < 350px */
}

/* ========== SECTION 8: CLIMATE ========== */

.gp-sv-climate {
  background: radial-gradient(circle at top right, #181f4a, #050714 70%);
}

.gp-sv-climate-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.gp-sv-climate-list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--gp-text-soft);
}

.gp-sv-climate-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.gp-sv-climate-main,
.gp-sv-climate-side {
  border-radius: 22px;
  padding: 8px;
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
}

.gp-img--sv-climate-main {
  max-width: 260px;
}

.gp-img--sv-climate-side {
  max-width: 200px;
}

/* ========== SECTION 9: TYRE SERVICE ========== */

.gp-sv-tyre {
  background: radial-gradient(circle at bottom, #171f4a, #050714 70%);
}

.gp-sv-tyre-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gp-sv-tyre-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gp-sv-tyre-tile {
  padding: 10px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(145deg, #141b46, #050714);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
}

.gp-sv-tyre-title {
  margin: 0 0 4px;
  font-size: 14px;
}

.gp-sv-tyre-text {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--gp-text-soft);
}

.gp-sv-tyre-thumb {
  display: flex;
  justify-content: flex-start;
}

.gp-img--sv-tyre {
  max-width: 200px;
}
@media (max-width: 768px) {
  .gp-sv-suspension-inner,
  .gp-sv-climate-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* текст сверху, картинки снизу */
  .gp-sv-suspension-copy,
  .gp-sv-climate-copy {
    order: 0;
  }

  .gp-sv-suspension-media,
  .gp-sv-climate-panel {
    order: 1;
    align-items: center;
  }

  .gp-sv-tyre-track {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .gp-img--sv-suspension-main {
    max-width: 240px;
  }

  .gp-img--sv-suspension-side {
    max-width: 190px;
  }

  .gp-img--sv-climate-main {
    max-width: 230px;
  }

  .gp-img--sv-climate-side {
    max-width: 180px;
  }

  .gp-img--sv-tyre {
    max-width: 200px;
  }
}
/* ========== SECTION 10: ENGINE DIAGNOSTICS ========== */

.gp-sv-engine {
  background: radial-gradient(circle at top left, #181f4a, #050714 70%);
}

.gp-sv-engine-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.gp-sv-engine-list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--gp-text-soft);
}

.gp-sv-engine-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.gp-sv-engine-main,
.gp-sv-engine-card {
  border-radius: 22px;
  padding: 8px;
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
}

.gp-sv-engine-row {
  display: flex;
  gap: 10px;
}

.gp-img--sv-engine-main {
  max-width: 280px; /* < 350px */
}

.gp-img--sv-engine-small {
  max-width: 160px; /* < 350px */
}

/* ========== SECTION 11: DETAILING ========== */

.gp-sv-detail {
  background: radial-gradient(circle at top right, #151c46, #050714 70%);
}

.gp-sv-detail-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.gp-sv-detail-list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--gp-text-soft);
}

.gp-sv-detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.gp-sv-detail-main,
.gp-sv-detail-side {
  border-radius: 22px;
  padding: 8px;
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
}

.gp-img--sv-detail-main {
  max-width: 280px;
}

.gp-img--sv-detail-side {
  max-width: 200px;
}

/* ========== SECTION 12: SUBSCRIPTIONS ========== */

.gp-sv-subscribe {
  background: radial-gradient(circle at bottom, #171f4a, #050714 70%);
}

.gp-sv-subscribe-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gp-sv-subscribe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gp-sv-sub-card {
  padding: 10px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
}

.gp-sv-sub-title {
  margin: 0 0 4px;
  font-size: 14px;
}

.gp-sv-sub-text {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--gp-text-soft);
}

.gp-sv-sub-thumb {
  display: flex;
  justify-content: flex-start;
}

.gp-img--sv-sub {
  max-width: 200px;
}
@media (max-width: 768px) {
  .gp-sv-engine-inner,
  .gp-sv-detail-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* сначала текст, потом картинки */
  .gp-sv-engine-copy,
  .gp-sv-detail-copy {
    order: 0;
  }

  .gp-sv-engine-media,
  .gp-sv-detail-gallery {
    order: 1;
    align-items: center;
  }

  .gp-sv-subscribe-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gp-sv-engine-row {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .gp-img--sv-engine-main {
    max-width: 240px;
  }

  .gp-img--sv-engine-small {
    max-width: 150px;
  }

  .gp-img--sv-detail-main {
    max-width: 240px;
  }

  .gp-img--sv-detail-side {
    max-width: 180px;
  }

  .gp-img--sv-sub {
    max-width: 200px;
  }
}
/* ========== SECTION 13: NETWORK PROFILE ========== */

.gp-sv-network {
  background: radial-gradient(circle at top left, #151c46, #050714 70%);
}

.gp-sv-network-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.gp-sv-network-list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--gp-text-soft);
}

.gp-sv-network-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.gp-sv-network-main,
.gp-sv-network-side {
  border-radius: 22px;
  padding: 8px;
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
}

.gp-img--sv-network-main {
  max-width: 280px; /* < 350px */
}

.gp-img--sv-network-side {
  max-width: 200px; /* < 350px */
}

/* ========== SECTION 14: TAXI LINE ========== */

.gp-sv-taxi {
  background: radial-gradient(circle at top right, #181f4a, #050714 70%);
}

.gp-sv-taxi-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gp-sv-taxi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gp-sv-taxi-card {
  padding: 10px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(140deg, #141b46, #050714);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
}

.gp-sv-taxi-title {
  margin: 0 0 4px;
  font-size: 14px;
}

.gp-sv-taxi-text {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--gp-text-soft);
}

.gp-sv-taxi-thumb {
  display: flex;
  justify-content: flex-start;
}

.gp-img--sv-taxi {
  max-width: 210px;
}

/* ========== SECTION 15: NIGHT SERVICE ========== */

.gp-sv-night {
  background: radial-gradient(circle at bottom, #171f4a, #050714 70%);
}

.gp-sv-night-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.gp-sv-night-list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--gp-text-soft);
}

.gp-sv-night-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.gp-sv-night-main,
.gp-sv-night-side {
  border-radius: 22px;
  padding: 8px;
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
}

.gp-img--sv-night-main {
  max-width: 260px;
}

.gp-img--sv-night-side {
  max-width: 200px;
}

/* ========== SECTION 16: PLANNING ========== */

.gp-sv-planning {
  background: radial-gradient(circle at top left, #181f4a, #050714 70%);
}

.gp-sv-planning-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gp-sv-planning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gp-sv-planning-card {
  border-radius: 22px;
  padding: 8px;
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
}

.gp-img--sv-planning-main {
  max-width: 260px;
}

.gp-img--sv-planning-side {
  max-width: 200px;
}

/* ========== SECTION 17: CTA ========== */

.gp-sv-cta {
  background: radial-gradient(circle at bottom, #151c46, #050714 70%);
}

.gp-sv-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

.gp-sv-cta-list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--gp-text-soft);
}

.gp-sv-cta-media {
  display: flex;
  justify-content: flex-end;
}

.gp-sv-cta-card {
  border-radius: 22px;
  padding: 8px;
  background: radial-gradient(circle at 0 0, #252f66, #050714);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.85);
}

.gp-img--sv-cta {
  max-width: 240px;
}
@media (max-width: 768px) {
  .gp-sv-network-inner,
  .gp-sv-night-inner,
  .gp-sv-cta-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* сначала текст, потом изображения */
  .gp-sv-network-copy,
  .gp-sv-night-copy,
  .gp-sv-cta-copy {
    order: 0;
  }

  .gp-sv-network-media,
  .gp-sv-night-media,
  .gp-sv-cta-media {
    order: 1;
    align-items: center;
    justify-content: center;
  }

  .gp-sv-taxi-grid,
  .gp-sv-planning-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gp-sv-cta-card {
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .gp-img--sv-network-main {
    max-width: 240px;
  }

  .gp-img--sv-network-side {
    max-width: 180px;
  }

  .gp-img--sv-taxi {
    max-width: 210px;
  }

  .gp-img--sv-night-main {
    max-width: 230px;
  }

  .gp-img--sv-night-side {
    max-width: 180px;
  }

  .gp-img--sv-planning-main {
    max-width: 230px;
  }

  .gp-img--sv-planning-side {
    max-width: 180px;
  }

  .gp-img--sv-cta {
    max-width: 220px;
  }
}