body {
  margin: 2em;
  padding: 0;
  font-family: verdana, arial, helvetica,sans-serif;
  font-size: 1em;
}

article {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Set the columns per row */
  grid-auto-rows: minmax(80px, auto);
}

article section {
  margin: 0.5em;
  padding: 0;
  position: relative;
  min-width: 200px;
  min-height: 200px;
  border-width: 2px;
  border-color: #000;
  border-style: solid;
  background-repeat: no-repeat;
  background-size: cover;
}

.inset {
  margin: 0;
  padding: 5px;
  position: absolute;
  bottom: 0;
  right: 0;
  border-width: 2px 0 0 2px;
  border-color: #000;
  border-style: solid;
  font-family: 'Nanum Pen Script', cursive;
  background-color: #fff;
}

.speech {
  margin: 0;
  padding: 8px 8px 20px 8px;
  position: absolute;
  top: 35px;
  left: 20px;
  font-family: 'Nanum Pen Script', cursive;
  background-color: #fff;
  font-size: 1.2em;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 85% 75%, 85% 100%, 75% 75%, 0% 75%);
}


#panel1 {
  background-image: url("sincity1.jpg");
}

#panel2 {
  background-image: url("sincity2.png");
}

#panel3 {
  background-image: url("panel4.jpg");
  grid-column: 3;
  grid-row: 1/3;
}

#panel4 {
  background-image: url("panel3.jpg");
  grid-column: 1 / 3;
  filter: grayscale(100%);
}

@keyframes pan {
    to {
        background-position: 0% 40%;
        filter: grayscale(0%);
      }
}

.animate:hover {
  animation-name: pan;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.animate p {
  opacity: 0;
}

.animate:hover p {
  opacity: 1;
  transition:opacity 4000ms
}