/* --------------------------------------------------
Contents
-------------------------------------------------- */
.contents {
  padding-block: 0;
}
.contents .visual {
  display: none;
}
.contents .visual .grid {
  display: grid;
  place-items: center;
  padding-block: 6.07svh 0;
  height: 100svh;
}
.contents .visual .grid .media {
  display: none;
  width: 71.25%;
}
.contents .visual .grid .media img {
  aspect-ratio: 2/3;
}
.contents .visual .grid .media.is-active {
  display: block;
}
.contents .visual.is-active {
  display: block;
}

.footer {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
}

@media screen and (min-width: 768px) {
  .contents .visual .grid {
    grid-template-columns: repeat(2, min(27.78%, (100vh - 11.5rem) * 0.6));
    gap: 5.14%;
    justify-content: center;
    padding-block: 3.88svh 0;
  }
  .contents .visual .grid .media {
    display: block;
    width: 100%;
  }
}