* {
    margin: 0;
    padding: 2;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    
}


.container {
    display: grid;
    grid-template-columns: 16rem 1fr 16rem;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header header"
      "nav content sidebar"
      "footer footer footer";
    min-height: 60vh;
    box-sizing: border-box;
    border: 1px solid #46FF00
   
}



header {
    grid-area: header;
    padding: 1rem;
    outline: solid 1px #46FF00;
    outline-offset: -1px;
    background-color: #000000
}

nav {
    grid-area: nav;
    padding: 1rem;
    outline: solid 1px #46FF00;
    outline-offset: -1px;
    background-color: #000000
}

main {
    grid-area: content;
    padding: 2rem;
    outline: solid 1px #46FF00;
    outline-offset: -1px;
    background-color: #000000
}

aside {
    grid-area: sidebar;
    padding: 1rem;
    outline: solid 1px #46FF00;
    outline-offset: -1px;
    background-color: #000000
}

footer {
    grid-area: footer;
    padding: 1rem;
    outline: solid 1px #46FF00;
    outline-offset: -1px;
    background-color: #000000

@media (max-width: 1024px) {
  .service-item 
  padding: 2rem;
  text-align: left;
}
  
    .container {
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(5rem, auto) 1fr minmax(5rem, auto) auto;
      grid-template-areas:
      "header"
      "nav"
      "content"
      "sidebar"
      "footer";
    }