custom.pcss

/* suggested starting point for styling the component */

accessible-card::part(card) {
   box-shadow: 0 2px 8px -2px rgba(24, 24, 24, 0.08), 0 8px 12px -2px rgba(24, 24, 24, 0.16);
  transition: all 0.2s ease-in-out;
  outline: 2px solid transparent;
}

accessible-card::part(card) a {
  text-decoration: none;
}

accessible-card::part(card):focus {
  text-decoration: underline;
}
accessible-card::part(card):focus-within {
  outline: 4px solid #155daa;
  box-shadow: 0 2px 8px -2px rgba(24, 24, 24, 0.08), 0 12px 12px -4px rgba(24, 24, 24, 0.16);
}

accessible-card::part(card):focus-within *:focus-visible {
  text-decoration: none;
  outline: none;
  border: none;
}

accessible-card::part(card):focus-within a:focus {
    text-decoration: none;
    outline: none;
    border: none;
}

accessible-card::part(card):hover {
  outline: 4px solid #155daa;
  box-shadow: 0 2px 8px -2px rgba(24, 24, 24, 0.08), 0 12px 12px -4px rgba(24, 24, 24, 0.16);
}


accessible-card::part(card-copy-wrapper) {
 margin: 40px 40px 32px;
}

accessible-card::part(card-cta-wrapper) {
 margin: 0 40px 48px;
}

accessible-card::part(headline) {
  line-height: 1.25;
  font-size: 24px;
  margin-bottom: 20px;
}

accessible-card::part(support-text) {

}

accessible-card::part(cta) {

}

accessible-card::part(image-wrapper) {
  border-radius: 16px 16px 0 0;
  aspect-ratio: 16/9;
  overflow: hidden;
}


accessible-card::part(image) {

}