@layer page-banner {
  body:has(.page-banner) .site-header {
    margin-bottom: calc(-1 * var(--page-banner-menu-height, var(--header-height, 78px))) !important;
  }
  body:has(.page-banner) .shell {
    padding-top: 0 !important;
  }
  body:has(.page-banner) main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .page-banner,
  .page-banner *,
  .page-banner-context,
  .page-banner-context * {
    all: revert !important;
    box-sizing: border-box !important;
  }
  .page-banner::before,
  .page-banner::after,
  .page-banner *::before,
  .page-banner *::after {
    content: none !important;
  }
  .page-banner {
    position: relative !important;
    display: block !important;
    isolation: isolate !important;
    width: 100% !important;
    max-width: none !important;
    height: 75vh !important;
    height: 75dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    background: #173a4f !important;
    color: #fff !important;
    direction: inherit !important;
  }
  .page-banner__image {
    position: absolute !important;
    display: block !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    z-index: 0 !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
  .page-banner__shade {
    position: absolute !important;
    display: block !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: rgba(0, 0, 0, 0.58) !important;
    pointer-events: none !important;
  }
  .page-banner__visible {
    position: absolute !important;
    display: flex !important;
    top: var(--page-banner-menu-height, var(--header-height, 78px)) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    z-index: 2 !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
  }
  .page-banner__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: 12px !important;
    width: min(1040px, 100%) !important;
    margin: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .page-banner__eyebrow,
  .page-banner__title,
  .page-banner__subtitle {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    font-style: normal !important;
    direction: inherit !important;
  }
  .page-banner__eyebrow {
    font:
      700 16px/1.3 Arial,
      Helvetica,
      sans-serif !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-wrap: balance !important;
  }
  .page-banner__title {
    font:
      400 clamp(52px, 5vw, 68px) / 1.06 Georgia,
      "Times New Roman",
      serif !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
    text-wrap: balance !important;
  }
  .page-banner__subtitle {
    max-width: 920px !important;
    font:
      400 20px/1.35 Arial,
      Helvetica,
      sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-wrap: pretty !important;
  }
  .page-banner__title *,
  .page-banner__subtitle *,
  .page-banner__eyebrow * {
    font: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    letter-spacing: inherit !important;
    text-align: inherit !important;
  }
  .page-banner-context {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px 24px !important;
    width: min(1100px, calc(100% - 40px)) !important;
    margin: 24px auto !important;
    color: #173a4f !important;
    font:
      400 14px/1.5 Arial,
      Helvetica,
      sans-serif !important;
    text-align: center !important;
  }
  .page-banner-context a {
    color: #173a4f !important;
    font: inherit !important;
    text-decoration: underline !important;
  }
  html body[data-page="destination"][data-destination="andalusia"] .page-banner-context a {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  .page-banner-context .blog-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    color: inherit !important;
    font: inherit !important;
  }
  .page-banner-context .blog-meta * {
    color: inherit !important;
    font: inherit !important;
  }
  @media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    .page-banner {
      clip-path: inset(0) !important;
    }
    .page-banner__image {
      position: fixed !important;
      inset: calc(var(--page-banner-menu-height, var(--header-height, 78px)) - 12.5dvh) 0 auto !important;
      width: 100vw !important;
      height: calc(100vh - var(--page-banner-menu-height, var(--header-height, 78px))) !important;
      object-position: 50% 50% !important;
      transform: none !important;
    }
  }
  @media (max-width: 959px) {
    .page-banner {
      height: 75svh !important;
      clip-path: none !important;
      animation: none !important;
      transition: none !important;
    }
    .page-banner__image {
      position: absolute !important;
      inset: 0 !important;
      height: 100% !important;
      transform: none !important;
      animation: none !important;
      transition: none !important;
      will-change: auto !important;
    }
    .page-banner__visible {
      padding: 12px 20px !important;
    }
    .page-banner__eyebrow {
      font-size: 14px !important;
    }
    .page-banner__title {
      font-size: clamp(42px, 10vw, 54px) !important;
    }
    .page-banner__subtitle {
      font-size: 18px !important;
      line-height: 1.25 !important;
    }
    .page-banner__copy {
      gap: 10px !important;
    }
  }
  @media (max-width: 480px) {
    .page-banner__visible {
      padding: 10px 16px !important;
    }
  }
  @media (max-width: 480px) and (max-height: 700px) {
    .page-banner__visible {
      padding: 8px 16px !important;
    }
    .page-banner__copy {
      gap: 10px !important;
    }
    .page-banner__title {
      font-size: clamp(40px, 9.5vw, 50px) !important;
    }
    .page-banner__subtitle {
      font-size: 17px !important;
    }
  }
  @media (min-width: 960px) {
    body.blog-page[data-page="blog"] .page-banner__title {
      font-size: clamp(56px, 5.4vw, 74px) !important;
    }
  }
  @media (max-width: 959px) {
    body.blog-page[data-page="blog"] .page-banner__title {
      font-size: clamp(46px, 11vw, 60px) !important;
    }

  }

  .page-banner-transition {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
  .page-banner-transition__ornament {
    position: relative !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border: 1px solid #b19763 !important;
    transform: rotate(45deg) !important;
  }
  .page-banner-transition::before,
  .page-banner-transition::after {
    content: "" !important;
    display: block !important;
    width: clamp(48px, 9vw, 120px) !important;
    height: 1px !important;
    margin-inline: 12px !important;
    background: linear-gradient(90deg, transparent, rgba(177, 151, 99, 0.65)) !important;
  }
  .page-banner-transition::after {
    transform: scaleX(-1) !important;
  }
  @media (max-width: 959px) {
    .page-banner-transition {
      height: 40px !important;
    }
  }
}