body {
      background-color: black;
      color:#f1f1f1;
      margin-top: 30px;
      margin-bottom: 10px;
      margin-right: 20px;
      margin-left: 20px;
    }
    .grids-container {
        display: grid;
        align-content: center;
        height: 90vh;
        padding: 0.4vh;
    }

    .grids-container>div {
      padding: 0.4vmin;
      text-align: center;
      font-size: 25vmin;
    }
    
figure {
  border: 0;
  padding: 0;
  margin: auto;
}

figcaption {
  display: none;
  background-color: black;
  color: white;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}
    img {
      border: 0;
      border-radius: 3vmin;
      width: 100%;
      padding: .3vmin;
      object-fit: contain;
    }
[popover] {
  background-color: black;
  color:cornsilk;
}
[popover] img {
  padding: 0;
}
::backdrop {
  backdrop-filter: blur(20px);
}
button {
  background-color: black; 
}

    a, a:visited {
      text-decoration: none;
    }
@media (orientation: landscape) {
  .grids-container {
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 1fr);
     }
   [popover] {
     position: absolute;
     width: 80vmin;
     height: 80vmin;
   }
    a img {
      width: 25vw;
      height: 25vh;
    }
}

@media (orientation: portrait) {
  .grids-container {
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 1fr);
     }
   [popover] {
     position: absolute;
     width: 80vmin;
     height: 80vmin;
   }
    a img {
      width: 25vw;
      height: 25vh;
    }
}