تصحيح تنسيقات مشروع vue.js

لقد كانت المشكلة انك لا تطبق ال style لل .card ايضا يجب ان تاخذ عرض 100 بالمائة كما انني عدلت لك ال style الخاص بالقسم الذي اسفل هذا فكان التصميم غير ملائم للهواتف ايضا.

@media (max-width: 778px) {
  .main {
    width: 100%;
    h1 {
      font-size: 35px;
    }
  }
  .cards {
    width: 100%;
    display: flex;
    flex-direction: column;

    .card {
      width: 100%;
      margin-bottom: 20px;
    }
  }

  .info {
    flex-direction: column;
    text-align: center;

    .content {
      padding: 0 20px;
    }

    h2 {
      font-size: 28px;
    }

    p {
      width: 100%;
      font-size: 16px;
    }

    img {
      padding: 0;
      margin-top: 20px;
      width: 90%;
    }
  }
}