#work-gallery {
  container: work-gallery / inline-size;

  --_opacity-animation: opacity 0.25s linear;
  user-select: none;
  display: block;

  work-gallery-cursor {
    position: absolute;
    top: 0;

    pointer-events: none;
    opacity: 0;
    transition: var(--_opacity-animation);

    p {
      position: absolute;
      opacity: 0;
      transition: var(--_opacity-animation);

      font-size: calc(var(--font-size) * 0.75);
      text-transform: uppercase;

      &.active {
        opacity: 1;
      }
    }

    &.active {
      opacity: 1;
    }
  }

  image-container {
    width: 100vw;
    height: calc(100vh - var(--fs) * 2 - var(--fs-one-third) * 4);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    img {
      max-width: calc(var(--grid-single) * 7 + var(--gap) * 6);
      max-height: 100%;
    }
  }

  @container (inline-size < 48rem) {
    image-container {
      img {
        max-width: calc(var(--grid-single) * 9 + var(--gap) * 8);
      }
    }
  }

  @container (inline-size < 28.125rem) {
    image-container {
      img {
        max-width: calc(var(--grid-single) * 12 + var(--gap) * 11);
      }
    }
  }
}

#footer.work-page {
  width: 100vw;

  inner-wrapper {
    padding-block-start: var(--fs-one-third);

    a:nth-child(2),
    a:nth-child(3),
    a:nth-child(5) {
      display: none;
    }

    a:nth-child(4) {
      grid-column: 11 / -1;
      justify-self: flex-end;
    }
  }

  @container (inline-size < 60rem) {
    inner-wrapper {
      a:nth-child(4) {
        display: inline-block;
      }
    }
  }
}