styles.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@400;500;800&display=swap');

body {
     display: grid;
     align-items: center;
     height: 100vh;
     margin: 0;
     padding: 0;
     background-color: #EEEEEE;
   }
   
   .container {
     margin: auto;
     width: 80%;
     height: 60%;
     max-width: 1100px;
     max-height: 650px;
     background-color: #FFFFFF;
     display: grid;
     grid-template-rows: auto 1fr; /* Adjusted */
     transition: all 0.5s;
     padding: 50px;
     gap: 10px;
   }
   
   .title {
     grid-row: 1;
     font-size: 3vw;
     font-weight: 500;
     font-family: 'Open Sans', sans-serif;
   }
   
   .cards {
     grid-row: 2;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjusted */
     gap: 15px;
   }
   
   .card {
     position: relative;
   }
   
   .card-text {
     position: absolute;
     display: grid;
     grid-template-rows: 0.1fr 0.5fr 0.1fr 0.1fr;
     box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
     background-color: #FFFFFF;
     font-size: 1vw;
     letter-spacing: 1.1px;
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     transition: all 0.5s;
     padding: 15px;
     width: 100%;
     height: 100%;
     align-items: center;
     z-index: 1;
   }
   
   .card-frame {
     position: absolute;
     width: 99%;
     height: 99%;
     border-width: 2px;
     border-color: #000000;
   }
   
   .card-text:hover {
     transform: translate(-12px, -12px);
     box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
   }
   .quotes {
     font-weight: 800;
     font-size: 1.5vw;
   }
   .ca {
     font-weight: 700;
   }
   
   .cb {
     font-style: italic;
   }

   @media (max-width: 1235px) {
     .card-text {
       font-size: 1.2vw; /* Adjusted */
     }
   }

   @media (max-width: 1000px) {
     .card-text {
       font-size: 1.3vw; /* Adjusted */
     }
   }
   
   @media (max-width: 805px) {
     .card-text {
       font-size: 1.35vw; /* Adjusted */
     }
   }
   
   @media (max-width: 705px) {
     .container {
       padding: 30px;
     }
     .title {
       font-size: 4vw;
     }
     .cards {
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjusted */
     }
     .card-text {
       font-size: 1.65vw;
     }
   }

   @media (max-width: 550px) {
     .card-text {
       font-size: 2vw; /* Adjusted */
     }
   }
   

   @media (max-width: 435px) {
     .card-text {
       font-size: 2.5vw; /* Adjusted */
     }
   }