.page-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--top-gap) var(--x-gap) 44px;
  margin: -88px auto 30px auto;

  .image-wrapper {
    position: relative;

    img {
      position: relative; /* Changed from absolute */
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: cover;
      aspect-ratio: 1 / 1; /* Adjust this to match your image's aspect ratio */
      opacity: 0;
      animation: fadeIn 3s forwards;
      /* max-width: 617px; */
    }
  }

  .bottom-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(
      transparent,
      color-mix(in srgb, white 70%, transparent)
    );
  }

  .bg-bottom-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
      transparent,
      color-mix(in srgb, white 60%, white)
    );
  }

  .bg-image-wrapper {
    inset: 0;
    position: absolute;
    z-index: 0;
    /* overflow: hidden; */

    .bg-image-container {
      filter: blur(8px);
      height: calc(100% + 48px);
      inset: -24px;
      width: calc(100% + 48px);

      img {
        /* animation: bm-shimmer-loading-animation 2s infinite; */
        aspect-ratio: 1 / 1; /* Adjust this to match your image's aspect ratio */
        display: block;
        font-size: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        /* filter: blur(20px); */
        transition: opacity 0.1s;
        opacity: 0.2;
        pointer-events: none;
        background: none;
        height: 100%;
        inset: 0;
        object-fit: cover;
        position: absolute;
        width: 100%;
        background-position: 0;
        transform: scale(1.1);
        mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1),
          rgba(0, 0, 0, 0)
        );
        animation: move-bg-image 3s forwards ease-in-out;
      }
    }
  }

  .title-wrapper {
    position: absolute;
    bottom: 15px;
    z-index: 1;
    color: #000;

    h1 {
      font-size: 52px;
      animation: fadeIn 3s forwards;
    }
  }
}

@media (min-width: 768px) {
  .page-banner {
    .image-wrapper {
      img {
        aspect-ratio: 21/9;
        max-width: unset;
      }
    }

    .content {
      bottom: 8px;

      h1 {
        font-size: 64px;
      }
    }
  }
}


@media (min-width: 1024px) {
  .page-banner {
    .title-wrapper {
      bottom: 10px;
      h1 {
        font-size: 64px;
      }
    }
  }
}

@media (min-width: 1440px) {
  .page-banner {
    .title-wrapper {
      bottom: -5px;

      h1 {
        font-size: 88px;
      }
    }
    .content {
      bottom: -5px;

      h1 {
        font-size: 88px;
      }
    }
  }
}

@media (min-width: 1900px) {
  .page-banner {
    /* max-height: 822px; */
    .content {
      bottom: -15px;

      h1 {
        font-size: 104px;
      }
    }
  }
}