.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    grid-auto-rows: minmax(100px, auto);
  }
  
  .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
  
  .gi-one {
    grid-column: 1/3;
    grid-row: 1;
  }
  
  .gi-two {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
  }
  
  .gi-three {
    grid-column: 12;
    grid-row: 1;
  }
  
  .nav-tabs {
    display: inline-flex;
    width: 100%;
    overflow-x: auto;
    border-bottom: 2px solid #DDD;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }
  
  .nav-tabs>li.active>a,
  .nav-tabs>li.active>a:focus,
  .nav-tabs>li.active>a:hover {
    border-width: 0;
  }
  
  .nav-tabs>li>a {
    border: none;
    color: #666;
  }
  
  .nav-tabs>li.active>a,
  .nav-tabs>li>a:hover {
    border: none;
    color: #4285F4 !important;
    background: transparent;
  }
  
  .nav-tabs>li>a::after {
    content: "";
    background: #4285F4;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 1px;
    transition: all 250ms ease 0s;
    transform: scale(0);
  }
  
  .nav-tabs>li.active>a::after,
  .nav-tabs>li:hover>a::after {
    transform: scale(1);
  }
  
  .tab-nav>li>a::after {
    background: #21527d none repeat scroll 0% 0%;
    color: #fff;
  }
  
  .tab-pane {
    padding: 15px 0;
  }
  
  .tab-content {
    padding: 20px
  }
  
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .card {
    background: #FFF none repeat scroll 0% 0%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
  }
  
  body {
    background: #EDECEC;
  }
  
  .nav-tabs {
    display: inline-flex;
    width: 100%;
    overflow-x: auto;
    border-bottom: 2px solid #DDD;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }
  
  .nav-tabs>li.active>a,
  .nav-tabs>li.active>a:focus,
  .nav-tabs>li.active>a:hover {
    border-width: 0;
  }
  
  .nav-tabs>li>a {
    border: none;
    color: #666;
  }
  
  .nav-tabs>li.active>a,
  .nav-tabs>li>a:hover {
    border: none;
    color: #4285F4 !important;
    background: transparent;
  }
  
  .nav-tabs>li>a::after {
    content: "";
    background: #4285F4;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 1px;
    transition: all 250ms ease 0s;
    transform: scale(0);
  }
  
  .nav-tabs>li.active>a::after,
  .nav-tabs>li:hover>a::after {
    transform: scale(1);
  }
  
  .tab-nav>li>a::after {
    background: #21527d none repeat scroll 0% 0%;
    color: #fff;
  }
  
  .tab-pane {
    padding: 15px 0;
  }
  
  .tab-content {
    padding: 20px
  }
  
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .card {
    background: #FFF none repeat scroll 0% 0%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
  }
  
  body {
    background: #EDECEC;
  }