.container {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 1.5rem;
      display: grid;
      grid-template-columns: 3fr;
      gap: 2rem;
    }

    .posts {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .post {
      background: var(--card);
      border-radius: var(--radius);
      padding: 1.5rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
    }

    .post h2 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }

    .post p {
      color: var(--muted);
      flex-grow: 1;
    }

    .post .meta {
      font-size: 0.85rem;
      color: var(--muted);
      margin-bottom: 0.75rem;
    }

    .post a {
      align-self: flex-start;
      margin-top: 1rem;
      color: var(--primary);
      font-weight: 600;
      text-decoration: none;
    }

    aside {
      background: var(--card);
      border-radius: var(--radius);
      padding: 1.5rem;
      height: fit-content;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }

    aside h3 {
      margin-bottom: 1rem;
      font-size: 1.1rem;
    }

    aside ul {
      list-style: none;
    }

    aside li {
      margin-bottom: 0.5rem;
    }

    aside a {
      text-decoration: none;
      color: var(--muted);
    }

    aside a:hover {
      color: var(--primary);
    }

    footer {
      text-align: center;
      padding: 2rem;
      color: var(--muted);
      font-size: 0.9rem;
    }

    @media (max-width: 768px) {
        .posts {
        grid-template-columns: 1fr;
        }
    }

    /* Responsiivisuus */
    @media (max-width: 900px) {
      .container {
        grid-template-columns: 1fr;
      }
    }

  .post-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: block;
  }