.card {
    width: 30%;
    left: 34%;
    height: 40vh;
    margin: 20px 10px;
    border: 2px solid rgb(243, 242, 242);
    color: #543c69;;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
  }
  
  .card-browser {
    height: 20px;
    background: #16222a;
    background: -webkit-linear-gradient(to right, #3a6073, #16222a);
    background: linear-gradient(to right, #3a6073, #16222a);
  
    display: flex;
    align-items: center;
    position: sticky;
    z-index: 2;
  }
  
  .circle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 3px;
    background-color: #0b8793;
  }
  
  .card:hover .p-img {
    transform: translateY(-100%);
  }
  
  @media screen and (max-width: 768px) {
    .card {
      max-width: 95%;
      height: 30vh;
    }
  }
  
  @media screen and (max-width: 480px) {
    .card {
      max-width: 95%;
      width: 90%;
    }
  }