section#cards-container{
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	background: white;
	justify-content: space-around;
}

h3 a:visited,
h3 a{
	color: var(--dark-blue);
}

section{
	margin-bottom: 100px;
}

/*section#cards-container div{
	flex-basis: 45%;
	flex-grow: 0;
	margin-bottom: 0px;	
	position: relative;
}*/

section#cards-container img{
	width: 100%;
	height: auto;	
}
/*
section#cards-container .verso{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity .4s;
}
section#cards-container .verso:hover{
	opacity: 1;
}
*/


#cards-container .card {
  /*position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px;*/
  float: left;
  perspective: 300vw;
  flex-basis: 45%;
	flex-grow: 0;
	margin-bottom: 0px;	
	aspect-ratio: 1.4;
}

#cards-container .content {
  position: absolute;
  width: 100%;
  height: 100%;
 box-shadow: 0 0 15px rgba(0,0,0,0.25);
  transition: transform .6s;
  transform-style: preserve-3d;
}



#cards-container .recto,
#cards-container .verso {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 300px;
  color: #03446A;
  text-align: center;
  font-size: 60px;
  border-radius: 5px;
  backface-visibility: hidden;
}

#cards-container .verso {
  background: #03446A;
  color: white;
  transform: rotateY( 180deg );
}




@media only screen and (min-width: 800px) {

#cards-container .card:hover .content {
  transform: rotateY( 180deg ) ;
  transition: transform 0.3s;
}
}

@media only screen and (max-width: 800px) {

  #cards-container .card {
  flex-basis: 95%;
}

.card.turned .content{
  transform: rotateY( 180deg ) ;
}

}