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

/* CSS for cards we can add this anywhere we would like to use cards */
#cards {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(200px, 400px)); */
  /* this is easier, but not as nice as using @media queries for breakpoints */
  grid-template-columns: 1fr;
  gap: 1.44rem;
  padding: 1.44rem 0.833rem; /* remember top right bottom left */
  
}
#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);
  /* opacity transition*/
  

}

#cards p{
  /* opacity transition*/

}

#cards .over{
  position: relative;
  /* move card down top = 1.728rem opacity transition*/

}

/* better to put these styles with related styles, but gathering all animation styles here to make it easier to find */

#cards a:hover {
  /* transition color */

}

/* hover is still on the link, 'a' but style applies to h3 & p inside link element */
#cards a:hover h3, #cards a:hover p{
  /* opacity 1*/

}

#cards section{
  /* transform 2.074rem transition */
 
}

#cards a:hover section{
  /* translate 0 */
  
}

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

/* box styles */
#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); /* move the whole grid down because we move the boxes up to center the rotation*/
}

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

.box{
position: relative;
perspective: 700px;
user-select: none;

}
.box article{
transform-style: preserve-3d;
/* move the whole box down, then 3d-transform the center back up */
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(90deg);
}

/* responsive styles for cards*/
@media screen and (min-width:525px) {
  #cards {
    grid-template-columns: 1fr 1fr;
  }
}


@media screen and (min-width:925px) {
  #cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}