/* Use --tint for the glow behind the illustration */
@layer modules {
  .resource-card {
    display: flex;
    flex-flow: column;
    min-width: 0;
    height: 40rem;
    overflow: hidden;
    color: #091121;
    text-decoration: none;
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 0 0 1px rgb(18 50 75 / 5%), 0 4px 20px rgb(18 50 75 / 7%);
    transition: transform .25s ease, box-shadow .25s ease;
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 0 0 1px rgb(18 50 75 / 5%), 0 12px 32px rgb(18 50 75 / 12%);
    }
    @media (prefers-reduced-motion: reduce){
      transition: box-shadow .25s ease;
      &:hover { transform: none; }
    }
    .copy {
      position: relative;
      z-index: 1;
      display: flex;
      flex-flow: column;
      gap: .6rem;
      padding: 2.25rem 2.25rem 0;
    }
    .eyebrow {
      color: #007DF1;
      font-size: .85rem;
      font-weight: 600;
    }
    h2 {
      margin: 0;
      font-size: 2.25rem;
      line-height: 1.1;
      font-weight: 700;
    }
    p {
      margin: 0;
      color: #29303E;
    }
    .lead {
      margin-top: .25rem;
      color: inherit;
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.45;
    }
    .art {
      position: relative;
      flex: 1;
      margin-top: 1.5rem;
      background: radial-gradient(ellipse 75% 60% at 50% 50%, var(--tint), white 100%);
    }
  }
}