/* expedition - expeditions section */
.expeditions {
  min-height: 100svh;
  height: max-content;
  padding-bottom: 3rem;
}

.expeditions p {
  color: var(--base-200);
  padding: 1.5rem;
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
}

.expeditions .expeditions-list .expedition {
  --h2-font-size: clamp(3.25rem, 8vw, 8rem);
  --h2-line-height: calc(var(--h2-font-size) * 0.85);
  height: var(--h2-line-height);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  overflow: hidden;
  background-color: transparent;
  max-width: 2000px;
  margin: 0 auto;
}

.expeditions .expeditions-list .expedition .expedition-wrapper {
  position: relative;
  --h2-font-size: clamp(3.25rem, 8vw, 8rem);
  --h2-line-height: calc(var(--h2-font-size) * 0.85);
  height: calc(var(--h2-line-height) * 3);
  will-change: transform;
  transform: translateY(-66.666%);
}

.expeditions .expeditions-list .expedition .expedition-wrapper .expedition-name,
.expeditions
  .expeditions-list
  .expedition
  .expedition-wrapper
  .expedition-project {
  --h2-font-size: clamp(3.25rem, 8vw, 8rem);
  --h2-line-height: calc(var(--h2-font-size) * 0.85);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--h2-line-height);
  padding: 0.5rem 1.5rem;
}

.expeditions
  .expeditions-list
  .expedition
  .expedition-wrapper
  .expedition-name {
  background-color: transparent;
  color: var(--base-100);
}

.expeditions
  .expeditions-list
  .expedition
  .expedition-wrapper
  .expedition-project {
  position: relative;
  background-color: var(--base-500);
  color: var(--base-400);
}

.expedition-intro,
.expedition-outro {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

/* expedition - media queries */
@media (max-width: 1000px) {
  .expeditions
    .expeditions-list
    .expedition
    .expedition-wrapper
    .expedition-name
    h2:nth-child(2),
  .expeditions
    .expeditions-list
    .expedition
    .expedition-wrapper
    .expedition-project
    h2:nth-child(2) {
    display: none;
  }

  .expeditions
    .expeditions-list
    .expedition
    .expedition-wrapper
    .expedition-project {
    background-color: transparent;
  }

  .expeditions p {
    margin-top: 2rem;
    padding: 1rem;
  }

  .expeditions
    .expeditions-list
    .expedition
    .expedition-wrapper
    .expedition-name,
  .expeditions
    .expeditions-list
    .expedition
    .expedition-wrapper
    .expedition-project {
    padding: 0.5rem 1rem;
  }
}