<!-- based on layout from https://codepen.io/dael/project/full/AwBjOd/
moving animation to css using flex and transition on hight
-->

<body class="docCards">
  <header><h1>Header</h1></header>

  <main> 
    <section class="cards">   
      <!--a href="#card0">
        <img src="https://picsum.photos/300/201"/>  
        <h2>Title</h2>
        <span>type</span>
      </a-->
    </section>

    <section class="paper">
      <div class="nav"><a class="back">⬅ Back to list</a></div>
      <section class="content">
      <div class="group open">

        <!--article id="card0">

            <section class="keypeople">
              <h3>Nøkkelpersoner</h3>
              <div class="sub-items">

                <a href="#sub0">
                  <img alt="A pig" src="https://alwayspeachy.files.wordpress.com/2014/08/pig-03.jpg">
                  <h4>Subcategory</h4>
                  <span>Class</span>
                </a>
              </div>
            </section>

          </article-->
       </div>
      <div class="sub">
        <div class="nav"><a class="back">⬅ Back to group</a></div>
      </div>
      </section>
      <footer>
        <div>
          <a href="#Landingside">Landingside</a>
          <a href="#Prosjektinfo">Prosjektinfo</a>
          <!-- <a href="#">Skru av lyd</a> -->
        </div>
        <div>Design av <a href="https://www.designcontainer.no/">Design Container</a></div>
      </footer> 
    </section>
    
  </main>
  
<div aria-hidden="true" id="decoration">
    <div class="ticks">
      <div class="top">
        <b></b> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <b></b>
      </div>
      <div class="left">
        <b></b> <i></i> <i></i> <i></i> <i></i> <b></b>
      </div>
      <div class="right">
        <b></b> <i></i> <i></i> <i></i> <i></i> <b></b>
      </div>
      <div class="bottom">
        <b></b> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <b></b>
      </div>  
    </div>

    <svg class="arrow" viewBox="0 0 5.6 62.2">
      <path transform="rotate(180, 3, 27)" d="M4 .3V13M2 .2v13.2M5 42l-.2-.6M3 7.5V55M3 42l2-1-2 13.8L.5 41z"></path>
      <text x="1" y="56.7" transform="scale(.9142 1.09386)">N</text>
    </svg>
</div>  
  
  <footer>My feets</footer>

