basti1012.bplaced.net

Hallo Zusammen, ich sitze seit gestern an einem Problem und bekomme einfach keine "ausreichende" Lösung hin. Ich kann das Design zwar umsetzen mit einer Flexbox, aber es wird nicht responsiv und die Anführungszeichen verschieben sich nach oben und unten auf der mobilen Ansicht. Kann mir Jemand hier eine Hilfestellung geben? <img class="vorschau" src="image/Design-helfen.png" alt="vorschau bild">

Code

                                    
                                <style>
  *{
  margin:0;
  padding:0;
}

#card{
  max-width:500px;
  min-width:200px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50% , -50%);
  width:80%;
  text-align:center;
  min-height:200px;
  padding:10px;
  border:1px solid grey;
}

#card:before{
  content: "\201c";
  font-size:90px;
  position:absolute;
  right:10px;
  color:#a7cc7d;
}
#line1{
  margin-top:10px;
  font-size:22px;
}
#line2{
  font-size:28px;
  font-weight:900;
}


#line2:after{
    content: "\201d";
  font-size:28px;
  font-weight:900;
}
#line2:before{
    content: "\201c";
  font-size:28px;
  font-weight:900;
}


#card:after{
  content: "\201d";
  font-size:90px;
  position:absolute;
  left:10px;
  top:calc(100% - 70px);
  color:#a7cc7d;
}
</style>
<main>
  
  
  <div id="card">
    
    <p id="line1">
      das ist ein Text
    </p>
    <p id="line2">
      Das ist etwas mehr Text der über mehrere Reihen gehen kann und etwas Größer geschrieben ist als der erste
    </p>
  </div>
  
  
</main>