.banner {
  margin: 6rem 2rem;
  color: #333;
}
.banner__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.banner__inner img {
  width: 100%;
  margin: 0px auto;
}

@media (min-width: 1024px) {
  .banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
  }
  .banner__inner img {
    max-width: 50%;
  }
  .banner__inner .banner__text {
    padding: 40px;
  }
  .banner.image-left-text-right img {
    order: 1;
  }
  .banner.image-left-text-right .banner__text {
    order: 2;
  }
  .banner.image-right-text-left img {
    order: 2;
  }
  .banner.image-right-text-left .banner__text {
    order: 1;
  }
}