* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .page-adoption .flip-card {
    height: 100vh;
    overflow: hidden;
    font-family: Helvetica, sans-serif;
    color: rgb(211, 211, 211);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
  }
  .page-adoption .article-box {
    width: 350px;
    height: 500px;
    perspective: 800px;
  }
  .page-adoption .article-box:hover > .article-shape {
    cursor: pointer;
    transform: rotateY(180deg);
  } 
  .article-shape {
    height: 100%;
    width: 100%;
    position: relative;
    transition: transform 1500ms;
    transform-style: preserve-3d;
  }
  .page-adoption .flip-card .article-box .article-shape .front,
  .page-adoption .flip-card .article-box .article-shape .back {
    height: 100%;
    width: 100%;
    box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
    position: absolute;
    backface-visibility: hidden;
  }
  .page-adoption .flip-card .article-box .article-shape .back {
    background-color: #fff;
    transform: rotateY(180deg);
  }

.page-adoption .flip-card .article-box .article-shape .back{
    overflow: auto;
    max-height: 430px;
}
.page-adoption .flip-card .article-box .article-shape .back h1{
  font-weight: 600;
  color: #0252ff; 
  padding: 5px;
  font-size: 14px; 
  text-decoration: underline;
}
.page-adoption .flip-card .article-box .article-shape .back h2,h3,h4,h5,h6,h7,h8,h9,h10 {
  font-weight: 500;
  color: #0252ff; 
  padding: 5px;
  font-size: 14px; 
}
.page-adoption .flip-card .article-box .article-shape .back p {
  line-height: 1.6;
  padding: 5px;
  color: #666; 
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 400;
}