.layout {
  display: grid;
  grid-template-columns: 1fr 60% 1fr;
  grid-template-rows: repeat(2,auto);
  gap: 0.5em;
  width: 800px;
  margin: auto;
}

.layout div {
  padding: 10px;
}

.top {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
  display: grid;
  place-items: center;
}

.left {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  background-color: orange;
}

.middle {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background-color: yellow;
}

.right {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  background-color: green;
}

#container {
  grid-row: 1 / 3;
  grid-column: 1 / 4;
  padding: 12px;
  border-radius: 12px;
  background-image: url(image/background.gif);
  background-repeat: repeat;
  outline: solid 2px #e9fcff;
}

#carousel {
  width: 80%;
  margin-top: -193px;
}

#content {
  background-color: white;
  border-radius: 12px;
  
}

main {
  margin-top: 160px;
}