.container {
  display: grid;
  max-width: 375px;
  min-height: 700px;
  margin: auto;
  grid-template-rows: 40px 180px auto 40px;
  border: 2px solid #626262;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px 20px;
  row-gap: 10px;
}

.nav {
  background-color: #ffffff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.nav-name {
  color: #ea5b3c;
  font-size: 20px;
  font-weight: 600;
}
.nav-menu {
  color: #626262;
  font-size: 30px;
  font-weight: 600;
  justify-self: end;
}
.banner {
  background-color: #ffecd5;
  border-radius: 20px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 100%;
  gap: 10px;
}
.banner-item1 {
  background-color: #feffe4;
}
.banner-item2 {
  background-color: #feffe4;
}
.main {
  background-color: #ffffff;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 120px) 150px;
  gap: 10px;
}
.item {
  border-radius: 10px;
}
.main-item1 {
  grid-column: span 3;
  background-color: #fdc788;
}
.main-item2 {
  grid-column: span 3;
  background-color: #ff9d9c;
}
.main-item3 {
  grid-column: span 2;
  background-color: #95ffb9;
}
.main-item4 {
  grid-column: span 2;
  background-color: #80c3f2;
}
.main-item5 {
  grid-column: span 2;
  background-color: #a281e7;
}
.main-item6 {
  grid-column: span 5;
  background-color: #f0f0f0;
}
.main-item7 {
  grid-column: span 1;
  background-color: #f0f0f0;
}
.footer {
  background-color: #6a85f0;
  border-radius: 10px;
  padding: 10px;
  color: white;
}