body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
 }

 h1 {
   text-align: center;
   margin-top: 2rem;
   font-size: 2rem;
 }

 p {
   max-width: 700px;
   margin: 1rem auto;
   font-size: 1rem;
   text-align: center;
 }

 /* Small screens (phones) */
 @media (max-width: 576px) {
   h1 {
     font-size: 1.5rem;
   }

   p {
     font-size: 0.9rem;
   }
 }

 /* Medium screens (tablets) */
 @media (min-width: 577px) and (max-width: 992px) {
   h1 {
     font-size: 2.2rem;
   }

   p {
     font-size: 1.1rem;
   }
 }

 /* Large screens (desktop) */
 @media (min-width: 993px) {
   h1 {
     font-size: 2.8rem;
   }

   p {
     font-size: 1.2rem;
   }
 }

 /* ---------- Task 2: Responsive Card Group ---------- */
 .card-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
   padding: 20px;
 }

 .card {
   flex: 1 1 calc(33.333% - 20px) !important;
   border: 1px solid #ccc;
   border-radius: 8px;
   overflow: hidden;
   text-align: center;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 .card img {
   width: 100%;
   height: 180px;
   object-fit: cover;
 }

 /* Tablet (2 per row) */
 @media (max-width: 992px) {
   .card {
     flex: 1 1 calc(50% - 20px) !important;
   }
 }

 @media (max-width: 992px) {
   .card-container .card {
     flex: 1 1 calc(50% - 20px);
   }
 }

 /* Mobile (1 per row) */
 @media (max-width: 576px) {
   .card {
     flex: 1 1 100% !important;
   }
 }