/* acf/homebanner */

.oxa-home-banner { position: relative; width: 100%; }

.oxa-home-banner__desktop { display: none; position: relative; }
.oxa-home-banner__mobile  { position: relative; }

.oxa-home-banner__images { display: flex; width: 100%; }
.oxa-home-banner__images .oxa-home-banner__image { width: 50%; }

.oxa-home-banner__image { position: relative; margin: 0; }
.oxa-home-banner__image img { width: 100%; height: auto; }
.oxa-home-banner__image::after {
  content: "";
  position: absolute; inset: 0;
  background: #000000;
  opacity: .4;
}

.oxa-home-banner__copy {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.oxa-home-banner__mobile .oxa-home-banner__copy { inset: 8px; }

/* SOLOS h1 (parent theme): same size on mobile and desktop. */
.oxa-home-banner__headline h1 {
  margin: 0 0 .5407911001em;
  font-size: 2.617924em;
  font-weight: 300;
  line-height: 1.214;
  letter-spacing: -1px;
  color: #ffffff;
}
.oxa-home-banner__headline strong { font-weight: 600; }
/* SOLOS wrapped the mobile headline in <h1 class="px-5 mt-5">; the browser closes
   that h1 before the headline's own h1s, so it stays empty: the headline gets
   no side padding, only the empty h1's 20px top + 10.8px bottom margin above it. */
.oxa-home-banner__headline--mobile { margin-top: 30.816px; }

/* No hover colour change in SOLOS. */
.oxa-home-banner__button,
.oxa-home-banner__button:hover {
  display: inline-block;
  color: #ffffff;
  text-decoration: underline;
  border-radius: .25rem;
}
.oxa-home-banner__mobile .oxa-home-banner__button { margin-top: 16px; padding: 8px 16px; }

@media (min-width: 768px) {
  .oxa-home-banner { padding: 4px; }
  .oxa-home-banner__desktop { display: block; }
  .oxa-home-banner__mobile  { display: none; }
}