:root {
  --contrastColor: #000;
  --contrastColorRGB: 0, 0, 0;
  --contrastColorInverted: #fff;
  --baseTransition: all .3s ease-in-out;
  --baseWidth: 92%;
  --maxWidthBig: 1500px;
}

.px-banner {
  container-type: inline-size;
  position: relative;
  min-height: 740px;
  display: flex;
  align-items: flex-end;
}
@container (width <=960px) {
  .px-banner {
    min-height: 400px;
  }
}
@container (width <=640px) {
  .px-banner {
    min-height: 250px;
  }
}
@container (width <=450px) {
  .px-banner {
    display: block;
  }
}
.px-banner.large-height {
  min-height: 820px;
}
@container (width <=1200px) {
  .px-banner.large-height {
    min-height: 600px;
  }
}
@container (width <=960px) {
  .px-banner.large-height {
    min-height: 400px;
  }
}
@container (width <=640px) {
  .px-banner.large-height {
    min-height: 250px;
  }
}
.px-banner > .image,
.px-banner > .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@container (width <=450px) {
  .px-banner > .image,
  .px-banner > .video {
    position: relative;
    top: auto;
    left: auto;
  }
}
.px-banner > .image::after,
.px-banner > .video::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(0deg, rgba(28, 28, 31, 0.8) 0%, rgba(28, 28, 31, 0) 94%);
}
@container (width <=450px) {
  .px-banner > .image::after,
  .px-banner > .video::after {
    content: none;
  }
}
.px-banner > .image img,
.px-banner > .image video,
.px-banner > .video img,
.px-banner > .video video {
  display: block;
  height: 100%;
  width: 100%;
  object-position: top;
  object-fit: cover;
}
.px-banner .text {
  position: relative;
  z-index: 1;
  margin: clamp(1.25rem, 0.0675675676rem + 5.9121621622vw, 5.625rem) clamp(3.125rem, 1.4358108108rem + 8.4459459459vw, 9.375rem);
  color: var(--contrastColorInverted);
  width: 50%;
  max-width: var(--maxWidthBig);
}
@container (width <=1200px) {
  .px-banner .text {
    margin: 50px 4%;
    width: 90%;
  }
}
@container (width <=450px) {
  .px-banner .text {
    background-color: var(--mainColorLight);
    padding: 30px 4%;
    margin: 0;
    width: 100%;
  }
}
.px-banner .text .text-inner .wp-block-buttons {
  margin-top: 30px;
  padding-top: 0;
}
.px-banner .text .text-inner > p {
  margin-top: 23px;
  padding-top: 0;
}
.px-banner .text .text-inner h1,
.px-banner .text .text-inner h2,
.px-banner .text .text-inner h3,
.px-banner .text .text-inner h4,
.px-banner .text .text-inner h5 {
  color: var(--contrastColorInverted);
}
.px-banner .text .text-inner > p {
  font-size: 17px;
}
.px-banner .text .wp-block-buttons {
  display: flex;
  gap: 25px;
  margin-top: 30px;
}
.px-banner .text .wp-block-buttons a {
  margin-top: 0;
}