/* All selectors are scoped: no styling of existing Flatsome images or rows. */
.veas-hex-collage {
  --vh-start: var(--veas-gradient-start, var(--fs-color-secondary, #14bcc3));
  --vh-middle: var(--veas-gradient-middle, var(--fs-color-secondary, #14bcc3));
  --vh-end: var(--veas-gradient-end, var(--fs-color-primary, #e63794));
  --vh-gradient: linear-gradient(135deg, var(--vh-start) 0%, var(--vh-middle) 42%, var(--vh-end) 100%);
  --vh-shape: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --vh-border: 7px;
  width: 100%;
  max-width: 570px;
  aspect-ratio: 4 / 5;
  position: relative;
  isolation: isolate;
  flex: 0 1 auto;
  margin: 0 auto;
  box-sizing: border-box;
}
.veas-hex-collage::before {
  content: '';
  position: absolute;
  inset: 8% 1% 4% 2%;
  z-index: -1;
  background: radial-gradient(ellipse at 38% 35%, var(--vh-start), transparent 66%), radial-gradient(ellipse at 62% 76%, var(--vh-end), transparent 67%);
  opacity: .14;
  filter: blur(28px);
  pointer-events: none;
}
@supports (color: color-mix(in oklch, red, blue)) {
  .veas-hex-collage {
    --vh-middle: var(--veas-gradient-middle, color-mix(in oklch, var(--vh-start), var(--vh-end)));
  }
}
.veas-hex-collage--decor::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 11%;
  height: 8%;
  right: 7%;
  top: 0;
  background: var(--vh-gradient);
  clip-path: var(--vh-shape);
  opacity: .35;
  pointer-events: none;
}
.veas-hex-frame {
  position: absolute;
  min-width: 0;
  box-sizing: border-box;
  filter: drop-shadow(0 7px 12px rgba(42, 57, 88, .12));
}
.veas-hex-frame--1 { left: 3%; top: 16%; width: 59%; height: 43%; z-index: 3; }
.veas-hex-frame--2 { left: 50%; top: 5%; width: 46%; height: 32%; z-index: 2; }
.veas-hex-frame--3 { left: 50%; top: 38%; width: 46%; height: 29%; z-index: 2; }
.veas-hex-frame--4 { left: 17%; top: 58%; width: 44%; height: 29%; z-index: 4; }
.veas-hex-frame--5 { left: 55%; top: 70%; width: 37%; height: 25%; z-index: 2; }
.veas-hex-frame__outline {
  position: absolute;
  inset: 0;
  background: var(--vh-gradient);
  clip-path: var(--vh-shape);
}
.veas-hex-frame__white {
  position: absolute;
  inset: var(--vh-border);
  background: white;
  clip-path: var(--vh-shape);
}
.veas-hex-frame__photo {
  position: absolute;
  inset: 3px;
  overflow: hidden;
  clip-path: var(--vh-shape);
  background: #f1f5f9;
}
.veas-hex-collage .veas-hex-photo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: var(--vh-x, 50%) var(--vh-y, 50%);
  transform: scale(var(--vh-zoom, 1));
  transform-origin: var(--vh-x, 50%) var(--vh-y, 50%);
}
.veas-hex-collage .veas-hex-frame--reference .veas-hex-photo {
  width: var(--vh-source-width);
  height: var(--vh-source-height);
  left: calc(var(--vh-source-left) + 50% - var(--vh-x, 50%));
  top: calc(var(--vh-source-top) + 50% - var(--vh-y, 50%));
  object-fit: fill;
  transform-origin: center;
}
.veas-hex-placeholder {
  position: absolute;
  inset: 25% 20%;
  display: grid;
  align-items: center;
  color: #52647a;
  text-align: center;
  font-size: 13px;
}
/* Keep the original text column untouched; only size the new art. */
.ce-intro__art > .col-inner > .veas-hex-collage { align-self: center; }
@media (max-width: 849px) {
  .veas-hex-collage { max-width: 540px; }
}
@media (max-width: 549px) {
  .veas-hex-collage { --vh-border: 5px !important; }
  .veas-hex-frame__photo { inset: 2px; }
}