Logo Cards

<div class="logo-cards">
    <div class="logo-cards__inner">
        <h2 class="component-title">Logo Cards</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, nostrum.</p>
        <div class="logo-cards-group js-logo-cards-group">
            <h3 class="logo-card-group-title">Image Items</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis deleniti tempore omnis.</p>
            <div class="logo-card-carousel carousel carousel--dark js-logo-cards-carousel">
                <div class="js-logo-cards">
                    <div class="logo-card--expandable js-card-expandable" data-target="group-1-logo-card-panel-0">
                        <div class="logo-card">
                            <img src="/images/logo-paramount-test.png" alt="" class="logo-card__image" />
                        </div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-1-logo-card-panel-1">
                        <div class="logo-card">
                            <img src="/images/logo-noggin-test.svg" alt="" class="logo-card__image" />
                        </div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-1-logo-card-panel-2">
                        <div class="logo-card">
                            <img src="/images/logo-comedycentral-test.svg" alt="" class="logo-card__image" />
                        </div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-1-logo-card-panel-3">
                        <div class="logo-card">
                            <img src="/images/logo-mtv-shop-test.png" alt="" class="logo-card__image" />
                        </div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-1-logo-card-panel-4">
                        <div class="logo-card">
                            <img src="/images/logo-spongebob-test.png" alt="" class="logo-card__image" />
                        </div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-1-logo-card-panel-5">
                        <div class="logo-card">
                            <img src="https://via.placeholder.com/96x96" alt="" class="logo-card__image" />
                        </div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-1-logo-card-panel-6">
                        <div class="logo-card">
                            <img src="https://via.placeholder.com/96x96" alt="" class="logo-card__image" />
                        </div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-1-logo-card-panel-7">
                        <div class="logo-card">
                            <img src="https://via.placeholder.com/96x96" alt="" class="logo-card__image" />
                        </div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-1-logo-card-panel-8">
                        <div class="logo-card">
                            <img src="https://via.placeholder.com/96x96" alt="" class="logo-card__image" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-1-logo-card-panel-0" data-logo-card-panel="group-1-logo-card-panel-0">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 1 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-1-logo-card-panel-1" data-logo-card-panel="group-1-logo-card-panel-1">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 2 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-1-logo-card-panel-2" data-logo-card-panel="group-1-logo-card-panel-2">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 3 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-1-logo-card-panel-3" data-logo-card-panel="group-1-logo-card-panel-3">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 4 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-1-logo-card-panel-4" data-logo-card-panel="group-1-logo-card-panel-4">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 5 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-1-logo-card-panel-5" data-logo-card-panel="group-1-logo-card-panel-5">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 6 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-1-logo-card-panel-6" data-logo-card-panel="group-1-logo-card-panel-6">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 7 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-1-logo-card-panel-7" data-logo-card-panel="group-1-logo-card-panel-7">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 8 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-1-logo-card-panel-8" data-logo-card-panel="group-1-logo-card-panel-8">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 9 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>
        </div>

        <div class="logo-cards-group js-logo-cards-group">
            <h3 class="logo-card-group-title">Label Items</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste veritatis placeat porro.</p>
            <div class="logo-card-carousel carousel carousel--dark js-logo-cards-carousel">
                <div class="js-logo-cards">
                    <div class="logo-card--expandable js-card-expandable" data-target="group-2-logo-card-panel-0">
                        <div class="logo-card">Lorem Ipsum</div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-2-logo-card-panel-1">
                        <div class="logo-card">Lorem ipsum dolor sit</div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-2-logo-card-panel-2">
                        <div class="logo-card">Lorem Ipsum</div>
                    </div>

                    <div class="logo-card--expandable js-card-expandable" data-target="group-2-logo-card-panel-3">
                        <div class="logo-card">Lorem Ipsum</div>
                    </div>
                </div>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-2-logo-card-panel-0" data-logo-card-panel="group-2-logo-card-panel-0">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 1 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-2-logo-card-panel-1" data-logo-card-panel="group-2-logo-card-panel-1">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 2 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-2-logo-card-panel-2" data-logo-card-panel="group-2-logo-card-panel-2">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 3 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>

            <div class="logo-card-panel js-logo-card-panel" id="group-2-logo-card-panel-3" data-logo-card-panel="group-2-logo-card-panel-3">
                <div class="">
                    <a href="#" class="logo-card-panel__close js-logo-card-close">
                        <i class="fa fa-close"></i>
                    </a>
                </div>
                <p>Panel 4 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam reprehenderit obcaecati cupiditate fugit pariatur nihil, dolor minima deleniti voluptas maiores veritatis odio minus unde libero, harum nobis. Voluptatem, iure mollitia.</p>
            </div>
        </div>
    </div>
</div>

.logo-cards {
  background-color: $color-base-blue;
  color: $color-base-white;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.logo-cards__inner {
  max-width: 1170px;
  margin: 0 auto;
}

.logo-cards-group {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}

.logo-card-group-title {
  @include typeTitle(true);
}

.logo-card-carousel {
  position: relative;
  margin: 0 -1.5rem 2.4rem;
}

.logo-card {
  @include typeHeadline(true);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16.4rem;
  height: 16.4rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba($color-base-white, 0.1);
  margin: 0 0.8rem;

  &:hover {
    cursor: pointer;
    background-color: rgba($color-base-white, 0.3);
  }

  .logo-card--expandable.is-active & {
    background-color: $color-blue-medium;
  }
}

.logo-card__image {
  max-width: 100%;
  height: auto;
}

.logo-card-panel {
  display: none;
  position: relative;
  padding: 1.6rem 2.4rem 1.6rem 1.6rem;
  color: $color-base-blue;
  background-color: $color-base-white;
}

.logo-card-panel__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  color: $color-base-blue;
  font-size: 2rem;
  border: 0;
}

$(function () {
  const $carousel = $(".js-logo-cards-carousel");
  const $expandableCards = $(".js-card-expandable");
  const $close = $(".js-logo-card-close");

  $carousel.each(function (index, elem) {
    var $carousel = $(this);
    var $items = $carousel.find(".js-logo-cards");

    $items.slick({
      arrows: false,
      centerMode: true,
      infinite: false,
      mobileFirst: true,
      variableWidth: true,
      responsive: [
        {
          breakpoint: 1199,
          settings: {
            arrows: true,
            centerMode: false,
            slidesToScroll: 6,
            slidesToShow: 6,
          },
        },
      ],
    });
  });

  $expandableCards.on("click", function () {
    const $this = $(this);
    const $group = $this.closest(".js-logo-cards-group");

    const $target = $("#" + this.dataset.target);

    if ($target.length && !$this.hasClass("is-active")) {
      $group.find(".js-logo-card-close").click();
      $(this).toggleClass("is-active");
      $target.slideDown();
    }
  });

  $close.on("click", function (e) {
    e.preventDefault();
    const panel = $(this)
      .closest(".js-logo-card-panel")
      .data("logo-card-panel");
    $("[data-target=" + panel + "]").removeClass("is-active");
    $(this).closest(".js-logo-card-panel").slideUp();
  });
});