body {
  background-color: rgb(197, 197, 197);
  max-width: 1500px;
  margin: auto;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

/*Övning 1*/
.container1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background-color: white;
  padding: 10px;
  margin-bottom: 20px;
}

.container1 h3 {
  grid-column: 1/-1;
}

.item1 {
  padding: 20px;
  text-align: center;
  color: black;
  background: #dcdcff;
}

/*Övning 2*/
.container2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background-color: white;
  padding: 10px;
  margin-bottom: 20px;
}

.container2 h3 {
  grid-column: 1/-1;
}

.container2 div {
  padding: 20px;
  text-align: center;
  color: black;
  background: #ffd8d8;
}

.stor-box {
  grid-column: span 2;
}

.bred-box {
  grid-column: span 2;
}

/*Övning 3*/
.container3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 40px;
  grid-auto-rows: 100px;
  gap: 10px;
  background-color: white;
  padding: 10px;
  margin-bottom: 20px;
}

.container3 h3 {
  margin: 0%;
  grid-column: 1/-1;
}

.container3 div {
  display: grid;
  place-items: center;
  padding: 20px;
  color: black;
  background: rgb(220, 255, 234);
}

.stor-feature {
  grid-column: span 2;
  grid-row: span 2;
}

.bred-box5 {
  grid-row: span 2;
}

.bred-box {
  grid-column: span 2;
}

/*Övning 4*/
.container4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: white;
  padding: 10px;
  margin-bottom: 20px;
}

.container4 h3 {
  grid-column: 1/-1;
}

.container4 div {
  text-align: center;
  padding: 20px;
  color: black;
  background: rgb(255, 215, 255);
}

.header {
  grid-column: span 4;
}

.container4 .main-content {
  grid-column: span 3;
}

.container4 .footer {
  grid-column: span 4;
}

/* Övning 5 */
.container5 {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1.5fr 2.5fr;
  grid-template-areas:
    "title  title  title  title"
    "header header header header"
    "main main main menu"
    "footer footer footer footer";
  gap: 10px;
  background-color: white;
  padding: 10px;
  margin-bottom: 20px;
}

.container5 h3 {
  grid-column: 1/-1;
}

.container5 div {
  text-align: center;
  padding: 20px;
  color: black;
  background: rgb(188, 255, 255);
}

.container5 .header {
  grid-area: header;
}

.container5 .main {
  grid-area: main;
}

.container5 .menu {
  grid-area: menu;
}

.container5 .footer {
  grid-area: footer;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.container5 .menu {
  display: grid;
  gap: 10px;
}

.container5 .menu div {
  background: #ffc400;
}

.footer div {
  background: #ffc400;
}

/*Övning 4 2.0*/
.container4-2 {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "title  title"
    "header header"
    "menu main"
    "footer footer";
  gap: 10px;
  background-color: white;
  padding: 10px;
  margin-bottom: 20px;
}

.container4-2 h3 {
  grid-column: 1/-1;
}

.container4-2 div {
  text-align: center;
  padding: 20px;
  color: black;
  background: rgb(255, 215, 255);
}

.container4-2 .h3 {
  grid-area: title;
}

.container4-2 .header {
  grid-area: header;
}

.container4-2 .menu {
  grid-area: menu;
  gap: 0px;
}

.container4-2 .main-content {
  grid-area: main;
}

.container4-2 .footer {
  grid-area: footer;
}