/* SPECIFIC CONTENT OF PAGE */
.hero{
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px;
  background: #caf5f7;

  display: grid;
  grid-template-columns: 240px 1fr 0px;  /* left / center / sidebar */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sound  poem"
    "left   poem"
    "illu   poem";
  gap: 20px;
  align-items: start;
}

.sound-btn{ grid-area: sound; justify-self: start; }
.left-text{ grid-area: left; }
.left-illu{ grid-area: illu; }
.poem{ grid-area: poem; text-align: center; }

.sound-btn{
    padding: 15px;
    border-radius: 100%;
    background-color: #3f7f8b;
    color: #2c5870;
    border: 4px solid #2c5870 ;
    font-size: 30px;
    transition: transform .08s ease, box-shadow .24s ease
}

.sound-btn:hover{
    transform: scale(1.09) rotate(-7deg);
    box-shadow: 4px 4px 5px #82cfdb;
}


.left-text{
    text-align: center;
    margin-right: 50px;
}

.left-illu img{
    max-width: 150px;
    height: auto;
    margin-left: 35px;
    transition: transform .38s ease
}

.left-illu img:hover{
    transform: scale(0.77) rotate(-15deg);
    
}

.poem{
    margin-left: 0px;
    font-size: 15px;
    line-height: 35px;
}

@media (max-width: 900px){

  .hero{
    grid-template-columns: 1fr;
    grid-template-areas:
      "sound"
      "left"
      "illu"
      "poem";
  }

}