.forest-grass-wet {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: clip;
  overscroll-behavior: none;

  > .map {
    width: 100%;
    height: 100%;

    > canvas {
      display: block;
      width: 100% !important;
      height: 100% !important;
    }

    > div {
      width: 100% !important;
      height: 100% !important;
    }
  }

  &-ui {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
  }

  .fgw-left,
  .fgw-right {
    position: absolute;
    top: 128px;
    bottom: 8px;
    z-index: 6;
    width: 398px;
    perspective-origin: 50% 50%;
    pointer-events: all;
  }

  .fgw-left {
    left: 32px;
    perspective: var(--screen-side-perspective-left, 500px);
  }

  .fgw-right {
    right: 32px;
    perspective: var(--screen-side-perspective-right, 800px);
  }

  .fgw-side-stack {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform-style: preserve-3d;

    &.is-left {
      transform: translate3d(0, 0, 0) rotateY(6deg);
      transform-origin: left center;
    }

    &.is-right {
      transform: translate3d(0, 0, 0) rotateY(-6deg);
      transform-origin: right center;
    }
  }

  .fgw-side-card {
    flex: 0 0 auto;

    .m-card-bd-content {
      top: 36px;
      bottom: 0;
      color: #f3feff;
    }
  }

  .fgw-map-layer-tools,
  .fgw-map-feature-info {
    position: absolute;
    z-index: 7;
    pointer-events: all;

    .m-card {
      background: rgba(3, 18, 30, 0.54);
      backdrop-filter: blur(2px);
    }
  }

  .fgw-map-layer-tools {
    top: auto;
    right: 458px;
    left: auto;
    bottom: 72px;
    width: 248px;
    height: 430px;

    .m-card {
      width: 100% !important;
      height: 100% !important;
    }
  }

  .fgw-ndvi-timeline {
    position: absolute;
    left: calc(50% - 136px);
    bottom: 112px;
    z-index: 7;
    transform: translateX(-50%);
    pointer-events: all;
  }

  .fgw-map-feature-info {
    right: 456px;
    bottom: 150px;
  }

  .fgw-bottom-topic {
    position: absolute;
    left: 50%;
    bottom: 48px;
    z-index: 8;
    transform: translateX(-50%);
    pointer-events: all;
  }
}
