.articles-grid-section {
  display: flex;
  justify-content: center;
  padding: 0 40px 100px;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1440px;
}

.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 360px;
  padding: 12px;
  border-radius: 18px;
  overflow: hidden;
}

.article-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.16) saturate(0.96);
}

.article-card-placeholder {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(183, 63, 252, 0.48), rgba(18, 8, 28, 0.96)), var(--color-bg);
}

.article-card[href="/blog/voucher-piemonte-pmi-2026-contributo-fondo-perduto"] .article-card-placeholder {
  background:
    linear-gradient(0deg, rgba(13, 13, 13, 0.1), rgba(13, 13, 13, 0.1)),
    url("../images/articles/voucher-digitalizzazione-piemonte-pmi-2026.jpg") center / cover no-repeat;
}

.article-card[href="/blog/quanto-costa-un-sito-web-a-torino-nel-2026"] .article-card-placeholder {
  background:
    linear-gradient(0deg, rgba(13, 13, 13, 0.14), rgba(13, 13, 13, 0.14)),
    url("../images/articles/quanto-costa-sito-web-torino-2026.jpg") center / cover no-repeat;
}

.article-card[href="/blog/come-scegliere-una-web-agency-a-torino"] .article-card-placeholder {
  background:
    linear-gradient(0deg, rgba(13, 13, 13, 0.14), rgba(13, 13, 13, 0.14)),
    url("../images/articles/come-scegliere-web-agency-torino.jpg") center / cover no-repeat;
}

.article-card[href="/blog/seo-locale-torino-google-business-profile-pmi"] .article-card-placeholder {
  background:
    linear-gradient(0deg, rgba(13, 13, 13, 0.14), rgba(13, 13, 13, 0.14)),
    url("../images/articles/seo-locale-torino-google-business-profile.jpg") center / cover no-repeat;
}

.article-card[href="/blog/ai-e-crm-per-pmi-piemonte-automazioni-che-servono-davvero"] .article-card-placeholder {
  background:
    linear-gradient(0deg, rgba(13, 13, 13, 0.14), rgba(13, 13, 13, 0.14)),
    url("../images/articles/ai-crm-pmi-piemonte.jpg") center / cover no-repeat;
}

.article-card[href="/blog/ecommerce-shopify-a-torino-per-pmi-cosa-serve-davvero"] .article-card-placeholder {
  background:
    linear-gradient(0deg, rgba(13, 13, 13, 0.14), rgba(13, 13, 13, 0.14)),
    url("../images/articles/ecommerce-shopify-torino-pmi.jpg") center / cover no-repeat;
}

.article-card[href="/blog/web-app-o-app-mobile-cosa-scegliere-per-la-tua-azienda"] .article-card-placeholder {
  background:
    linear-gradient(0deg, rgba(13, 13, 13, 0.14), rgba(13, 13, 13, 0.14)),
    url("../images/articles/web-app-o-app-mobile-azienda.jpg") center / cover no-repeat;
}

.article-card[href="/blog/voucher-piemonte-pmi-2026-contributo-fondo-perduto"] .article-card-placeholder svg,
.article-card[href="/blog/quanto-costa-un-sito-web-a-torino-nel-2026"] .article-card-placeholder svg,
.article-card[href="/blog/come-scegliere-una-web-agency-a-torino"] .article-card-placeholder svg,
.article-card[href="/blog/seo-locale-torino-google-business-profile-pmi"] .article-card-placeholder svg,
.article-card[href="/blog/ai-e-crm-per-pmi-piemonte-automazioni-che-servono-davvero"] .article-card-placeholder svg,
.article-card[href="/blog/ecommerce-shopify-a-torino-per-pmi-cosa-serve-davvero"] .article-card-placeholder svg,
.article-card[href="/blog/web-app-o-app-mobile-cosa-scegliere-per-la-tua-azienda"] .article-card-placeholder svg {
  display: none;
}

.article-card-placeholder svg {
  width: 48px;
  height: 48px;
  fill: rgba(255, 255, 255, 0.42);
}

.article-card-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(13, 13, 13, 0.92) 0%, rgba(13, 13, 13, 0.5) 46%, rgba(13, 13, 13, 0.08) 100%);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.article-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: rgba(13, 13, 13, 0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 68px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}

.article-tag svg {
  width: 14px;
  height: 14px;
  fill: var(--color-accent);
}

.article-card-heading {
  padding: 12px;
  background-color: rgba(13, 13, 13, 0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.article-card-heading h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.35em;
  color: #fff;
}

@media (max-width: 900px) {
  .articles-grid-section {
    padding: 0 24px 70px;
  }

  .articles-grid {
    grid-template-columns: 1fr;
  }

  .article-card {
    min-height: 320px;
  }
}

@media (max-width: 600px) {
  .articles-grid-section {
    padding: 0 16px 60px;
    text-align: left;
  }

  .article-card {
    min-height: 260px;
    border-radius: 16px;
  }

  .article-tags {
    justify-content: flex-start;
  }

  .article-tag {
    font-size: 10px;
    padding: 5px 9px;
  }

  .article-card-heading h4 {
    font-size: 15px;
    line-height: 1.4;
  }
}