.featured-article {
  --gutter: 10px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 330px;
}

.featured-article::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--accent-color, hsl(0 0% 90%));
  transition: opacity 0.2s;
}

.featured-article:hover::before {
  opacity: 0.84;
}

.featured-article:focus-within {
  outline: 2px solid hsl(var(--color-base-text));
  outline-offset: 1px;
}

.featured-article__image-wrapper {
  margin-bottom: auto;
  position: relative;
  display: block;
}

.featured-article__image-wrapper::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.featured-article__image {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 20px;
  object-fit: contain;
  object-position: center top;
}

.featured-article__title {
  margin: 0;
  padding: var(--gutter);
  font-family: var(--font-family);
  letter-spacing: var(--letter-spacing);
  font-size: var(--font-size-xl);
  line-height: var(--font-line-height-xl);
  font-weight: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

.featured-article__code {
  font-family: var(--font-family);
  letter-spacing: var(--letter-spacing);
  font-size: var(--font-size-xl);
  line-height: var(--font-line-height-xl);
}

.featured-article__link {
  --stroke-width: 2px;
}

.featured-article__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.featured-article__link:hover {
  --stroke-opacity: 0;
  --stroke-width: 0;
}

.featured-article__link:focus-visible {
  outline: 0;
}

.offline .featured-article__title .link::after {
  display: none;
}

.featured-article__description {
  margin-top: auto;
  margin-bottom: 0;
  padding: var(--gutter);
}

.featured-article__description .featured-article__code {
  font-size: var(--font-size-m);
}

@media (width >= 768px) {
  .featured-article {
    min-height: 402px;
  }
}

@media (width >= 1024px) {
  .featured-article {
    min-height: 500px;
  }
}

@media (width >= 1680px) {
  .featured-article {
    --gutter: 20px;
    min-height: 580px;
  }
}
