@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap');

$transition-time: 2.3s;

body{
  font-family: 'Oswald', sans-serif;
  background-color: #212121;
  section{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    .row{
      align-items: center;
      height: 100vh;
    }
  }
}
.card{
  position: relative;
  height: 300px;
  width: calc(100% - 40px); /* Уменьшает ширину карточки для увеличения отступов */
  margin: 20px 20px; /* Добавляет отступы со всех сторон */
  transition: ease all $transition-time;
  perspective: 1200px;
  &:hover{
    .cover{
      transform: rotateX(0deg) rotateY(-180deg);
      &:before{
        transform: translateZ(30px);
      }
      &:after{
        background-color: black;
      }
      h1{
        transform: translateZ(100px);
      }
      .price{
        transform: translateZ(60px);
      }
      a{
        transform: translateZ(-60px) rotatey(-180deg);
      }
    }
  }
  
  .cover{
    position: absolute;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    transition: ease all $transition-time;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    &:before{
      content: '';
      position: absolute;
      border: 5px solid rgba(255,255,255,.5);
      box-shadow: 0 0 12px rgba(0,0,0,.3); 
      top:20px;
      left:20px;
      right:20px;
      bottom:20px;
      z-index: 2;
      transition: ease all $transition-time;
      transform-style: preserve-3d;
      transform: translateZ(0px);
    }
    &:after{
      content: '';
      position: absolute;
      top:0px;
      left:0px;
      right:0px;
      bottom:0px;
      z-index: 2;
      transition: ease all 1.3s;
      background: rgba(0,0,0,.4);
    }
    &.item-a{
      background-image: url('https://images.unsplash.com/photo-1520412099551-62b6bafeb5bb?auto=format&fit=crop&w=600&q=80');
    }
    &.item-b{
      background-image: url('https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=600&q=80');
    }
    &.item-c{
      background-image: url('https://images.unsplash.com/photo-1525945518069-b924046d1385?auto=format&fit=crop&w=600&q=80');
    }
    h1{
      font-weight: 600;
      position: absolute;
      bottom: 55px;
      left: 50px;
      color: white;
      transform-style: preserve-3d;
      transition: ease all $transition-time;
      z-index:3;
      font-size: 3em;
      transform: translateZ(0px);
    }
    .price{
      font-weight: 200;
      position: absolute;
      top: 55px;
      right: 50px;
      color: white;
      transform-style: preserve-3d;
      transition: ease all $transition-time;
      z-index:4;
      font-size: 2em;
      transform: translateZ(0px);
    }
  }
  .card-back{
    position: absolute;
    height: 100%;
    width: 100%;
    background: #0b0f08;
    transform-style: preserve-3d;
    transition: ease all $transition-time;
    transform: translateZ(-1px);
    display: flex;
    align-items: center;
    justify-content: center;
    a{
      transform-style: preserve-3d;
      transition: ease transform $transition-time, ease background .5s;
      transform: translateZ(-1px) rotatey(-180deg);
      background: transparent;
      border: 1px solid white;
      font-weight: 200;
      font-size: 1.3em;
      color: white;
      padding: 14px 32px;
      outline: none;
      text-decoration: none;
      &:hover{
        background-color: white;
        color: #0b0f08;
      }
    }
  }
}