/* =========================================================
   Content-section block — H2 + tekst + obrazek (powtarzalny)
   ========================================================= */
.content-section { padding-block: calc(var(--gap-section) / 2); }

.content-section__body { display: flex; flex-direction: column; }

/* Mobile-first: obrazek pod H2, przed tekstem */
.content-section__media { order: 1; }
.content-section__text { order: 2; }

.content-section__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.content-section__two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: var(--gap-h2-text);
}

@media (min-width: 768px) {
  .content-section__two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.platform-card {
  background: var(--color-card-bg);
  padding: var(--pad-card);
  clip-path: var(--clip-cut);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
}
.platform-card__specs { margin-block: 0.25rem; }
.platform-card__icon { width: 48px; height: 48px; object-fit: contain; }

/* Obrazy w treści zawsze zajmują pełną szerokość kontenera, jako osobny blok
   nad tekstem — bez układu dwukolumnowego (side-by-side), na żadnej szerokości ekranu. */
.content-section__media {
  width: 100%;
}
.content-section__media img {
  max-width: 100%;
}