.paragraph--type--member-list {
  container-name: team-member-list;
  container-type: inline-size;

  .field--name-field-summary {
    margin-bottom: 24px;
  }
}

.field--name-field-member-list {
  display: grid;
  gap: 20px;
  --radius: 25cqw;

  & > .field__item {
    container-type: inline-size;

    &:nth-child(even) > .paragraph {
      border-radius: var(--radius) 0;

      .field--name-field-media-image img {
        border-radius: var(--radius) 0;
      }
    }

    &:nth-child(odd) > .paragraph {
      border-radius: 0 var(--radius);

      .field--name-field-media-image img {
        border-radius: 0 var(--radius);
      }
    }
  }

  @container team-member-list (min-width: 600px) {
    grid-template-columns: 1fr 1fr;

    & > .field__item {
      &:has(.paragraph--view-mode--span) {
        grid-column: 1 / -1;
        --radius: 12.5cqw;

        & > .paragraph {
          border-radius: 0 var(--radius);

          .field--name-field-media-image img {
            border-radius: 0 var(--radius);
          }
        }

        .field--name-field-media-image img {
          aspect-ratio: 2 / 1;
          object-position: center 25%;
        }
      }

      &:nth-child(odd of :not(:has(.paragraph--view-mode--span))) > .paragraph {
        border-radius: 0 var(--radius);

        .group-information {
          align-items: flex-start;
          padding-left: var(--radius);
        }

        .field--name-field-media-image img {
          border-radius: 0 var(--radius);
        }
      }

      &:nth-child(even of :not(:has(.paragraph--view-mode--span))) > .paragraph {
        border-radius: var(--radius) 0;

        .group-information {
          align-items: flex-start;
          padding-right: var(--radius);
        }

        .field--name-field-media-image img {
          border-radius: var(--radius) 0;
        }
      }
    }
  }
}



.paragraph--type--member {
  background: var(--bg-tertiary);

  .field--name-field-media-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .group-information {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 18px 24px;

    .field--name-field-name {
      font-weight: 600;
    }

    .field--name-field-role {
      font-size: 12px;
    }
  }
}