* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
    body {
      
      min-height: 100vh;
      /* background-color: #fff !important; */
     
    }
    .card-container {
      position: relative;
      width: 100%;
      max-width: 450px; /* Adjust size */
      margin: 0 auto;
      background-color: #fff;
      z-index: -1;
    }
    .card-container img.bg-card {
      width: 100%;
      height: auto;
      display: block;
    }
    .user-photo {
      position: absolute;
      top: 44%;
      left: 51%;
      transform: translate(-50%, -50%);
      width: 45%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      object-fit: cover;
      z-index: -1;
    }
    .context {
      position: absolute;
      bottom: 15.5%;
      left: 26%;
      width: 50%;
    }

    .context h5 {
      color: #000;
      margin: 0;
      font-size: 12px;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .context p {
      color: #000;
      margin: 0;
      font-size: 10px;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

  @media only screen and (max-width: 980px) {
 
    .context {
      bottom: 16%;
    }
      .context h5 {
        line-height: .9;
    }
      .context p {
        line-height: .9;
    }
  }