body {
      font-family: "Roboto Slab", serif;
  font-weight: 300;
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 1rem;
      justify-content: center;
    }

    .card-1 {
      position: relative;
      flex: 1 1 calc(33.333% - 1rem);
      max-width: calc(50% - 1rem);
      height: 600px;
      overflow: hidden;
      border: 1px solid #ddd;
      background: #f4f4f4;
      transition: transform 0.3s ease-in-out;
    }

    .card-1:hover {
      transform: scale(1.03);
    }

    .card-1 a {
      text-decoration: none;
      color: inherit;
      display: block;
      height: 100%;
      width: 100%;
      position: relative;
      overflow: hidden;
    }

    .image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 75%;
      background-size: cover;
      background-position: top;
      transition: height 0.3s ease-in-out;
    }

    .card-1:hover .image {
      height: 100%;
    }

.content  {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 25%;
      background: rgba(255, 255, 255, 0.55);
      color: #000;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0.5rem;
      z-index: 2;
    }

    .content h3 {
      margin: 0;
      font-size: 1.6rem;
    }

    .content p {
      margin: 0;
      font-size: 1.2rem;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
      .card-1 {
        flex: 1 1 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
      }
    }

    @media (max-width: 768px) {
      .container {
      padding-top: 80px;
    }
      .card-1 {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }