.grid {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .req .item {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     
 }

 .req .item button {
     display: flex;
     justify-content: center;
     align-items: center;
     border: none;
     background: none;
     cursor: pointer;
     transition: background-color 0.3s;
     margin: 12px;
     width: 200px;
     height: 303px;
 }


 .req .item button img {
     width: 100%;
     border-radius: 24px;   
 }


 .req .card {
     padding: 24px;
     display: none;
     background-color: #1c1c1c;
    width: 200px;
     height: 303px;
     margin: 12px;
     border-radius: 12px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
     animation: flipIn 0.6s ease forwards;
 }

 .req .card h3 {
     margin-top: 0;
     color: #B8860B;
     font-size: 18px;
 }

 .req .card h3 span {
     color: white;
 }

 .req .card p {
     margin-top: 12px;
     font-size: 12px;
     color: #e0e0e0;
 }

 @keyframes flipIn {
     0% {
         transform: rotateY(90deg);
         opacity: 0;
     }

     100% {
         transform: rotateY(0deg);
         opacity: 1;
     }
 }

 .h1_req {
     font-size: 42px;
     text-align: center;
     margin-top: 120px;
     margin-bottom: 60px;
 }

 .h1_req span {
     color: #B8860B;
 }

 @media screen and (max-width:700px) {
     .grid {
         display: flex;
         flex-direction: column;
     }

     .req .item button {
         margin-top: 42px;
         margin-bottom: 42px;
     }

     .h1_req {
         margin-top: 24px;
         margin-bottom: 24px;
         font-size: 24px;
     }
 }