/* Override these custom properties on the Elementor Shortcode widget. */
.eop-project-gallery {
  --eop-gallery-height: calc(100vh - 240px);
  --eop-thumb-height: 64px;
  --eop-gallery-gap: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--eop-gallery-gap);
  width: 100%;
  max-width: 100%;
  height: var(--eop-gallery-height);
  min-height: 180px;
  min-width: 0;
  box-sizing: border-box;
}
@supports (height: 100dvh) {
  .eop-project-gallery { --eop-gallery-height: calc(100dvh - 240px); }
}
.eop-project-gallery .eop-gallery-stage {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eop-project-gallery img.eop-gallery-main {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  margin: 0;
}
.eop-project-gallery .eop-gallery-thumbs {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 3px 8px;
  scrollbar-width: thin;
}
.eop-project-gallery button.eop-gallery-thumb {
  appearance: none;
  display: block;
  flex: 0 0 auto;
  width: calc(var(--eop-thumb-height) * 1.25);
  height: var(--eop-thumb-height);
  min-width: 0;
  padding: 2px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  opacity: .65;
}
.eop-project-gallery button.eop-gallery-thumb[aria-pressed="true"],
.eop-project-gallery button.eop-gallery-thumb:hover { opacity: 1; border-color: #111; background: transparent; }
.eop-project-gallery button.eop-gallery-thumb:focus-visible { outline: 2px solid #111; outline-offset: 1px; opacity: 1; }
.eop-project-gallery .eop-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.eop-project-gallery .eop-gallery-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 767px) {
  .eop-project-gallery { --eop-gallery-height: 45vh; --eop-thumb-height: 48px; }
}