.gruppo-home .site-header {
  background: linear-gradient(180deg, rgba(8, 17, 23, .86), transparent);
}

.group-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(600px, 87svh, 980px);
  background: var(--forest-deep);
  color: var(--white);
}

.group-hero-image,
.group-hero::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.group-hero-image {
  z-index: -2;
  object-fit: cover;
  object-position: 56% center;
}

.group-hero::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 17, 23, .9), rgba(8, 17, 23, .6) 35%, transparent 77%),
    linear-gradient(0deg, rgba(8, 17, 23, .77), transparent 35%);
  content: "";
}

.group-hero-content {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-block: 132px clamp(52px, 9vh, 106px);
}

.group-hero h1 {
  max-width: 9.5ch;
  margin: 0 0 22px;
  font-size: clamp(66px, 8.4vw, 126px);
  line-height: .88;
}

.group-hero-intro {
  max-width: 41ch;
  margin: 0;
  color: var(--white);
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.53;
}

.group-hero-caption {
  flex: none;
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid var(--copper-bright);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.group-hero-controls {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media (min-width: 741px) {
  .group-hero-controls { flex-direction: column; align-items: end; }
}

.group-about,
.group-archive {
  padding-block: clamp(65px, 8vw, 125px);
}

.group-about-grid,
.group-next-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(30px, 7vw, 110px);
}

.group-about h2,
.group-archive h2,
.group-next h2 {
  margin: 0;
  font-size: clamp(39px, 5.1vw, 78px);
}

.group-about-copy p,
.group-next p {
  max-width: 55ch;
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.68;
}

.group-archive {
  background: var(--forest-deep);
  color: var(--white);
}

.group-archive-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 32px;
}

.group-media {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(154px, 15vw, 211px);
  gap: 12px;
}

.group-media-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: end;
  overflow: hidden;
  background: #203239;
}

.group-media-film { grid-column: span 2; grid-row: span 2; }

.group-media-card img,
.group-media-card::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.group-media-card img {
  z-index: -2;
  object-fit: cover;
  transition: transform .35s ease;
}

.group-media-card .group-media-snow { object-position: center 29%; }

.group-media-card::after {
  z-index: -1;
  background: linear-gradient(0deg, rgba(7, 15, 20, .94), transparent 70%);
  content: "";
}

.group-media-card:hover img,
.group-media-card:focus-visible img { transform: scale(1.04); }

.group-media-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: clamp(10px, 1.4vw, 20px);
  color: var(--white);
  font-size: clamp(13px, 1.42vw, 22px);
  font-weight: 700;
  line-height: 1.15;
}

.group-media-film .group-media-label { justify-content: flex-start; }
.group-media-card:not(.group-media-film) .group-media-icon { width: 32px; height: 32px; }

.group-media-label small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
}

.group-media-icon,
.group-dialog-top button,
.group-dialog-pagination button {
  display: grid;
  flex: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(8, 17, 23, .55);
  color: var(--white);
  font-size: 16px;
}

.group-media-film .group-media-icon {
  background: var(--white);
  color: var(--ink);
}

.group-media-dialog {
  width: min(100% - 28px, 1070px);
  max-height: calc(100% - 28px);
  padding: 0;
  border: 1px solid #51636b;
  background: var(--forest-deep);
  color: var(--white);
}

.group-media-dialog::backdrop { background: rgba(5, 10, 13, .91); }

.group-dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 20px;
}

.group-dialog-top p { margin: 0; }
.group-dialog-top button { font-size: 26px; cursor: pointer; }
.group-dialog-top button:hover,
.group-dialog-pagination button:hover { border-color: var(--copper-bright); }

.group-dialog-content :is(img, video) {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 100px);
  object-fit: contain;
}

.group-dialog-content img { max-height: calc(100dvh - 163px); }

.group-dialog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px;
}

.group-dialog-pagination[hidden] { display: none; }
.group-dialog-pagination button { cursor: pointer; }
.group-dialog-position { min-width: 5ch; text-align: center; }

.group-next {
  padding-block: clamp(50px, 6vw, 86px);
  background: var(--sand);
}

.group-next h2 { font-size: clamp(38px, 4.4vw, 65px); }
.group-next p { margin: 13px 0 0; }
.group-next-inner > a { justify-self: end; }

.expeditions-page .hero { height: auto; min-height: 410px; }
.expeditions-page .hero-content { min-height: inherit; padding-block: 122px 56px; }
.expeditions-page .hero h1 { max-width: none; font-size: clamp(45px, 8vw, 105px); }
.expeditions-page .hero-intro { margin-bottom: 0; }
.expeditions-page .expedition-section { padding-block: clamp(54px, 7vw, 90px); }

@media (max-width: 900px) {
  .group-media { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .group-media-card { min-height: 132px; aspect-ratio: 16 / 10; }
  .group-media-film { grid-row: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 740px) {
  .group-hero {
    min-height: max(590px, 84svh);
  }

  .group-hero::after {
    background: linear-gradient(0deg, rgba(8, 17, 23, .94), rgba(8, 17, 23, .65) 48%, transparent 86%);
  }

  .group-hero-image { object-position: 58% center; }

  .group-hero-content {
    flex-direction: column;
    align-items: start;
    justify-content: end;
    gap: 30px;
    padding-bottom: 29px;
  }

  .group-hero h1 { font-size: clamp(57px, 13vw, 84px); }
  .group-about-grid, .group-next-inner { grid-template-columns: 1fr; gap: 24px; }
  .group-next-inner > a { justify-self: start; }
  .group-archive-heading { flex-wrap: wrap; }
  .group-media { gap: 8px; }
  .group-media-card:not(.group-media-film) { aspect-ratio: 1.1; }
  .group-media-film { aspect-ratio: 16 / 10; }
  .group-media-card:not(.group-media-film) .group-media-icon { width: 30px; height: 30px; }
  .expeditions-page .hero { min-height: 350px; }
}

@media (prefers-reduced-motion: reduce) {
  .group-media-card img { transition: none; }
}