.inclusive-card {
  --inclusive-card-default-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --inclusive-card-hover-shadow: var(--inclusive-card-default-shadow);
  --inclusive-card-focus-shadow: var(--inclusive-card-default-shadow);
  --inclusive-card-cta-focus-decoration: underline;
  --inclusive-card-cta-focus-shadow: initial;

  position: relative;
  display: flex;
  flex-direction: column;

  isolation: isolate;

  border-radius: 0.5rem;
  overflow: hidden;
  transition: box-shadow 200ms ease-in-out;
}

.inclusive-card:hover {
  box-shadow: var(--inclusive-card-hover-shadow);
}

.inclusive-card:focus-within {
  box-shadow: var(--inclusive-card-focus-shadow);
}

.inclusive-card__title:focus-within ~ .inclusive-card__cta {
  text-decoration: var(--inclusive-card-cta-focus-decoration);
  box-shadow: var(--inclusive-card-cta-focus-shadow);
}

.inclusive-card__title .inclusive-card__link-area {
  /* Clickable area spans the full card (the card has `position: relative`) */
  position: absolute;
  inset: 0;
}

.inclusive-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inclusive-card__controls {
  /* Raise the content above the clickable element spreading the full card */
  position: relative;
}

.inclusive-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: 60ch;
  padding: 1rem;

  /* 
  If an image is non-decorative, it needs to be announced by screen readers. 
  To ensure this, we placed the image after the title (heading) in the HTML structure, 
  as headings typically introduce sections. Otherwise, screen readers might skip the image.
  
  Visually, we want the content to appear second, 
  so we use the `order` property to rearrange the elements accordingly.
  */
  order: 1;
}