* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; 
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

// Sample
html,body{
  height:100%;
}
body{
  background-color: #f4f2ee; 

}
main.sample{
    display:grid;
    grid-template-areas:
    "header header"
    "nav main";
    grid-template-columns: minmax(260px, 1fr) 3fr;    
    grid-auto-rows: minmax(60px, auto);    
    gap: 16px;
    height: 100%;
}

main.sample > header{   
  grid-area: header;
  background-color: #d9d9d9;
  height:60px;
  padding:5px;
}

main.sample > nav{   
  grid-area: nav;
  background-color: #d9d9d9;
  padding:5px;
}

main.sample > content{    
  grid-area: main;
  background-color: #d9d9d9;
  min-height:calc(100vh - 76px);
  padding:5px;
  /*overflow: auto;*/
}

@media (max-width: 768px) {
    main.sample{
        grid-template-areas:
        "header"
        "nav"
        "main";
        grid-template-columns: 1fr;       
    }
}