.banner {
  --image-height: 220px;
  background: var(--background, var(--colour-accent));
  color: var(--text, var(--colour-text));
  padding: var(--spacing);
}
.banner .title__pre {
  color: var(--primary, var(--colour-one));
}
.banner .title__main {
  color: var(--text, var(--colour-text));
}
.banner__content__button .button {
  border-color: var(--primary, var(--colour-one));
  color: var(--primary, var(--colour-one));
}
.banner__content__button .button:after {
  background: var(--primary, var(--colour-one));
}
.banner__content__button .button:hover {
  background: var(--primary, var(--colour-one));
}
.banner__image picture img {
  height: var(--image-height);
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.banner__content {
  margin-top: var(--spacing);
}
.banner__content__desc {
  margin-top: 20px;
}
.banner__content__button {
  margin-top: 20px;
}
@media (min-width: 576px) {
  .banner {
    --image-height: 288px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-align-items: center;
    align-items: center;
  }
  .banner__image, .banner__content {
    -webkit-flex: 1;
    flex: 1;
  }
  .banner__image {
    margin-left: var(--spacing);
  }
  .banner__content {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .banner {
    --image-height: 310px;
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }
}
@media (min-width: 1200px) {
  .banner {
    --image-height: 330px;
  }
}
@media (min-width: 1500px) {
  .banner {
    --image-height: 382px;
  }
}