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

body{
  background:white;
  overflow:hidden;
  font-family:Arial, Helvetica, sans-serif;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.menu{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:24px;
  display:flex;
  justify-content:flex-end;
  gap:24px;
  z-index:100;
}

.menu a{
  display:flex;
  align-items:center;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}

.menu a:hover{
  opacity:0.5;
}

.contenedor{
  width:100%;
  height:100vh;
  padding:70px 40px 70px;
  display:flex;
  justify-content:center;
  align-items:center;
  perspective:2000px;
}

.card{
  width:78vw;
  height:48vw;
  max-width:1150px;
  max-height:700px;
  cursor:pointer;
}

.card-inner{
  width:100%;
  height:100%;
  position:relative;
  transition:transform 0.9s ease;
  transform-style:preserve-3d;
}

.card.flipped .card-inner{
  transform:rotateY(180deg);
}

@media (hover:hover){
  .card:hover .card-inner{
    transform:rotateY(180deg);
  }
}

.card-front,
.card-back{
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  border-radius:18px;
  overflow:hidden;
}

.card-front picture,
.card-back picture{
  width:100%;
  height:100%;
}

.card-front img,
.card-back img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card-back{
  transform:rotateY(180deg);
}

@media(max-width:768px){
  .card{
    width:92vw;
    height:58vw;
  }

  .menu{
    padding:20px;
  }
}