<style lang="scss">

@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: 400px;
width: 100%;
margin: 10px 0;
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('img/loem.jpg');
    }
    &.item-b{
    background-image: url('img/niscalac.jpg');
    }
    &.item-c{
    background-image: url('img/niscalab.jpg');
    }
    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;
    }
    }
}
}

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap");
body {
font-family: "Oswald", sans-serif;
background-color: #212121;
}
body section {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
body section .row {
align-items: center;
height: 100vh;
}

.card {
position: relative;
height: 400px;
width: 100%;
margin: 10px 0;
transition: ease all 2.3s;
perspective: 1200px;
}
.card:hover .cover {
transform: rotateX(0deg) rotateY(-180deg);
}
.card:hover .cover:before {
transform: translateZ(30px);
}
.card:hover .cover:after {
background-color: black;
}
.card:hover .cover h1 {
transform: translateZ(100px);
}
.card:hover .cover .price {
transform: translateZ(60px);
}
.card:hover .cover a {
transform: translateZ(-60px) rotatey(-180deg);
}
.card .cover {
position: absolute;
height: 100%;
width: 100%;
transform-style: preserve-3d;
transition: ease all 2.3s;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.card .cover:before {
content: "";
position: absolute;
border: 5px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
z-index: 2;
transition: ease all 2.3s;
transform-style: preserve-3d;
transform: translateZ(0px);
}
.card .cover: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, 0.4);
}
.card .cover.item-a {
background-image: url("img/loem.jpg");
}
.card .cover.item-b {
background-image: url("img/niscalac.jpg");
}
.card .cover.item-c {
background-image: url("img/niscalab.jpg");
}
.card .cover h1 {
font-weight: 600;
position: absolute;
bottom: 55px;
left: 50px;
color: white;
transform-style: preserve-3d;
transition: ease all 2.3s;
z-index: 3;
font-size: 3em;
transform: translateZ(0px);
}
.card .cover .price {
font-weight: 200;
position: absolute;
top: 55px;
right: 50px;
color: white;
transform-style: preserve-3d;
transition: ease all 2.3s;
z-index: 4;
font-size: 2em;
transform: translateZ(0px);
}
.card .card-back {
position: absolute;
height: 100%;
width: 100%;
background: #0b0f08;
transform-style: preserve-3d;
transition: ease all 2.3s;
transform: translateZ(-1px);
display: flex;
align-items: center;
justify-content: center;
}
.card .card-back a {
transform-style: preserve-3d;
transition: ease transform 2.3s, ease background 0.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;
}
.card .card-back a:hover {
background-color: white;
color: #0b0f08;
}

</style>