.cosamirai-people {
  --animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding-block: var(--spacing-big-section-block);
  background-color: var(--c-light-stone);
  color: var(--c-oak-text);

  .inner {
    padding-inline: 10% 0.625rem;

    .content {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .title {
      margin-bottom: 3.75rem;
      padding-left: 16.875rem;
      font-family: "PP Fragment Glare", serif;
      font-size: var(--fs-L-H2-XS);
      font-weight: 300;
      line-height: 1.2;
    }

    .group-wrapper {
      padding-block: 2.625rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      .group_name {
        margin-bottom: 0;
        padding-left: 14.375rem;
        font-family: "PP Fragment", serif;
        font-size: var(--fs-L-body-M);
        font-weight: 400;
        line-height: 1.6;
      }

      .list {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        .people {
          display: grid;
          grid-template-columns: 15rem 1fr;
          align-items: center;
          gap: 1.875rem;
          color: var(--c-outline);
          transition: all 0.8s var(--animation-timing-function);
          overflow: hidden;
          cursor: pointer;
          
          
          
          

          &.active {
            color: var(--c-oak-text);
            visibility: visible;
            opacity: 1;
          }

          .people-name {
            margin-bottom: 0;
            font-family: "PP Fragment Glare", serif;
            font-size: var(--fs-55);
            font-weight: 300;
            line-height: 1.2;
            word-wrap: break-word;
          }

          .people-desc {
            margin-bottom: 0;
            font-size: var(--fs-name-title);
            font-weight: 400;
            line-height: 1.6;
            word-break: break-all;
          }

          .people-image--mobile {
            display: none;
          }
        }
      }
    }

    .image-wrapper {
      width: 24%;
      flex-shrink: 0;
      position: relative;

      .image-container {
        width: 100%;
        height: 100%;
        display: none;
        overflow: hidden;
        --scroll-progress: 0;
        transition: all 0.8s var(--animation-timing-function);
        visibility: hidden;
        opacity: 0;

        &.active {
          visibility: visible;
          opacity: 1;
          display: block;
        }

        .image {
          width: 100%;
          height: 124%;
          object-fit: cover;
          object-position: 50%;
          transform: translateY(calc(-12% + var(--scroll-progress) * 12%));
          will-change: transform;
          transition: none;
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .cosamirai-people {
    .inner {
      padding-inline: 5% 0.625rem;

      .image-wrapper {
        width: 28%;
      }
    }
  }
}

@media (max-width: 900px) {
  .cosamirai-people {
    .inner {
      padding-inline: 1.5rem;
      padding-block: 2.5rem;

      .title {
        padding-left: 0;
        margin-bottom: 2.5rem;
      }

      .content {
        display: contents;

        .group-wrapper {
          padding-block: 0;

          .group_name {
            padding-left: 0;
          }

          .list {
            .people {
              color: var(--c-oak-text);
              display: flex;
              flex-direction: column-reverse;
              align-items: flex-start;
              gap: 1.5rem;

              .people-name {
                font-size: var(--fs-S-H3-L);
                line-height: 1.4;
              }

              .people-desc {
                margin-top: -0.25rem;
              }

              .people-image--mobile {
                width: 100%;
                display: block;
                /* aspect-ratio: 1 / 1.35; */
              }
            }
          }
        }

        .image-wrapper {
          display: none;
        }
      }
    }
  }
}

/* ==================================================================================
   BACKEND PREVIEW STYLES
   ================================================================================== */

#editor .editor-visual-editor section.cosamirai-people.cosamirai-people-preview {
  
  .inner {
    .title {
      font-size: 2.5rem;
    }

    .content {
      display: block;
    }

    .group-wrapper {
      .group_name {
        font-size: 1.125rem;
        padding-left: 0;
        margin-bottom: 2rem;
      }

      .list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;

        .people {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 1rem;
          opacity: 1;
          color: var(--c-oak-text);
          cursor: default;
          pointer-events: none;
          grid-template-columns: unset;

          .people-info {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
          }

          .people-name {
            font-size: 1.25rem;
            margin-bottom: 0;
          }

          .people-desc {
            font-size: 0.75rem;
            margin-bottom: 0;
          }

          .people-image {
            width: 100%;
            max-height: 300px;
            object-fit: cover;
          }
        }
      }
    }
  }
}