/* Kafle Akademii: render bazowy bez typografii socialowej, tekst pozostaje dostępny w HTML. */
.article-card {
  --card-position: 50% 50%;
  --card-hover-position: 50% 50%;
  isolation: isolate;
  overflow: hidden;
  position: relative;
  background-color: #122a25;
  background-image:
    linear-gradient(180deg, rgba(8, 22, 19, .12) 0%, rgba(8, 22, 19, .34) 38%, rgba(8, 22, 19, .94) 100%),
    var(--card-image) !important;
  background-position: var(--card-position);
  background-repeat: no-repeat;
  background-size: 100% auto;
  transition: background-position .45s cubic-bezier(.2, .7, .2, 1), background-size .45s cubic-bezier(.2, .7, .2, 1), transform .2s ease;
}

.article-card::before {
  background: linear-gradient(90deg, rgba(98, 194, 171, .92), rgba(98, 194, 171, 0));
  content: '';
  height: 2px;
  left: 34px;
  position: absolute;
  top: 23px;
  width: 54px;
}

.article-card > * { position: relative; z-index: 1; }
.article-card .number { margin-top: 17px; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.article-card h3 { max-width: 520px; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.article-card p { color: rgba(244, 250, 247, .86); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.article-card:hover {
  background-color: #173c34;
  background-image:
    linear-gradient(180deg, rgba(8, 22, 19, .14) 0%, rgba(8, 22, 19, .35) 38%, rgba(8, 22, 19, .95) 100%),
    var(--card-image) !important;
  background-position: var(--card-hover-position);
  background-size: 106% auto;
}

@media (max-width: 560px) {
  .article-card::before { left: 25px; }
}