#ipad__wrapper {
    height: 100vh;
    width: 100vw;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    perspective: 1200px;
  }
  
  #my__ipad {
    transform: rotate3d(1, 0, 0, 30deg);
  }
  
  #ipad__border {
    background: linear-gradient(131deg, #8a8a8a 0%, hsl(0, 0%, 41%) 100%);
  }
  
  #ipad__bezel {
    background: #222222;
    border-radius: inherit;
    box-shadow: 0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042,
      0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003;
    padding: 18px;
  }
  
  #ipad__screen {
    width: 700px;
    aspect-ratio: 4/3;
  }
  
  #ipad__images {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  
  .col {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 10px;
    transition: 200ms;
  }
  
  .col:hover {
    scale: 1.03;
  }
  
  .col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }