@import '../../../assets/scss/mixins.scss';

.comedians-list {
  .comedian-card {
    margin: 24px;

    .thumbnail {
      border: 1px solid var(--white-secondory);
      border-radius: 120px;
      overflow: hidden;
      width: 180px;
      height: 180px;
    }

    .name {
      margin-top: 8px;
      font-weight: 600;
      color: var(--h3-color);
      @include desktop() {
        font-size: var(--h3-md);
      }
      @include tablet() {
        font-size: var(--h3-sm);
      }
      @include mobile() {
        font-size: var(--h3-xs);
      }
    }
  }
}

@include touch() {
  $card-margin: 12px;
  $card-width: 'min(calc(33vw - (#{$card-margin} * 2)), 140px)';

  .comedians-list {
    .comedian-card {
      margin: 12px;
      width: unquote($card-width);

      .thumbnail {
        width: unquote($card-width);
        height: unquote($card-width);
      }
    }
  }
}