.di-hero {
  padding-top: 8px;
}

.pw-hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 270px);
  gap: clamp(18px, 3vw, 34px);
  align-items: end;
}

.pw-hero-copy {
  min-width: 0;
}

.pw-hero-side {
  display: contents;
}

.pw-hero-figure {
  align-self: end;
  justify-self: end;
  width: min(100%, 270px);
  pointer-events: none;
}

.pw-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.32));
}

.pw-mobile-articles-cta {
  display: none;
}

#pw-articles {
  scroll-margin-top: calc(var(--headerH, 88px) + 18px);
}

.pw-article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease;
  transform-origin: center center;
  will-change: transform;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(165deg, rgba(252, 241, 225, 0.685) 0%, rgba(207, 182, 154, 0.774) 42%, rgba(194,143,91,.18) 100%);
  border: 1px solid rgba(255, 235, 200, 0.596);
  box-shadow:
    0 22px 58px rgba(0,0,0,.42),
    0 14px 34px rgba(186,136,72,.14),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.pw-article-card,
.pw-article-card:visited {
  color: inherit;
}

.pw-article-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(86,52,26,.08));
  pointer-events: none;
}

.pw-article-card .di-badge,
.pw-article-card h3,
.pw-article-card p,
.pw-article-card .di-readmore {
  position: relative;
  z-index: 1;
}

.pw-article-card .di-badge {
  background: rgba(17,17,17,.07);
  border: 1px solid rgba(17,17,17,.16);
  color: #ffbb00;
}

.pw-article-card h3 {
  color: #17120d;
}

.pw-article-card p {
  color: rgba(23,18,13,.84);
}

.pw-article-card .di-readmore {
  margin-top: auto;
  padding-top: 14px;
  color: rgba(255,255,255,.72);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .pw-article-card:hover {
    transform: translateY(-8px) scale(1.022);
    box-shadow:
      0 38px 92px rgba(10,8,7,.48),
      0 20px 48px rgba(186,136,72,.22),
      inset 0 1px 0 rgba(255,255,255,.18);
    border-color: rgba(255,236,203,.30);
    filter: saturate(1.05);
  }
}

.pw-article-card:focus-visible,
.pw-mobile-articles-cta:focus-visible {
  outline: 2px solid rgba(255,255,255,.88);
  outline-offset: 3px;
}

.pw-article-card:active {
  transform: translateY(-2px) scale(0.996);
}

@media (max-width: 1080px) {
  .pw-hero-head {
    grid-template-columns: minmax(0, 1fr) clamp(150px, 24vw, 220px);
    gap: 18px;
  }
}

@media (max-width: 720px) {
  .di-hero {
    padding-top: 6px;
  }

  .pw-hero-head {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }

  .pw-hero-side {
    display: grid;
    grid-template-columns: minmax(108px, 1fr) minmax(132px, 1fr);
    align-items: end;
    gap: 12px;
    width: 100%;
  }

  .pw-mobile-articles-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(156px, 44vw, 220px);
    padding: 16px 12px;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 18px;
    background:
      radial-gradient(circle at top left, rgba(255,255,255,.12), transparent 42%),
      linear-gradient(165deg, rgba(236,211,174,.42) 0%, rgba(219,178,130,.24) 44%, rgba(194,143,91,.12) 100%);
    box-shadow:
      0 18px 38px rgba(0,0,0,.26),
      0 10px 24px rgba(186,136,72,.14),
      inset 0 1px 0 rgba(255,255,255,.16);
    color: var(--di-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      filter .22s ease,
      background .22s ease;
  }

  .pw-mobile-articles-cta span {
    display: block;
  }

  .pw-mobile-articles-cta span + span {
    margin-top: 6px;
  }

  .pw-hero-figure {
    width: clamp(152px, 46vw, 224px);
    justify-self: end;
    align-self: end;
    margin-top: 2px;
    margin-right: -6px;
    margin-bottom: -2px;
  }

  .pw-hero-figure img {
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.26));
  }
}

@media (hover: hover) and (pointer: fine) {
  .pw-mobile-articles-cta:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
      0 26px 56px rgba(0,0,0,.34),
      0 16px 34px rgba(186,136,72,.18),
      inset 0 1px 0 rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.94);
    filter: saturate(1.05);
  }
}

.pw-mobile-articles-cta:active {
  transform: translateY(-2px) scale(0.992);
}