<div class="site">
  <header>Header</header>
  <main>Main Content</main>
  <aside class="left-sidebar">Left Sidebar</aside>
  <aside class="right-sidebar">Righ Sidebar</aside>
  <footer>Footer</footer>  
</div>

.site {
  min-height: 100vh;
  display: grid;
  grid-template-areas: "header" "main" "left-sidebar" "right-sidebar" "footer";     
  gap: 1rem;
  padding: 1rem;
  background-color: #f9904a;
}

@media (min-width: 600px) {
  .site {
    grid-template-columns: minmax(auto, 250px) minmax(250px, 1fr) minmax(auto, 250px);
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas: "header header header"
                         "left-sidebar main right-sidebar"
                         "footer footer footer";    
  }
}

header {
  grid-area: header;
}

.left-sidebar {
  grid-area: left-sidebar;
}

.right-sidebar {
  grid-area: right-sidebar;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}








.site > * {
  background-color: #fff;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;  
  color: #f38801;
  border-radius: 10px;
  box-shadow:
    0.3px 0.5px 0.7px hsl(23deg 93% 31% / 0.36),
    0.8px 1.6px 2px -0.8px hsl(23deg 93% 31% / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(23deg 93% 31% / 0.36),
    5px 10px 12.6px -2.5px hsl(23deg 93% 31% / 0.36);  
}








/*
    👇 just to make this demo beautiful for you
*/

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  font: 24px/1.6 'Courgette', cursive;
}

body {  
  height: 100%;
}

.t {
  background: transparent;
  border: 1px dashed #fff;
  box-shadow: none;
}