* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.title {
    padding: 40px;
    background: black;
    margin: 0;
    text-align: center;
}
body{
  background-color: #6f2da8
}

h1 {
    color: rgb(0, 196, 0);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    letter-spacing: 2px;
    text-shadow: 3px 3px rgb(5, 106, 91);
    font-size: 50px;
}
#cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.44rem;
    padding: 1.44rem 0.833rem; 
    
  }
  #cards figure{
    position: relative;
  }

  #cards a{
    border: solid 1px rgb(240 240 240 / 0.25);
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
  }

  #cards img {
    width: 100%;
    aspect-ratio: 16/6;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0;
  }

  #cards section{
    padding: 0.833rem;
  }

  #cards h3 {
    font-size: clamp(0.833rem, 1.6vw + 0.579rem, 1.728rem); 
  }

  #cards .over{
    position: relative;
  }

  
  #cards a:hover .over{
    transform: translateY(0);
    opacity: 1;
  }

#boxes{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 400px));
  gap: 1.44rem;
  padding: 1.44rem 0.833rem;
  justify-content: center;
  transform: translateY(200px);
}

#boxes img{
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  object-position: center center;
}

.box{
  position: relative;
  perspective: 700px;
  user-select: none;
 
}
.box article{
  transform-style: preserve-3d;
  transform: rotateX(0deg) ;
  transition: transform 0.5s;
  transform-origin: center ;
  
}

.front, .back{
  width: 300px;
  height: 200px;
  position: absolute;
  backface-visibility: visible;
  user-select: none;
  

}
.front{
  position: absolute;
  background: rgb(240 240 240 / 0.75);
  transform: rotateX(0deg) translate3d(0px, -100px, 100px);
  
}

.back{
  position: absolute;
  background: rgba(22, 109, 196, 0.75);
  transform: rotateX(-90deg) translate3d(0px, 0px, 0px);

}

.box:hover article{
  transform: rotateX(120deg);
}
h2{
    color: black;
}