</body>
.docCards{
  /**************** Overriding  existing CSS  ****************/
  &>header {padding-top: 20px;}
  #decoration, &>footer {display: none;}
  &>main{
    overflow-x: hidden;
    padding: 0;
    &::before,&::after {display: none;}  
  }
  &::after{
    content: "";
    display: block;
    position: absolute;
      bottom: 0;
      left: 0; right: 0;
    height: 30px;
    pointer-events: none;
    background-image: linear-gradient(rgba(21, 18, 24, 0) 0%, #151218 100%);
  }
  &.open::after{
    background-image: linear-gradient(rgba(253,243,226, 0) 0%, rgba(253,243,226, 1) 100%);
    z-index: 1;
  }
  
  
  
/**************** CARDS  ****************/
$cardH: 300px;
$cardAnimS: 1s;
.cards{
  flex: 1;
  flex-shrink: 0;
  display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  width: calc(100% + 18px);  // Hide scrollbar
    overflow-y: scroll;
    overflow-x: hidden;  
  padding-top: 20px;
  a {
    position: relative;
    display: flex;
      flex-direction: column; 
      justify-content: flex-end;
    height: $cardH;
    flex: 0 0 100%;
      @for $i from 2 through 8 {@media screen and (min-width: ($i * 400px)) { 
          flex: 0 0 (100%/$i);
      }}
    overflow: hidden;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .8) 100%);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    img{
      position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
  
      width: 100%; height: 100%;
      object-fit: cover;
      filter: grayscale(1);
      transition: transform .5s ease-in;
    }
    &:hover{img{transform: scale(1.2);}}
    &::after{
      content: "";
      display: block;
      position: absolute;
        top: 0; bottom: 0;
        left: 0; right: 0;
        z-index: -1;
      background-color: rgb(245, 171, 69);
        mix-blend-mode: multiply;
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {  // IE fallback
        background-color: rgba(245, 171, 69, 0.8); 
      }     
    }
    h2{
      order: 1;
      margin: 0; padding: 10px 30px 30px 30px;
      font-size: 1.8em;
      font-weight: normal;
    }      
    span{
      order: 0;
      padding: 0 30px;
      font-weight: bold;
    }
    font-family: "Lato", sans-serif;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;
    color: white;     
  }
}

  
/**************** PAPER - content ****************/  
.paper{
  position: relative;
    z-index: 1;
  display: flex;
    flex-direction: column;
    justify-content: flex-start;
  overflow: hidden;
  flex: 0;
  background-color: #fdf3e2;
  background-image: url("https://www.transparenttextures.com/patterns/rice-paper-2.png");
  color: black;
  &, & .sub{
    border-top: 1px solid rgba(141, 140, 143, 0.2);
    box-shadow: 0px -5px 10px -5px rgba(110, 104, 110, 0.9);  
  }
  
    .nav{
      width: 100%; max-width: 900px;
      margin: 15px auto; padding: 0 4vw;
    }  
  .content{
    display: flex;
      flex-direction: column;
      justify-content: flex-start; 
    flex: 1;
    height: 100%;
    .group, .sub{
      overflow: hidden;
      flex: 0 0px;
      &.open{
        flex: 1;
        //flex: 1 0 auto;
      }
    }    
  }

    article{
        max-width: 800px;
        margin: 0 auto; padding: 0 4vw;  
    }
    h3{text-align: center;}
  
  section.keypeople{
    .sub-items{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;

      a{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100px;
        margin: 0 40px 40px 40px;
        text-decoration: none;

        img{
          height: 100px; width: 100px;
          border-radius: 50%;
          object-fit: cover;         
        }
        h4, span{
          margin: 5px 0 0 0; padding: 0;
          color: black;
          font-size: .8em;
          white-space: nowrap;
          text-align: center;            
        }
        span{
          text-transform: lowercase;
          color: #8d8c8f;
        }
      }            
    }
  }

    footer{
      padding: 10px 4vw 20px 4vw;
      background: none; // override existing CSS
      &::before{
        content: "";
        position: absolute;
          top: 0;
          left: 0; right: 0;
        display: block;
        border-top: 1px solid rgba(141, 140, 143, 0.2);
        height: 0;  background: none;  // override existing CSS
      }
    }
  }
  
/**************** Open content  ****************/
/* https://codepen.io/brundolf/pen/mWWrOe */
  .cards,.paper, .paper .group, .paper .sub  {
    transition: flex $cardAnimS ease-out; // note that we're transitioning flex, not height!
    height: auto;
  }
  &.open{
     .cards{
      flex: 0 0 $cardH;
      height: $cardH;
      &::after{
        content: "";
        display: block;
        height: 100vh; width: 1px;
      }
      a:not(.active)::after{
        background-image: linear-gradient(rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .7) 100%);
      }
    }   
    
    .paper{
      flex: 1;
      animation-name: paperOverflow;  
        animation-delay: $cardAnimS;
        animation-fill-mode: forwards;
    }
  }
  @keyframes paperOverflow {
    100% {overflow: initial;}
  }
}




/**************** Reusable styling  ****************/
  .back{
    cursor: pointer;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 1.5px;
    font-weight: bold;    
  }
View Compiled
//******************************************************************************
//Add dummy content
var numItems = 20, $b = $('.docCards'), $cards = $b.find( "section.cards" ), $paper = $b.find( "section.paper" ),
    arrSubPic = ["https://alwayspeachy.files.wordpress.com/2014/08/pig-03.jpg", "https://i0.wp.com/www.wikitricky.com/wp-content/uploads/2018/02/AMVC-Piglet.jpg?resize=600%2C400","https://c.pxhere.com/photos/ba/10/cow_animal_cow_head_cows_cattle_animals_white_milk_cow-984028.jpg!d"],
    subHTML = "";

