.px-infobox {
  position: relative;
  container-type: inline-size;
}
.px-infobox a {
  color: currentColor;
}
.px-infobox a:hover {
  color: var(--mainColor);
}
.px-infobox-inner {
  max-width: var(--pageLimit);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 5px;
}
@container (width <= 1024px) {
  .px-infobox-inner {
    flex-direction: column;
  }
}
.px-infobox-inner .col {
  width: 100%;
  box-sizing: content-box;
}
@container (width <= 1024px) {
  .px-infobox-inner .col {
    margin: 0 !important;
    width: 100%;
  }
}
.px-infobox-inner .col.text {
  background-color: var(--backgroundColor);
  color: var(--contrastColorInverted);
  position: relative;
}
@container (width <= 1304px) {
  .px-infobox-inner .col.text {
    width: 50%;
  }
}
@container (width > 1024px) {
  .px-infobox-inner .col.text {
    margin-top: 50px;
  }
}
@container (width <= 1024px) {
  .px-infobox-inner .col.text {
    width: 100%;
  }
}
.px-infobox-inner .col.text .text-inner {
  max-width: 842px;
}
@container (width > 1024px) {
  .px-infobox-inner .col.text .text-inner {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
@container (width <= 1024px) {
  .px-infobox-inner .col.text .text-inner {
    padding: 20px 0;
    max-width: var(--maxWidth);
    width: var(--baseWidth);
    margin-left: auto;
    margin-right: auto;
  }
}
.px-infobox-inner .col.image {
  max-width: 710px;
  max-height: 1000px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@container (width <= 1304px) {
  .px-infobox-inner .col.image {
    width: 50%;
  }
}
@container (width <= 1024px) {
  .px-infobox-inner .col.image {
    max-width: unset;
    margin: 0 !important;
    width: 100%;
  }
  .px-infobox-inner .col.image img {
    height: 300px;
  }
}
@container (width > 1024px) {
  .px-infobox-inner .col.image img {
    position: absolute;
    height: 100%;
  }
}
.px-infobox-inner .col.image img {
  width: 100%;
  object-fit: cover;
}
@container (width > 1024px) {
  .px-infobox.imageposition-left .text {
    padding-left: 50px;
    padding-right: max(4%, (100% - var(--maxWidth)) / 2);
  }
  .px-infobox.imageposition-right .text {
    padding-right: 50px;
    padding-left: max(4%, (100% - var(--maxWidth)) / 2);
  }
  .px-infobox.imageposition-right .image {
    order: 1;
  }
}
.px-infobox .videoImage {
  cursor: pointer;
  border: none;
}
.px-infobox .videoImage:hover:before, .px-infobox .videoImage:hover:after {
  transform: scale(1.1);
}
.px-infobox .videoImage:before, .px-infobox .videoImage:after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 1;
  transition: 0.3s transform ease;
}
.px-infobox .videoImage:before {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 100%;
}
.px-infobox .videoImage:after {
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play" viewBox="0 0 16 16"><path d="M10.804 8 5 4.633v6.734zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696z"/></svg>');
  mask-size: 80%;
  background-color: var(--mainColor);
  mask-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.px-infobox .videoWrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}
.px-infobox .videoWrapper video {
  max-width: 100%;
  max-height: 100%;
}
.px-infobox .videoWrapper[data-active=true] {
  padding: 10vw;
}
.px-infobox .videoWrapper[data-active=false] {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
}