* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Segoe UI', sans-serif;
   }
   
   body {
     width: 100vw;
     text-align: center;
     padding-top: 10px;
   }
   
   /* CONTAINER FOR ALL CARDS */
   .cards-container {
     width: 100%;
     border-radius: 10px;
     margin: 20px auto;
     padding: 20px;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     flex-wrap: wrap;
     gap: 30px;
   }
   
   /* ALL CARDS  */
   .flip-card {
     width: 230px;
     height: 230px;
     border-radius: 20px;
     perspective: 1000px;
     background-color: transparent;
   }
   
   .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: 0.6s;
     transform-style: preserve-3d;
   }
   
   .flip-card:hover .flip-card-inner {
     transform: rotateY(180deg);
   }
   
   .flip-card:hover {
     cursor: pointer;
   }
   
   .flip-card-front,
   .flip-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
   }
   
   /* CONTENT STYLING */
   .flip-card-front,
   .flip-card-back {
     display: grid;
     place-items: center;
   }
   
   .flip-card-front {
     display: grid;
     place-items: center;
     border: 1px solid rgba(151, 149, 149, 0.466);
     border-radius: 10px;
   }
   
   .flip-card-back {
     background-color: #191e24;
     transform: rotateY(180deg);
     box-shadow: 10px 10px 10px lightgray;
     border-radius: 10px;
   }
   
   .flip-card-front img {
     width: 90%;
     background-size: cover;
   }
   
   .flip-card-back h3 {
     color: #f1c40f;
   }
   
   /* End CSS */
   
   .card-4 img {
     width: 70%;
   }
   
   footer {
     color: gray;
   }