@charset "UTF-8";

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 150px repeat(4, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: 'header header header header header'
    'nav title title title title'
    'nav   .    .   .    .'
    'footer footer footer footer footer';
  max-width: 1024px;
  height: 500px;
  margin: 40px auto;
  padding: 30px;
  background-color: #73e3ff91;
}

header,
nav,
.grid-title,
aside,
footer {
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
  color: #fff;
}

header {
  grid-area: header;
  background-color: #8e0a0fe8;
}

aside {
  grid-area: nav;
  background-color: rgb(74, 1009, 4);
}

article {
  background-color: #15788494;
}

.grid-title {
  grid-area: title;
  background-color: rgb(120, 79, 4);
}

footer {
  grid-area: footer;
  background-color: #112b9f91;
}