* {
  margin: 0;
  padding: 0;
}
h3 {
  font-family: verdana, geneva, sans-serif;
  font-size: 12pt;
  font-weight: bold;
}
p {
  font-family: verdana, geneva, sans-serif;;
  font-size: 12pt;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
  "header header"
  "title title"
  "linn linn"
  "content content"
  "kajsa kajsa"
  "footer footer";
  grid-gap: 5px;
}

.header img.theCastleAtFront {
  width: 100%;
  height: auto;
  border-radius: 0px 0px 25px 25px;
}


.title {
/*  grid-column-start: 1;
  grid-column-end: 3;
*/
/*  grid-column: 1/3;
  grid-row: 1/3;
*/
  grid-area: title;
  margin: 10px;
}
.header {
  grid-area: header;
  align-self: center;
  border-bottom: #873234 dotted 5px;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
  margin: 10px;
/*
justify-self: center;
*/
  border-bottom: #873234 dotted 5px;
}

.linn {
  grid-area: linn;
  margin: 10px;
  border-bottom: #873234 dotted 5px;
}
.kajsa {
  grid-area: kajsa;
  margin: 10px;
  border-bottom: #873234 dotted 5px;
}
.footer {
  grid-area: footer;
  margin-bottom: 75px;
}

@media screen and (min-width: 736px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 400px 400px 1fr;
    grid-template-areas:
    ". header header ."
    ". title title ."
    ". linn linn ."
    ". content content ."
    ". kajsa kajsa ."
    ". footer footer .";
  }

}