[data-section-type="double"] {
  --hero-content-block-padding: 10px;
  --elements-gap: 20px;
  --buttons-gap: 10px;
  --buttons-min-width: 480px;

  @media (min-width: 750px) {
    --hero-content-block-padding: 30px;
    --elements-gap: 60px;
    --buttons-gap: 20px;
  }

  .hero__content {
    padding-block: var(--hero-content-block-padding);
    gap: var(--elements-gap);
  }

  .hero__button-group {
    flex-direction: column;
    gap: var(--buttons-gap);
  }

  .hero__title,
  .hero__button {
    margin: 0;
  }

  .hero__button {
    .btn {
      flex: 0 1 var(--buttons-min-width);
    }
  }
}