.zetmar-gallery {
  padding: 22px 0 clamp(64px, 9vw, 128px);
  background: #ffffff;
}

.zetmar-gallery__inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-inline: clamp(16px, 2vw, 32px);
}

.zetmar-gallery__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  column-gap: clamp(40px, 9vw, 150px);
  align-items: end;
  margin-bottom: 42px;
}

.zetmar-gallery__heading > span {
  grid-column: 1 / -1;
  width: fit-content;
  margin-bottom: 14px;
  color: #555555;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
}

.zetmar-gallery__heading h2 {
  margin: 0;
  color: #111111;
  font-size: clamp(2.35rem, 5vw, 5.4rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.065em;
}

.zetmar-gallery__heading p {
  margin: 0 0 5px;
  color: #5f5f5f;
  font-size: 1rem;
  line-height: 1.7;
}

.zetmar-gallery__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-top: 0;
}

.zetmar-gallery__tabs button {
  min-height: 39px;
  padding: 0 17px;
  border: 1px solid #c9c9c4;
  border-radius: 999px;
  color: #333333;
  background: #ffffff;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.zetmar-gallery__tabs button:hover,
.zetmar-gallery__tabs button:focus-visible,
.zetmar-gallery__tabs button.is-active {
  border-color: #111111;
  color: #ffffff;
  background: #111111;
}

.zetmar-gallery__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, .7vw, 12px);
}

.zetmar-gallery__item {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: #e8e8e5;
  cursor: zoom-in;
}

.zetmar-gallery__item[hidden] {
  display: none;
}

.zetmar-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(.9);
  transition: opacity .38s ease, transform .45s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

.zetmar-gallery__item img.is-loaded {
  opacity: 1;
}

.zetmar-gallery__item span {
  display: none;
}

.zetmar-gallery__item:hover img,
.zetmar-gallery__item:focus-visible img {
  filter: saturate(1);
  transform: scale(1.035);
}

.zetmar-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  padding: clamp(20px, 4vw, 56px);
  place-items: center;
  background: rgba(0, 0, 0, .92);
}

.zetmar-gallery-lightbox[hidden] { display: none; }
.zetmar-gallery-lightbox figure { width: min(100%, 1120px); margin: 0; }
.zetmar-gallery-lightbox img { display: block; width: 100%; max-height: calc(100vh - 150px); object-fit: contain; }
.zetmar-gallery-lightbox figcaption { margin-top: 14px; color: #fff; font-size: .92rem; font-weight: 700; }
.zetmar-gallery-lightbox__close { position: absolute; top: 22px; right: 26px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; color: #fff; background: transparent; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.zetmar-gallery-lightbox__nav { position: absolute; top: 50%; z-index: 1; display: grid; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; place-items: center; color: #fff; background: rgba(0,0,0,.28); cursor: pointer; transform: translateY(-50%); transition: background .2s ease, border-color .2s ease; }
.zetmar-gallery-lightbox__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.zetmar-gallery-lightbox__nav:hover, .zetmar-gallery-lightbox__nav:focus-visible { border-color: #fff; background: rgba(255,255,255,.18); }
.zetmar-gallery-lightbox__nav--previous { left: clamp(14px, 2.5vw, 44px); }
.zetmar-gallery-lightbox__nav--next { right: clamp(14px, 2.5vw, 44px); }

@media (max-width: 760px) {
  .zetmar-gallery__inner { padding-inline: 20px; }
  .zetmar-gallery__heading { display: block; margin-bottom: 32px; }
  .zetmar-gallery__heading h2 { margin-bottom: 18px; }
  .zetmar-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .zetmar-gallery__item { grid-column: span 1; min-height: 0; }
  .zetmar-gallery__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .zetmar-gallery__tabs button { flex: 0 0 auto; }
  .zetmar-gallery-lightbox { padding: 18px; }
  .zetmar-gallery-lightbox__nav { width: 36px; height: 36px; }
  .zetmar-gallery-lightbox__nav svg { width: 16px; height: 16px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .zetmar-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}