.element-05 .views-field-field-photo {
  position: relative;
  z-index: 0;
  height: 100%;
}

.element-05 .views-field-field-photo * {
  height: 100%;
}

.element-05 .views-field-field-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.element-05.version-2 .views-field-field-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 8/5;
  object-fit: cover;
}

.element-05.version-2.shape-square .views-field-field-photo img {
  aspect-ratio: 1/1;
}

/* shape-rectangle is the legacy class name for this shape (kept for
   backwards compatibility with previously saved content and cached
   markup) - shape-landscape is the current name. */
.element-05.version-2.shape-rectangle .views-field-field-photo img,
.element-05.version-2.shape-landscape .views-field-field-photo img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

.element-05.version-2.shape-portrait .views-field-field-photo img {
  /* default — matches items-6, where narrow columns still look right at a
     strong 1/2 ratio; wider columns (fewer items per row) need a less
     extreme ratio, see the overrides below */
  aspect-ratio: 1/2;
  object-fit: cover;
}

.element-05.version-2.shape-portrait.items-5 .views-field-field-photo img {
  aspect-ratio: 1/1.7;
}

.element-05.version-2.shape-portrait.items-4 .views-field-field-photo img {
  aspect-ratio: 1/1.4;
}

.element-05.version-2.shape-portrait.items-1 .views-field-field-photo img,
.element-05.version-2.shape-portrait.items-2 .views-field-field-photo img,
.element-05.version-2.shape-portrait.items-3 .views-field-field-photo img {
  aspect-ratio: 1/1.1;
}

/* the ratios above are keyed on the desktop items-N column count; these
   mirror the per-row-N breakpoints below so a tile's ratio follows its
   *actual* visible column count as columns collapse on narrower viewports,
   instead of staying at a tall desktop ratio once there are only 1-2 wide
   columns left */
@media (max-width: 1200px) {
  .element-05.version-2.shape-portrait.items-6 .views-field-field-photo img {
    aspect-ratio: 1/1.7;
  }
}

@media (max-width: 900px) {
  .element-05.version-2.shape-portrait.items-6 .views-field-field-photo img,
  .element-05.version-2.shape-portrait.items-5 .views-field-field-photo img {
    aspect-ratio: 1/1.4;
  }

  .element-05.version-2.shape-portrait.items-4 .views-field-field-photo img {
    aspect-ratio: 1/1.1;
  }
}

@media (max-width: 700px) {
  .element-05.version-2.shape-portrait.items-6 .views-field-field-photo img,
  .element-05.version-2.shape-portrait.items-5 .views-field-field-photo img {
    aspect-ratio: 1/1.1;
  }
}

.element-05.version-2.rounded-corners-true .views-field-field-photo a {
  border-radius: 10px;
}

.element-05.version-2.rounded-corners-standard .views-field-field-photo a {
  border-radius: 6px;
}

.element-05.version-2.rounded-corners-true .wpt-gallery-container {
  max-width: calc(100% - 14px);
  margin: auto;
}

.element-05.version-2.rounded-corners-standard .wpt-gallery-container {
  max-width: calc(100% - 14px);
  margin: auto;
}

.element-05.version-2.rounded-corners-true .video-slider.wpt-gallery-container,
.element-05.version-2.rounded-corners-standard .video-slider.wpt-gallery-container {
  max-width: 100% !important;
}

.element-05.version-2 .wpt-container.wpt-gallery-container {
  width: 100% !important;
  max-width: unset !important;
}

.element-05 .views-field-field-photo a {
  display: block;
  overflow: hidden;
  position: relative;
}

#poststuff .element-05 .views-field-field-photo a {
  pointer-events: none;
}

.element-05 .views-field-field-photo a img {
  transition-duration: 400ms;
}

.element-05 .views-field-field-photo a:hover img {
  transform: scale(1.1);
}

.element-05 .views-field-field-photo a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #123;
  opacity: 0;
  z-index: 1;
  transition-duration: 400ms;
}

.element-05 .galleryset .views-field-field-photo a:hover::before,
.view-gallery .views-field-field-photo a:hover::before {
  opacity: 0.4;
}

.element-05
  .galleryset
  .views-field-field-photo
  a:not(.accommodation-item)::after,
.view-gallery .views-field-field-photo a:not(.accommodation-item)::after {
  content: "\f030";
  font-family: "Font Awesome 6 Pro";
  font-weight: 800;
  font-size: 2.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.25);
  color: #fff;
  z-index: 2;
  opacity: 0;
  transition-duration: 400ms;
  font-size: 40px !important;
}

.element-05 .views-field-field-photo a:hover::after {
  opacity: 0.8 !important;
  transform: translate(-50%, -50%) scale(1);
}

.element-05 .views-field-field-photo a.video-gallery-item::after {
  content: none;
}

.element-05 .views-field-field-photo .video-gallery-item__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.25);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  color: #fff !important;
  z-index: 2;
  opacity: 0.85;
  transition-duration: 400ms;
}

.element-05 .views-field-field-photo .video-gallery-item__play i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  line-height: 1;
  font-size: 1.5rem;
  color: #fff;
}

.element-05 .video-slider-item.is-playing .video-gallery-item__play {
  display: none;
}

.element-05 .views-field-field-photo a.video-gallery-item:hover .video-gallery-item__play,
.element-05 .views-field-field-photo a.video-slider-item:hover .video-gallery-item__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.element-05 .gallery-row {
  font-size: 0;
}

