.grid-container {
  display: grid; 
  height: 90%;
  width: 100%;
 
  grid-template-columns: 15% 85% ;
  grid-template-rows: 20px 130px 72vh 30px;
      
gap: 10px 4px;
background-color: #ebf8ef;

padding-left: 15px;
padding-right: 15px;
 
}

.grid-item {
  
  text-align: left;
  align-self: stretch;
  padding: 1.5em;
  font-size: 1em;

   
}

.navigation {
    grid-area: 1 / 1 / 2 / 3;
    justify-self: center;
    background-color:  black;
   
    
    
}

.logo {
   grid-area: 2 / 1 / span 2 / span 1;
   padding-top: 30px;
   background-color: #ebf8ef;
   overflow: h;
  
 
}

.page-header {
    grid-area: 2 / 2 / span 1 / span 1;
    padding-top: 10px;
    background-color: #ebf8ef;
    
     
}

.content-card {
  grid-area: 3 / 2 / 4 / 3;
  min-height: 0;
  height: 100%;
  overflow: auto;
  
 vertical-align: middle;
 text-align: left;
 
 background-color: #ebf8ef;
}

.content-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-y: hidden;
  
  padding: 10px;

}

.footer {
    grid-area: 4 / 1 / 5 / 3;
    justify-self: center;
    background-color:  hotpink;
    
}