/* Photo slider */
.element-02 .view-gallery {
  margin-top: 2em;
}

.element-02 .view-gallery * {
  font-size: 0;
}

.element-02 .view-gallery .views-field-field-photo {
  display: none;
}

/* display: block avoids a Chrome hit-testing gap on wide slides; matches element-05's anchor. */
.element-02.version-2.image-contained .views-field-field-photo a {
  display: block;
}

.element-02 .fal {
  right: 25px;
  position: absolute;
  z-index: 1111;
  top: 50%;
  font-size: 40px;
  color: white;
  transform: translateY(-50%);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: 0.2s ease;
  cursor: pointer;
  width: 40px;
  text-align: center;
}

.element-02 .fa-chevron-right {
  right: 25px;
}

.element-02 .fa-chevron-left {
  left: 25px;
}

.element-02 .slick-prev {
  left: 25px;
  z-index: 1;
}

.element-02:hover .fal {
  opacity: 1;
}

.element-02 img {
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 3/2 !important;
}

.element-02 .slick-slide {
  border: 1px solid transparent !important;
}

.element-02.version-2 .slick-slide {
  border: 0px solid transparent !important;
}

.element-02.version-2:not(.image-contained) .slick-slide img {
  aspect-ratio: 1/1 !important;
}

/* Image Contained: fixed height + auto width keeps each slide's own aspect
   ratio instead of a forced square (see element-02.js for variableWidth). */
.element-02.version-2.image-contained .slick-slide img {
  width: auto !important;
  height: 240px !important;
  aspect-ratio: auto !important;
  object-fit: contain;
}

@media (max-width: 991px) {
  .element-02.version-2.image-contained .slick-slide img {
    height: 200px !important;
  }
}

@media (max-width: 700px) {
  .element-02.version-2.image-contained .slick-slide img {
    height: 160px !important;
  }
}

@media (max-width: 480px) {
  .element-02.version-2.image-contained .slick-slide img {
    height: 120px !important;
  }
}

/* Radius on the wrapper, not the image - a contained photo sits inset from
   the image's own box, so only the wrapper's clip bounds the tile visibly. */
.element-02.version-2.rounded-corners-true .slick-slide {
  border-radius: 30px;
  overflow: hidden;
}

.element-02.version-2.rounded-corners-standard .slick-slide {
  border-radius: 6px;
  overflow: hidden;
}

/* The 7px border is thicker than this 6px radius, flattening the wrapper's
   inner curve to a square - re-round the image directly for cover mode. */
.element-02.version-2.rounded-corners-standard .slick-slide img {
  border-radius: 6px;
}

.element-02.version-2.rounded-corners-false .slick-slide img {
  border-radius: 0;
}

.element-02.version-2.rounded-corners-true .slick-slide {
  border: 7px solid transparent !important;
}

.element-02.version-2.rounded-corners-standard .slick-slide {
  border: 7px solid transparent !important;
}

.element-02 .slides-1 {
  max-width: 300px;
  margin: auto;
}

/* :not(.image-contained) - these caps assume the old fixed-square grid;
   a contained gallery's variable-width slides can be wider than the cap. */
.element-02.version-2:not(.image-contained) .slides-1 {
  max-width: 272px;
  margin: auto;
}

.element-02.version-2:not(.image-contained) .slides-2 {
  max-width: 543px;
  margin: auto;
}

.element-02.version-2:not(.image-contained) .slides-3 {
  max-width: 816px;
  margin: auto;
}

.element-02.version-2:not(.image-contained) .slides-4 {
  max-width: 1088px;
  margin: auto;
}

.element-02 .homepage-gallery-slider:not(.slick-initialized) {
  display: none;
}