.element-05 .wpt-row {
  margin: 0 0px;
  justify-content: center;
  align-items: stretch;
}

.element-05.version-1 .wpt-row > * {
  padding: 15px;
}

.element-05.version-2.rounded-corners-true .gallery-row > * {
  padding: 7px;
}

.element-05.version-2.rounded-corners-standard .gallery-row > * {
  padding: 7px;
}

.element-05.version-2.rounded-corners-true .gallery-row.single-image > * {
  padding: 14px;
}

.element-05.version-2.rounded-corners-standard .gallery-row.single-image > * {
  padding: 14px;
}

.element-05 .per-row-6 > * {
  width: calc(100% / 6) !important;
}

.element-05 .per-row-5 > * {
  width: calc(100% / 5) !important;
}

.element-05 .per-row-4 > * {
  width: calc(100% / 4) !important;
}

.element-05 .per-row-3 > * {
  width: calc(100% / 3) !important;
}

.element-05 .per-row-2 > * {
  width: calc(100% / 2) !important;
}

.element-05 .per-row-1 > * {
  width: 100% !important;
}

@media (max-width: 1200px) {
  .element-05 .per-row-6 > * {
    width: calc(100% / 5) !important;
  }
}

@media (max-width: 900px) {
  .element-05 .per-row-6 > * {
    width: calc(100% / 4) !important;
  }

  .element-05 .per-row-5 > * {
    width: calc(100% / 4) !important;
  }

  .element-05 .per-row-4 > * {
    width: calc(100% / 3) !important;
  }

  .element-05 .per-row-3 > * {
    width: calc(100% / 2) !important;
  }

  .element-05 .per-row-2 > * {
    width: 100% !important;
  }
}

@media (max-width: 700px) {
  .element-05 .per-row-6 > * {
    width: calc(100% / 3) !important;
  }

  .element-05 .per-row-5 > * {
    width: calc(100% / 3) !important;
  }

  .element-05 .per-row-4 > * {
    width: calc(100% / 2) !important;
  }

  .element-05 .per-row-3 > * {
    width: 100% !important;
  }
}

@media (max-width: 500px) {
  .element-05 .per-row-6 > * {
    width: calc(100% / 2) !important;
  }

  .element-05 .per-row-5 > * {
    width: calc(100% / 2) !important;
  }

  .element-05 .per-row-4 > * {
    width: 100% !important;
  }
}

.element-05.version-2 .wpt-single,
.element-05.version-2 .wpt-pdf-container {
  position: relative;
  z-index: 1;
}

.element-05 .wpt-single img {
  height: auto !important;
}

.element-05.version-2.full-width-true .wpt-single img {
  max-width: 100%;
}

.element-05.version-2.full-width-false .wpt-single img {
  width: auto;
  max-width: 1200px;
}

.element-05.version-2.rounded-corners-true .wpt-single img {
  border-radius: 20px;
}

.element-05.version-2.rounded-corners-standard .wpt-single img {
  border-radius: 6px;
}

.element-05.version-2 .wpt-buttons-row {
  justify-content: center;
}

.element-05.version-2 .wpt-pdf-container {
  margin-top: 40px;
}

.element-05.version-2 .wpt-pdf-container iframe {
  margin: auto;
  max-width: 1230px;
  border: 0;
  width: calc(100% - 30px);
}

.element-05.version-2 .download-pdf .fa-file-pdf {
  margin-right: 10px;
}

.element-05.version-2.image-contained .wpt-gallery-container .field-content {
  position: relative;
  padding-bottom: 100%;
}

.element-05.version-2.image-contained .wpt-gallery-container .field-content a {
  height: 100%;
  display: block;
  width: 100%;
  position: absolute;
}

.element-05.version-2.image-contained
  .wpt-gallery-container
  .field-content
  img {
  object-fit: contain;
}

/* hide slides until Slick has actually laid out the track, to avoid a
   flash of unstyled/stacked content — same convention used by every other
   slick slider in this theme (element-02/04/06/07/08/12/13/17/20/21) */
.element-05 .video-slider:not(.slick-initialized) .wpt-contents {
  display: none;
}

.element-05 .video-slider .slick-list {
  margin: 0 calc(var(--video-slider-gap, 15px) / -2);
}

.element-05 .video-slider .slick-track {
  display: flex;
}

.element-05 .video-slider .slick-slide {
  height: auto;
  margin: 0 calc(var(--video-slider-gap, 15px) / 2);
}

.element-05 .video-slider .slick-slide > .wpt-contents {
  height: 100%;
}

.element-05 .video-slider-item {
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

.element-05 .video-slider-item__media {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 400% !important;
  /* a global `img, video { max-width: 100% }` reset (Chakra/React side of
     this theme) clamps the rendered width regardless of the `width` value
     above — max-width and width don't cascade against each other, the
     browser always caps the final size to max-width. <iframe> isn't
     targeted by that reset, which is why it wasn't affected. */
  max-width: none;
  height: 100%;
  transform: translateX(-38%);
  border: 0;
  display: none;
  /* the iframe/video is a silent, controls-free preview only — clicks
     should pass through to the Fancybox link underneath, not be
     swallowed by the embedded player (iframes don't bubble clicks) */
  pointer-events: none;
}

.element-05 .video-slider-item.is-playing .video-slider-item__media {
  display: block;
}

.element-05 .video-slider-item.is-playing .video-slider-item__poster {
  opacity: 0;
}
