Карусель с горизонтальной гармошкой?

Question

Как я могу сделать этот вид навигации?

pi c

Содержательная часть состоит из заголовка (аналитические возможности) и так называемых «плиток» а. По умолчанию, когда я открываю страницу, я вижу четыре плитки в их состоянии по умолчанию (не развернуто). B. После того, как я щелкну любую плитку, она должна развернуться и выглядеть похожей на плитку Labor Analytics на макете выше.

На данный момент мне удалось сделать только аккордеон. Как я могу сделать этот тип «перекрытия» плиток? Насколько я понимаю, это можно сделать либо с помощью абсолютного позиционирования, либо с помощью Grid, но я не могу понять, как это реализовать.

Заранее спасибо!

$('section').on('click', function () {
  $(this).siblings().removeClass('active');
  $(this).toggleClass('active');
});

$primary-color: #1C5C76;
@mixin transition {
  transition: all 0.6s ease-in-out;
}
@mixin transit($speed) {
  transition: all $speed ease-in-out;
}

* {
  box-sizing: border-box;
  color: white;
}

nav {  

}

section, figure {
  float:  left;
  width:  200px;
  height: 200px;
  border: 1px solid $primary-color;
  @include transition;
  background:
    linear-gradient(
      RGBA(28, 92, 118, 0.7), 
      RGBA(28, 92, 118, 0.5)
    ),
    url('http://placekitten.com/g/200/200');
  background-size: cover;

}

header {
  padding: 10px 10px 0px 10px;
  font-size: 20px;
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
  @include transition;
}

.line {
  height: 10px;
  border-bottom: 4px solid white;
  width: 80%;
  margin: 0 8px;
  @include transit(0.3s);
  transform: translate3d(0,20px,0);
  opacity:0;
}

section:hover .line {
  @include transit(0.3s);
  transform: translate3d(0,0px,0); 
  opacity:1;
}

.active .line {
  @include transit(0.3s);
  transform: translate3d(0,0px,0); 
  opacity:1;
}

.active {
  @include transition;
}

.content {
  background:
    linear-gradient(
      RGBA(48, 156, 200, 0.8),
      RGBA(48, 156, 200, 0.5)
    ),
    url('http://placekitten.com/g/300/300');
  width: 0;
  margin: 0;
  padding: 0;
  overflow:hidden;
  @include transition;
}

.active + .content {
  width:  300px;
  height: 200px;
  padding: 10px;
  @include transition;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <section>
    <header>About</header>
    <div class='line'></div>
  </section>
  <figure class='content'>
    Sed libero. Praesent vestibulum dapibus nibh. Vivamus consectetuer hendrerit lacus. Donec sodales sagittis magna. Integer tincidunt.
  </figure>
  <section>
    <header>Blog</header>
    <div class='line'></div>
  </section>
  <figure class='content'>
    Sed libero. Praesent vestibulum dapibus nibh. Vivamus consectetuer hendrerit lacus. Donec sodales sagittis magna. Integer tincidunt.
  </figure>
  <section>
    <header>Contact</header>
    <div class='line'></div>
  </section>
  <figure class='content'>
    Sed libero. Praesent vestibulum dapibus nibh. Vivamus consectetuer hendrerit lacus. Donec sodales sagittis magna. Integer tincidunt.
  </figure>
</nav>