<div class="viewport">
  <div class="app">
    
    <header class="header">
      <i class="fas fa-arrow-left"></i>
      <p>dashboard</p>
      <i class="fas fa-equals"></i>
    </header>

    <ul class="hs full no-scrollbar">
      <li class="item">
        <i class="fas fa-credit-card"></i>
        <p>6.543.780</p>
      </li>

      <li class="item">
        <i class="fas fa-euro-sign"></i>
        <p>1.345.560</p>
      </li>

      <li class="item">
        <i class="fas fa-dollar-sign"></i>
        <p>3.233.210</p>
      </li>

      <li class="item">
        <i class="fas fa-chart-line"></i>
        <p>insight data</p>
      </li>
      
    </ul>
    
    <div class="app--body no-scrollbar">
      <ul class="vs">
        <li class="item">
          <img src="https://randomuser.me/api/portraits/men/68.jpg" alt="">
          <div class="item--text">
            <h3>Name Surname</h3>
            <p>Some detail of investor</p>
          </div>
        </li>
        <li class="item">
          <img src="https://randomuser.me/api/portraits/women/71.jpg" alt="">
          <div class="item--text">
            <h3>Name Surname</h3>
            <p>Some detail of investor</p>
          </div>
        </li>
        <li class="item">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
          <div class="item--text">
            <h3>Name Surname</h3>
            <p>Some detail of investor</p>
          </div>
        </li>
        <li class="item">
          <img src="https://randomuser.me/api/portraits/men/66.jpg" alt="">
          <div class="item--text">
            <h3>Name Surname</h3>
            <p>Some detail of investor</p>
          </div>
        </li>
        <li class="item">
          <img src="https://randomuser.me/api/portraits/men/73.jpg" alt="">
          <div class="item--text">
            <h3>Name Surname</h3>
            <p>Some detail of investor</p>
          </div>
        </li>
        <li class="item">
          <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="">
          <div class="item--text">
            <h3>Name Surname</h3>
            <p>Some detail of investor</p>
          </div>
        </li>
        <li class="item">
        <img src="https://randomuser.me/api/portraits/men/63.jpg" alt="">
          <div class="item--text">
            <h3>Name Surname</h3>
            <p>Some detail of investor</p>
          </div>
        </li>
        <li class="item">
          <img src="https://randomuser.me/api/portraits/men/69.jpg" alt="">
          <div class="item--text">
            <h3>Name Surname</h3>
            <p>Some detail of investor</p>
          </div>
        </li>
        <li class="item">
          <img src="https://randomuser.me/api/portraits/men/65.jpg" alt="">
          <div class="item--text">
            <h3>Name Surname</h3>
            <p>Some detail of investor</p>
          </div>
        </li>
        <li class="item">
          <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="">
          <div class="item--text">
            <h3>Name Surname</h3>
            <p>Some detail of investor</p>
          </div>
        </li>
      </ul>
    </div>
    
    <footer class="footer">
      <i class="fas fa-user-alt"></i>
      <i class="fas fa-wallet"></i>
      <i class="fas fa-chart-pie"></i>
      <i class="fas fa-cog"></i>
    </footer>
  </div>
</div>

:root {
  --gutter: 20px;
  --c-primary: #2191fb;
}

body {
  background: #fff;
  color: #999999;
  font-family: sans-serif;
  padding: 5rem;
}

p {
  font-size: 0.9rem;
  line-height: 1.2;
}

i {
  font-size: 1.5rem;
}

ul {
  list-style: none;
  display: inline;
  margin: 0;
}

.viewport {
  width: 320px;
  height: 650px;
  max-width: 95vw;
  box-shadow: 0 0 5rem rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  //background: #9bbbf2;
  background: var(--c-primary);
  overflow: hidden;
}

header {
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - var(--gutter));
  padding: 0 calc(var(--gutter) / 2);
}

footer {
  width: calc(100% - var(--gutter) * 2);
  background: var(--c-primary);
  color: #fff;
  position: absolute;
  bottom: 0;
  padding: var(--gutter);
  border-radius: 1.5rem;
  box-shadow: 0 -0.3rem 1rem rgba(0, 0, 0, 0.1);

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.app {
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: start;

  &--body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75%;
    width: calc(100% - (var(--gutter) + 10px)*2);
    background: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.17);

    padding: var(--gutter) calc(var(--gutter) + 10px);
  overflow-y: scroll;
  }
}

.app > * {
  grid-column: 2 / -2;
}

.app > .full {
  grid-column: 1 / -1;
}

.hs {
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 10px;
  grid-template-rows: minmax(80px, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - var(--gutter) * 2);

  overflow-x: scroll;
  scroll-snap-type: x proximity;
  overflow-y: visible;
  padding-bottom: var(--gutter);
  padding-left: 0;
  z-index: 1;

  .item {
    border-radius: 0.5rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    //justify-content: space-between;
    padding: 0.7rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.17);

    & > * {
      margin: 0;
    }

    i {
      color: var(--c-primary);
    }

    p {
      margin: 0.5rem 0;
    }
  }
}

.hs:before,
.hs:after {
  content: "";
  width: 10px;
}

.vs {
  position: absolute;
  top: 4rem;
  padding: 0;
  padding-bottom: 64px;
  width: calc(100% - (calc((var(--gutter) + 10px)*2)));
  
  .item {
    height: 3rem;
    width: calc(100% - (.7rem*2));
    padding: .7rem;
    margin: 10px 0;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.08);
    
    display: grid;
    grid-template-columns: 3rem 1fr;
    grid-template-rows: 100%;
    grid-gap: .7rem;
    align-items: center;
    
    & > * {
      margin: 0;
      padding: 0;
    }
    
    img {
      width: 3rem;
      height: 3rem;
      border-radius: 100%;
    }
    
    &--text {
      h3, p{
        line-height: 1.5;
        margin: 0;
      }
      
      h3 {
        font-size: .9rem;
      }
      
      p {
        font-size: .7rem;
      }
    }
  }
}

/* remove scroll-bar */
.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}