.explore {
  block-size: 100%;
  inline-size: 100%;
  display: grid;
  overflow: hidden;

  @media screen and (width <= 85rem) {
    padding-block: var(--gap-72);
  }

  &:is(:hover, :active) {
    & .explore__text {
      opacity: 1;

      & img {
        translate: 0 0;
      }

      & .explore__text-wrp {
        translate: 0 0;
      }
    }
  }

  & :is(.explore__text, .explore__video) {
    grid-row: 1;
    grid-column: 1;
  }

  & video {
    inline-size: 100%;
    min-block-size: 100%;
    block-size: 100vh;
    aspect-ratio: 2 / 3;
    object-fit: contain;

    @media screen and (width <= 85rem) {
      block-size: 100%;
    }
  }
}

.explore__text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: var(--gap-16);
  opacity: 0;
  background-color: hsl(from var(--white) h s l / 90%);
  backdrop-filter: blur(2px);
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: 10;

  img {
    justify-self: end;
    translate: 0 -1rem;
    transition: translate 0.3s ease-in-out;
  }
}

.explore__text-wrp {
  border-left: 2px solid var(--black);
  padding-inline-start: var(--gap-16);
  translate: 0 1rem;
  transition: translate 0.3s ease-in-out;

  h3 {
    font-size: var(--font-32);
  }

  p {
    font-size: var(--font-18);
  }
}