/** Setup **/

body {
  margin: 0;
  padding: 0;
  background: #fff9e8;
  min-height: 100vh;
  font-family: sans-serif;
  color: #151412
}
body::before{
	display: block;
	content: '';
	height: 86px;
}
main { margin: 24px }

img { 
  float: left; 
  margin: 12px 12px 12px 12px;
	margin-right: 25px;
}


 main > * { 
  border: solid 1px #bfbfbf;
  padding: 12px;
} 
main > *, section { display: flow-root }

p, ul { line-height: 1.5;
 
}

article p span { display: block; }
article p span:last-of-type,
article p span:nth-last-child(2) {
  text-indent: 16px
}

.plays ul { margin-left: 162px }

/** Creating the grid **/                                     

main {
  display: grid;
 
  grid-template-columns: 
	grid-template-rows: auto;
  grid-template-areas:
  "header "
  "content "
	  "author"
  "  aside "
  "plays   "
  ;
  gap: 20px;
}
img{
	max-width: 100%;
}
header { grid-area: header }
article { grid-area: content;
 
}
aside { grid-area: aside }
.author-details { grid-area: author }
.plays { grid-area: plays }
footer { grid-area: footer }

@media (min-width: 955px) {
	 
  main {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "header  header  header"
    "content author aside"
    "content plays aside "
    "footer  footer  footer";
  }
}
a: