body{
    margin:0 10px;
    padding:0 10px;
    font-family:sans-serif;
}
.section__wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100vh;
}
.card{
    position:relative;
    width:400px;
    height:260px;
    border-radius:26px;
    background:linear-gradient(45deg,#0D0C12,#24284A);
    transition:.4s;
}
.card:hover{
    transform:rotate(5deg) scale(1.04);
}
.card:hover::before{
    transform:rotate(-5deg);
}
@media only screen and (max-width: 768px) {
    .card:active {
        transform:rotate(5deg) scale(1.04);
    }
    body{
        width:80%x;
    height:80%;
    }
   }
.card::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-60px;
    width:300px;
    height:20px;
    margin:0 auto;
    border-radius:50%;
    background:radial-gradient(ellipse farthest-side,rgba(0,0,0,.2),rgba(0,0,0,0));
    transition:.4s;
}
.card__wrapper{
    overflow:hidden;
    position:relative;
    width:100%;
    height:100%;
    padding:24px;
    box-sizing:border-box;
}
.card__wrapper::before{
    content:"";
    position:absolute;
    top:0;
    right:-100px;
    width:300px;
    height:260px;
    transform:skew(20deg);
    background:rgba(255,255,255,.1);
}

.card__logo{
    position:relative;
    width:220px;
    height:30px;
    background:url(../svg/ren.png) left/auto 90% no-repeat;
}
.card__logo::before{
    content:"";
    position:absolute;
    top:-12px;
    left:-12px;
    width:0;
    height:0;
    border-top:solid 4px transparent;
    border-left:solid 0px transparent;
    border-right:solid 12px #fff;
    border-bottom:solid 4px transparent;
}
.card__logo:after{
    content:"";
    position:absolute;
    bottom:-20px;
    left:-24px;
    width:400px;
    height:4px;
    background:linear-gradient(45deg,#00C9FF,#E90054 );
}
.card__chip{
    overflow:hidden;
    position:relative;
    width:80px;
    height:80px;
    border-radius:10px;
    margin:40px 0 6px auto;
    background:linear-gradient(45deg,#947400,#FFE194);
}
.card__chip::before{
    content:"";
    position:absolute;
    top:-3px;
    right:16px;
    width:20px;
    height:80px;
    border:solid 3px #24284A;
}
.card__chip::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    margin:auto 0;
    right:-3px;
    width:60px;
    height:30px;
    border-radius:20px 0 0 20px;
    background:linear-gradient(45deg,#947400,#FFE194);
    border:solid 3px #24284A;
}
.card__number{
    position:relative;
    display:inline-block;
    font-size:22px;
    color:#FFF;
    margin:0;
}
.card__number::before{
    content:"REN ORIBE";
    position:absolute;
    left:0;
    bottom:-20px;
    font-size:16px;
}