.banner {
  height: var(--size-26);
}

.banner h1 {
  display: flex;
  background: linear-gradient(
    180deg,
    var(--color-cream-150) 0%,
    var(--color-purple-100) 100%
  );
  color: var(--color-orange-550);
  height: var(--size-26);
  padding-inline-start: var(--size-12);
  align-items: center;
  width: 100%;
}

.banner figure {
  display: flex;
  align-items: center;
  height: var(--size-29);
  overflow: hidden;
  width: 100%;
}

.banner figure img {
  height: auto;
  width: 100%;
}

@media (width >= 90rem) {
  .banner {
    display: flex;
    height: var(--size-30);
  }

  .banner h1 {
    height: var(--size-30);
  }

  .banner:has(figure) h1 {
    height: var(--size-30);
    padding-inline-start: var(--size-27);
    width: 50%;
  }

  .banner figure {
    height: var(--size-30);
    width: 50%;
  }
}