lila/ui/analyse/css/study/_list-widget.scss

.studies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax($viewport-min-width, 1fr));

  @media (min-width: at-least($medium)) {
    grid-template-columns: repeat(auto-fill, minmax(45ch, 1fr));
  }

  .study {
    position: relative;
    border: $border;
    border-width: 0 1px 1px 0;
    padding: 1em 0.6em 1em 1.3em;
    overflow: hidden;

    @include transition;

    .overlay {
      @extend %link-overlay;
    }

    .body {
      display: flex;
      font-size: 0.9em;
    }

    .chapters {
      flex: 0 0 58%;
      max-width: 58%;
    }

    .members {
      flex: 0 0 40%;
      max-width: 40%;
      margin-inline-start: 2%;
    }

    li {
      @extend %nowrap-ellipsis;

      color: $c-font-dim;
      unicode-bidi: plaintext;
      display: flex;

      &::before {
        color: $c-font-dimmer;
      }
    }

    .top {
      @extend %flex-center-nowrap, %break-word, %roboto;

      gap: 1rem;

      .study-name {
        @extend %nowrap-ellipsis;

        font-size: 1.5em;
        font-weight: normal;
        color: $c-primary;
        display: block;
        margin: 0;
        unicode-bidi: plaintext;
      }

      div {
        overflow: hidden;
      }

      span {
        font-size: 0.9rem;
        display: block;
        color: $c-font-dim;
      }

      .study__icon {
        flex: 0 0 auto;
        color: $m-primary_bg--mix-80;
        font-size: 3em;

        img {
          margin: 0;
        }
      }

      .private {
        color: $c-brag;
      }
    }

    &:hover {
      background: $m-primary_bg--mix-10;

      .top::before {
        color: $c-link;
      }
    }
  }
}