.step-details {
  border: 1px solid var(--thin-border-color);
  background: var(--background-light-color);
  padding-block: var(--spacing-medium);
  display: grid;
  grid-template-columns: 1fr;

  @media (width >= 768px) {
    padding: 0 0 0 var(--container-margin);
    width: 100%;
    height: auto;
    grid-template-columns: 17.479% repeat(3, 27.6149%);
    grid-template-rows: auto auto;
  }

  @media (width >= 1024px) {
    grid-template-columns: 20.8126% repeat(3, 26.3764%);
  }

  .step-details__title {
    margin-bottom: var(--sizing-xl);

    @media (width >= 768px) {
      margin: var(--sizing-l) 0 0;
    }

    @media (width >= 1024px) {
      margin: 50px 0 0;
    }

    & > * {
      color: var(--schemes-on-surface);
      font-feature-settings: var(--font-settings);
      font-size: var(--fs-xxlarge);
      font-weight: var(--fw-400);
      line-height: 3.8rem;

      @media (width >= 768px) {
        color: var(--neutrals-sub-texts-paragraphs);
        font-size: var(--fs-xlarge);
        line-height: 3.2rem;
      }

      @media (width >= 1024px) {
        font-size: var(--fs-xxxlarge);
        line-height: 5.6rem;
        grid-column: 1 / span 2;
        grid-row: 1;
      }
    }
  }

  .step-details__cells {
    background: var(--background-dark-blue-color);
    transition: background 0.3s ease;
    padding: var(--spacing-medium);
    display: flex;
    flex-direction: column;
    color: var(--tertiary-color);
    border: 1px solid var(--background-dark-blue-color);

    &:not(:last-child) {
      margin-bottom: var(--sizing-m);

      @media (width >= 768px) {
        margin-bottom: 0;
      }
    }

    @media (width >= 768px) {
      padding: var(--spacing-xbig) var(--sizing-xl);
    }

    @media (width >= 1200px) {
      padding: 70px var(--spacing-xbig);
    }

    .step-details__cells-number {
      margin-bottom: var(--sizing-xl);
      font-size: var(--fs-xxlarge);
      font-weight: var(--fw-600);
      line-height: var(--lh-xlarge);

      @media (width >= 768px) {
        font-size: var(--fs-xlarge);
        font-weight: var(--fw-400);
        line-height: 1.7rem;
      }

      @media (width >= 1024px) {
        font-size: var(--fs-xxxlarge);
        line-height: 3rem;
        margin-bottom: var(--spacing-xxbig);
      }
    }

    .step-details__cells-description {
      margin-top: 12px;

      @media (width >= 768px) {
        margin-top: 9px;
      }

      @media (width >= 1024px) {
        margin-top: var(--sizing-m);
      }
    }

    .step-details__cells-description > * {
      font-weight: var(--fw-400);
      font-size: var(--fs-small);
      line-height: var(--lh-medium);

      @media (width >= 768px) {
        color: var(--paragraph-text-color);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-400);
        line-height: var(--lh-normal);
      }

      @media (width >= 1024px) {
        font-weight: var(--fw-500);
        font-size: var(--fs-medium);
      }
    }

    &:hover,
    &:active,
    &:focus {
      cursor: pointer;
      background: var(--primary-color);
      border: 1px solid var(--primary-color);

      .step-details__cells-description {
        color: var(--tertiary-color);
      }
    }

    @media (width >= 768px) {
      margin-bottom: 0;
    }

    .step-details__cells-title > * {
      font-size: var(--fs-large);
      font-weight: var(--fw-400);
      line-height: var(--lh-large);

      @media (width >= 768px) {
        font-size: var(--fs-medium);
        line-height: var(--line-height-body-low);
      }

      @media (width >= 1024px) {
        font-size: var(--fs-xlarge);
        font-weight: var(--fw-400);
        line-height: var(--lh-xlarge);
      }
    }
  }
}

@media (width >= 768px) {
  .cells1 {
    grid-column: 3;
    grid-row: 1;
  }

  .cells2 {
    grid-column: 4;
    grid-row: 1;
  }

  .cells3 {
    grid-column: 2;
    grid-row: 2;
  }

  .cells4 {
    grid-column: 3;
    grid-row: 2;
  }

  .cells5 {
    grid-column: 4;
    grid-row: 2;
  }
}