$lines-to-show: 4;

.tui-concept-card {
  overflow: hidden;

  .show-more-controller {
    color: $color-link-blue;
    padding: $margin-normal;
    line-height: 1;
    background: $color-blue-100;
    text-align: center;
    border-bottom: 1px solid $color-tui-grey-25;

    svg {
      transition: transform .5s;
      transform-origin: center center;
    }
  }

  &.active {
    .bullet-list {
      display: block;

      @include breakpoint(sm) {
        display: none;
      }
    }

    .show-more-controller svg {
      transform: rotateY(180deg);
    }
  }

  .bullet-list {
    display: none;
  }

  @include breakpoint(xs) {
    width: 100%;
  }
}

.big-expanded {
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height .5s;

  .big-wrap {
    @extend %flexbox-row;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 2px $margin-normal $margin-double;
    background: $color-white;
    position: relative;
    padding: $margin-double;
    border-radius: $border-radius-normal;
    box-shadow: $box-shadow-card;
  }

  h3 {
    @include font-size(30);
  }

  .tui-text-content {
    width: calc(#{percentage(1 / 3)} - #{$margin-normal});
    margin: 0 $margin-normal 0 0;
  }

  .ratio-16-9 {
    width: calc(#{percentage(2 / 3)} - #{$margin-normal});
    margin: $margin-quadruple 0 0 $margin-normal;
  }

  .closer {
    height: 30px;
    width: 30px;
    cursor: pointer;
    position: absolute;
    top: $margin-double;
    right: $margin-double;
    background-size: 30px 30px;

    &:after,
    &:before {
      content: '';
      height: 2px;
      background: currentColor;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60%;
      transform: rotate(45deg);
      transform-origin: center center;
    }

    &:before {
      transform: rotate(-45deg);
    }
  }
}