.flip-card {
    perspective: 1000px;
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 256px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;

}
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 0.5rem;
    top: 0;
    left: 0;
    border-radius: 20px;
}
.flip-card-back {
    transform: rotateY(180deg);
}

#card-1{
    background: linear-gradient(rgba(0, 0, 0, 0.466), rgba(0, 0, 0, 0.466)), url(./../assets/img/img1.jpg)center/cover;
}
#card-2{
    background: linear-gradient(rgba(0, 0, 0, 0.466), rgba(0, 0, 0, 0.466)), url(./../assets/img/img2.jpg)center/cover;
}
#card-3{
    background: linear-gradient(rgba(0, 0, 0, 0.466), rgba(0, 0, 0, 0.466)), url(./../assets/img/img3.jpg)center/cover;
}
#card-4{
    background: linear-gradient(rgba(0, 0, 0, 0.466), rgba(0, 0, 0, 0.466)), url(./../assets/img/img4.jpg)center/cover;
}
#card-5{
    background: linear-gradient(rgba(0, 0, 0, 0.466), rgba(0, 0, 0, 0.466)), url(./../assets/img/img5.jpg)center/cover;
}
#card-6{
    background: linear-gradient(rgba(0, 0, 0, 0.466), rgba(0, 0, 0, 0.466)), url(./../assets/img/img6.jpg)center/cover;
}
#card-7{
    background: linear-gradient(rgba(0, 0, 0, 0.466), rgba(0, 0, 0, 0.466)), url(./../assets/img/img7.jpg)center/cover;
}
#card-8{
    background: linear-gradient(rgba(0, 0, 0, 0.466), rgba(0, 0, 0, 0.466)), url(./../assets/img/img8.png)center/cover;
}
#card-9{
    background: linear-gradient(rgba(0, 0, 0, 0.466), rgba(0, 0, 0, 0.466)), url(./../assets/img/img9.jpg)center/cover;
}