/* Approach */
.approach-grid {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: color 0.75s ease, background-color 0.75s ease;
}

.approach-grid .grid-block {
  margin-inline: auto;
}


.approach-figure {
  h3 {
    padding-block: var(--spacing-s);
  }

  transition: transform 0.5s ease, opacity 0.5s ease;
  &:hover {
    transform: scale(1.025);
  }
  &:active {
    transform: scale(1);
    opacity: 0.66;
    transition-duration: 0.2s;
  }
}

@media (min-width: 900px) {
  approach-section {
    display: block;
    height: 225svh;
  }

  .approach-grid {
    position: sticky;
    top: 0;
    height: 100svh;
    padding-block: var(--spacing-m);
    row-gap: var(--spacing-m);

    h2 {
      position: absolute;
      top: 50%;
      /* grid-row: 1; */
      grid-column: 1 / 6;
    }

    .grid-block {
      /* position: absolute; */
      /* margin-top: 0; */
      /* top: var(--sticky); */
      /* grid-row: 1; */
    }

    .right-caption {
      text-align: right;
    }
    .top-caption {
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      padding-bottom: var(--spacing-s);
    }
  }
}