.grid-steps {
  display: grid;
  grid-row-gap: 4rem;
  grid-template-columns: 1fr; /* 📱 výchozí – vše pod sebou */
  align-items: stretch;
  padding: 5rem 2rem;
}

.grid-steps-5 {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  justify-items: stretch;
  grid-row-gap: 0.5rem;
}

.grid-step {
  background: #111;
  border: 1px solid #3f3f3f;
  display: flex;
  position: relative;
}

.step-number {
  position: absolute;
  top: -4rem;
  left: 2rem;
  z-index: 1;
  font-weight: bold;
  line-height: 100%;
  font-size: 8rem;
  color: var(--my-color-road-sign);
  pointer-events: none;
}

.step-img {
  position: absolute;
  top: -1rem;
  left: 2.5rem;
  z-index: 1;
  font-weight: bold;
  line-height: 100%;
  font-size: 4rem;
  color: var(--my-color-road-sign);
  pointer-events: none;
}

.step-content {
  color: white;
  padding: 4rem 1rem 1rem 2.5rem;
  text-align: left;
}

.step-title {
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
}

.step-desc{
  color: var(--gray);
  margin: 8px 0;
  font-size: 1rem;
}

/* Šipka mezi kroky */
.step-next {
  font-size: 4rem;
  color: var(--my-color-road-sign);
  display: grid;
  place-items: center;
  transform: rotate(90deg); /* 📱 směřuje dolů */
  transition: transform 0.3s ease;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

/* Responsivita: na mobilu svisle a šipky dolů */
@media (min-width: 768px){
  .grid-steps {
    display: grid;
    align-items: stretch;
    grid-column-gap: 1rem;
    grid-row-gap: 4rem;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 5rem 2rem;
  }

  .grid-steps-5 {
    grid-template-columns: 1fr auto 1fr auto 1fr; /* krok–šipka–krok–šipka–krok */
    grid-column-gap: 1rem;
    grid-row-gap: 4rem;
    justify-items: center;
  }

  .step-next {
    transform: rotate(0deg); /* vodorovná šipka */
  }
}