Не работают внутренние отступы при адаптивности

Вообщем есть такая проблема.Я создал контейнер для карточек (.cards) и с помощью гридов сделал адаптив.Но когда работает адаптив,верхние отступы у карточках не работают.

          #cards{
          max-width: 1024px;
          min-height: 274px;
          margin-top: 1%;
          margin-right: auto;
          margin-left: auto;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr; 
          grid-template-rows: 1fr;
          grid-template-areas: 
          "card1 card2 card3"; 
      }
      
      .card1{
          grid-area: card1;
          width: 320px;
          height: 274px;
          background-color: #F1F1F1;
          box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.5);
          border-radius: 20px;
          transition: box-shadow 0.3s ease-in-out;
      }
      
      
      
      .card1:hover{
          box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 1);
      }
      
      .card2:hover{
          box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 1);
      }
      
      .card3:hover{
          box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 1);
      }
      
      .card2 { 
          grid-area: card2;
          width: 320px;
          height: 274px;;
          background-color: #F1F1F1;
          box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.5);
          border-radius: 20px;
          transition: box-shadow 0.3s ease-in-out;
      }
      
      .card3{
          grid-area: card3;
          width: 320px;
          height: 274px;
          background-color: #F1F1F1;
          box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.5);
          border-radius: 20px;
          transition: box-shadow 0.3s ease-in-out;
      }
      
      .vector1{
          padding-left: 75px;
          padding-top: 60px;
      }
      
      .card_text1{
          color: black;
          text-align: center;
          font-size: 24px;
          padding-top: 10px;
      }
      
      .vector2{
          padding-left: 105px;
          padding-top: 60px;
      }
      
      .card_text2{
          color: black;
          text-align: center;
          font-size: 24px;
          padding-top: 10px;
      }
      
      .vector3{
          padding-left: 95px;
          padding-top: 65px;
      }
      
      .card_text3{
          color: black;
          text-align: center;
          font-size: 24px;
          padding-top: 15px;
      }
      
         @media screen and (max-width: 975px){
          #cards{
              display: grid;
              grid-template-columns: 1fr; 
              grid-template-rows: 1fr 1fr 1fr;
              grid-template-areas: 
              "card1"
              "card2"
              "card3"; 
          }
          
          .card1{
              margin-right: auto;
              margin-left: auto;
              padding-bottom: 10px;
             
              
              
          }
          
          .card2{
              margin-right: auto;
              margin-left: auto;
              padding-bottom: 10px;
              
          }
          
          .card3{
              margin-right: auto;
              margin-left: auto;
              padding-bottom: 10px;
              
              
          }
      }

  
                 <div id="cards">
                     <div class="card1">
                          <img src="svg/card1.svg" class="vector1">
                         <p class="card_text1">качество и опыт</p>
                      </div>
                      <div class="card2" >
                         <img src="svg/card2.svg" class="vector2">
                          <p class="card_text2">стоимость</p>
                      </div>
                      
                      <div class="card3">
                          <img src="svg/card3.svg" class="vector3">
                          <p class="card_text3">скорость</p>
                      </div>
                  </div>