.article-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        margin: 3rem 0 2rem 0;
      }
      .article-card {
        background: var(--card-bg, #232347);
        border-radius: 10px;
        box-shadow: var(--card-shadow, 0 2px 14px #0001);
        overflow: hidden;
        width: 320px;
        max-width: 90vw;
        transition: transform 0.18s;
        display: flex;
        flex-direction: column;
        text-decoration: none;
      }
      .article-card:hover {
        transform: scale(1.04);
        box-shadow: 0 4px 20px var(--main-accent, #ff0055a0);
      }
      .article-image {
        width: 100%;
        height: 160px;
        object-fit: cover;
        background: #111;
      }
      .article-content {
        padding: 1.2rem 1rem;
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      .article-title {
        font-size: 1.25rem;
        color: var(--main-accent, #ff0055);
        font-weight: bold;
        margin-bottom: 0.5rem;
      }
      .article-desc {
        flex: 1;
        color: var(--main-text, #e5e5e5);
        font-size: 1.04em;
        margin-bottom: 0.5rem;
      }
      .read-more {
        font-size: 0.98em;
        color: #fff;
        background: var(--main-accent, #ff0055);
        border-radius: 4px;
        padding: 0.35em 1em;
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        margin-top: 0.7em;
        align-self: flex-start;
        transition: background 0.15s;
      }
      .read-more:hover {
        background: var(--main-bg, #003366);
      }
      @media (max-width: 700px) {
        .article-cards { flex-direction: column; align-items: center; }
        .article-card { width: 98vw; }
      }