.media {
   position: relative;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   /* background-color: rgb(80, 80, 80); */
   background-color: rgba(0, 0, 0, 0.05);
   aspect-ratio: 4/3;
   width: 100%;
   user-select: none;
}

.media > .wrapper {
   display: block;
   position: relative;
   backdrop-filter: blur(12px);
   padding: var(--space-md);
   width: inherit;
   height: 100%;
}

/* .media > .wrapper > .media-backdrop {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   z-index: 0;
   transition: opacity 300ms;
   background: rgba(34, 34, 34, 0.5);
   width: 100%;
   height: 100%;
} */

.media > .wrapper > picture,
.media > .wrapper > video {
   display: block;
   position: relative;
   z-index: 1;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
   border-radius: 4px;
   width: inherit;
   overflow: hidden;
}

.media > .wrapper > picture > img {
   display: block;
   width: inherit;
   height: inherit;
   object-fit: contain;
   object-position: center;
}

/* @media (min-width: 640px) and (hover: hover) {
   .media .wrapper > picture,
   .media .wrapper > video {
      transform: scale(1);
      transition: transform 150ms ease-in-out;
   }

   .project:hover .media .wrapper > picture,
   .project:hover .media .wrapper > video {
      transform: scale(1.075);
      transition: transform 300ms;
      transition-delay: 100ms;
   }
} */

@media (min-width: 640px) {
   .media > .wrapper {
      padding: 9%;
   }
}