$.get("https://baconipsum.com/api/?type=filler&format=html", function( fill ) {
for (i = 0; i < arrSubPic.length; i++){
  subHTML += '<a href="#sub'+i+'">\
                  <img alt="A pig" src="'+arrSubPic[i]+'">\
                  <h4>Subcategory</h4>\
                  <span>Class</span>\
                </a>';
  
      $paper.find('.sub').append('\
        <article id="sub'+i+'">'
          +fill+'\
        </article>');  
}

  $.get("https://baconipsum.com/api/?type=meat-and-filler&format=html", function( lorem ) {
    for (i = 0; i < numItems; i++){
      $cards.append('\
         <a href="#card'+i+'">\
          <img src="https://picsum.photos/30'+i+'/201/"/>\
          <h2>Title</h2>\
          <span>type</span>\
        </a>'
      );
      $paper.find('.group').append('\
        <article id="card'+i+'">'
          +lorem+'\
          <section class="keypeople">\
            <h3>Subitems</h3>\
            <div class="sub-items">'
              +subHTML+
            '</div>\
          </section>\
        </article>');
    };
  });
});

//******************************************************************************





//Open content on card click
var curScrollPos = 0, itemScrollPos = 0, orgLeft = 0, orgNum = 0;
$('.docCards').on('click', '.cards a', function(e){ e.preventDefault(); // Prevent jump to anchor
  var $t = $(this);                             
  $('.active').removeClass('active'); $t.addClass('active'); 
  $paper.scrollTop( 0 ).find('article').hide().siblings($t.attr('href')).show();
  $b.find( '.group' ).addClass('open');       
     //Get active org positions for resizing                                                       
     orgLeft = $t.position().left;
     orgNum = Math.round(orgLeft/400);
                                                              
  if(!$b.hasClass('open')){
    //Get org positions for when closing      
      curScrollPos = $cards.scrollTop();
      itemScrollPos = $cards.scrollTop() + $t.position().top - 20;        
    //Scroll selected card to top   
      $cards.animate({ scrollTop: $cards.scrollTop() + $t.position().top - 20 },{
        duration: 900, //$t.position().top/3*2, 750 bottom - 900 top
        complete: function(){setTimeout(function(){
          
          //Add styling for wrapping end overflow
          $cards.css({
            'flex-wrap':'nowrap',
            'overflow-y': 'hidden' //Opera fix
          });
          $paper.css({
            'flex': '1 0 auto' //Opera fix
          });
          //Scroll
          var scrollTo = $t.position().left - orgLeft,
              scrollW = $cards[0].scrollWidth;
              if (scrollTo > scrollW){scrollTo = scrollW} $cards.scrollLeft(scrollTo).scrollTop(0); //ScrollTop = Opera fix
              //checkScrollLR(); //To force check of refuiered scroll areas
        }, 300);}
      });
    $b.addClass('open');
  };                                   
}).on('click', '.sub-items a, .sub > .nav a.back', function(e){
  if(!$(e.target).hasClass('back')){
    $paper.find('.sub article').hide().siblings($(this).closest('a').attr('href')).show();
  } setTimeout(function(){ // Give time to manipulate DOM
    $('.group, .sub').toggleClass('open');
  }, 300);
}).on('click', '.paper > .nav a.back', function(){
  $('.open').removeClass('open');
  $('.active').removeClass('active');
  $cards.css({
      'flex-wrap':'wrap',
      'overflow-y': 'scroll' //Opera fix
    }).scrollTop(itemScrollPos).animate({
      scrollTop: curScrollPos
    });
  $paper.css({
      'flex': '' //Opera fix
    });
});


$( window ).resize(function() {
  console.log('*********resize*******')
  var $curActiveItem = $('.active'),
      numItemsFitWidth = Math.round($b.width() / $curActiveItem.width()),
      calcNum = Math.max(Math.min(numItemsFitWidth-orgNum, orgNum), 0),
      scrollTo = ($curActiveItem.index()-calcNum)*$curActiveItem.width();
    $cards.scrollLeft(scrollTo);
});

External CSS

  1. https://codepen.io/dael/pen/eVbKva.scss

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js