figure {
  width: 100%;
  aspect-ratio: 1;
  /* The aspect-ratio CSS property
     allows you to define the preferred 
     width-to-height ratio of an element. 
     This property helps maintain a consistent
      shape for the element, regardless of its 
      size or the content inside it. 
      By specifying an aspect ratio,
       you can ensure that the element scales
       responsively while keeping its proportions intact. */
  margin: 0 0 60px;
  padding: 5px 20px 0;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 100%;
  cursor: pointer;
  position: relative;
  filter: drop-shadow(0 0 20px rgb(0 0 0/50%));
}
figure:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: top/cover;
  transform-origin: bottom;
  filter: brightness(0.9);
  transition: 0.5s;
}
figure:before {
  background-image: url(../assets/Images/necro-back.jpg);
}
figure + figure:before {
  background-image: url(../assets/Images/druid-back.jpg);
}

img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: contrast(0.8) brightness(0.7);
  place-self: end center;
  transition: 0.5s;
}

figcaption {
  grid-area: 1/1;
  width: calc(100% + 40px);
  font-family: fantasy;
  color: #fff;
  font-size: min(32px, 5vmin);
  text-align: center;
  place-self: end center;
  transform: perspective(500px) translateY(100%) rotateX(-90deg);
  backface-visibility: hidden;
  transform-origin: top;
  background: #000;
  transition: 0.5s;
}

figure:hover img {
  width: 130%;
  height: 255%;
  filter: contrast(1);
}
figure:hover::before {
  filter: brightness(0.3);
  transform: perspective(500px) rotateX(60deg);
}
figure:hover figcaption {
  transform: perspective(500px) translateY(100%) rotateX(-30deg);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(230px, 35vmin);
  place-content: end center;
  gap: 50px;
  background: linear-gradient(#0000, rgb(50 50 50 / 88%)),
    url(../assets/Images/diablo-reaper-of-souls-mw-1360x768.jpg) top/cover;
}

.MDJAminDiv {
  z-index: 4444;
  position: fixed;
  bottom: 5%;
  left: 2%;
}

.MDJAmin {
  text-decoration: none;
  border-top: 1px dashed white !important;
  border-bottom: 1px dashed white !important;
  padding: 4px 2px;
  color: rgba(204, 204, 204, 0.414);
  font-family: monospace;
  font-style: italic;
  font-size: 1.3em;
  transition: all 0.5s;
}

.MDJAmin:hover {
  color: white;
}