.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 1rem auto;
  max-width: 36rem;
  box-shadow: var(--amcp-shadow-medium);
  border: 1px solid var(--border-color);

  h2 {
    font-size: var(--amcp-font-size-xl);
    line-height: var(--amcp-line-height-tight);
  }

  .card__header {
    padding: 1rem 2rem 0.25rem 2rem;
    margin: 0;
  }

  .card__image {
    width: 100%;
    height: auto;
    img {
      width: 100%;
    }
  }
  
  .card__body {
    padding: 1rem 2rem 2rem;
  }

  .card__sponsored {
    background: var(--amcp-secondary-yellow);
    color: var(--amcp-blue);
    display: inline-block;
    font-size: .75rem;
    padding: 5px 10px;
    text-transform: uppercase;
  }

  .card__title {
  }

  .card__title-link {
    color: var(--header-color);
  }

  .card__description {
  }

  .card__term {
    color: var(--amcp-blue);
    display: inline-block;
    text-decoration: underline;
  }

  .card__term-link {
    color: var(--amcp-blue);
    display: inline-block;
    text-decoration: underline;
  }

  .card__body .my-button {
    margin: 0 auto;
    display: block;
  }
 
  &.card--content-overlay {
    box-shadow: none;
    border: 0;
    display: grid;
    grid-template-areas:
      "image"
      "content";
    grid-template-rows: 1fr auto;
    position: relative;
    /* create a new stacking context */
    isolation: isolate;

    .card__image {
      grid-area: image;
      z-index: 1;
    }
    
    .card__body {
      background-color: var(--amcp-color-gamma-950);
      grid-area: content;
      z-index: 2;
      margin-top: -20%;
      max-width: 90%;
      margin-inline: auto;
      padding: 1rem 2rem 2rem;
      box-shadow: var(--amcp-shadow-medium);
      position: relative;
    }
  }
}