body.banner-full-width {
  overflow-x: hidden;

  @container small (min-width: 0) {
    overflow-x: initial;
  }
}

.banner {
  width: 100vw;
  overflow: hidden;
  z-index: 0;
  position: relative;
  margin-left: calc(-1 * ((100vw - 100%) / 2));

  @container small (min-width: 0) {
    display: flex;
    align-items: stretch;
  }
}

.banner__contents {
  /* z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; */
  display: flex;
  align-items: center;
  justify-content: start;
  max-width: 100%;
}
body.banner-full-width .banner__contents {
  align-items: start;
}

.banner__container {
  padding: 0 var(--container-offset);
  width: var(--container-size);
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 80px;

  @container small (min-width: 0) {
    padding-bottom: 40px;
  }
}
body.banner-full-width .banner__container {
  margin-top: 280px;

  @container small (min-width: 0) {
    margin-top: 190px;
  }
}

.banner__column {
  width: min-content;
  min-width: 500px;

  display: flex;
  row-gap: calc(10px + 40 * var(--window-resize));
  flex-direction: column;

  @container small (min-width: 0) {
    width: 100%;
    min-width: auto;
  }
}

.banner__title {
  line-height: 1;
  font-weight: 300;
  font-size: calc(32px + 32 * var(--window-resize));
  color: var(--primary-accent);

  @container small (min-width: 0) {
    line-height: 1.2;
  }
}
.banner__text {
  font-weight: 300;
  font-size: calc(20px + 4 * var(--window-resize));
  color: var(--primary-accent);
}
.banner__html {
  font-weight: 300;
  color: var(--primary-accent);
  font-size: calc(14px + 4 * var(--window-resize));

  @container small (min-width: 0) {
    margin-top: 15px;
  }
}

.banner__contents + :is(picture, img) {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;

  @container small (min-width: 0) {
    position: relative;
    margin-left: 0;
    min-width: 100%;
    height: auto;
    transform: translateX(-100%);
  }
}
.banner__contents + picture img {
  object-fit: cover;
}