.personalized-card-wrapper {
  background-color: var(--background-color-canvas);
  // @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
  border: 2px solid var(--card-border-color, var(--border-color-card));
  color: var(--text-color);
  padding: var(--space-xxlarge);
  border-radius: var(--border-radius-large);
  margin: var(--space-xlarge) 0;
  position: relative;

  .personalized-card-dismiss {
    position: absolute;
    inset-inline-end: var(--space-medium);
    inset-block-start: var(--space-medium);
  }

  .personalized-card-inner {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr 1fr;
    align-items: start;

    .personalized-card-cta-wrapper {
      display: flex;
      flex-direction: column;
      gap: var(--space-medium);
    }

    img {
      max-width: 200px;
      max-height: 200px;
      object-fit: contain;
      justify-self: center;
      align-self: start;
    }

    h2, p {
      margin-block-start: 0;
    }

    h2 {
      font-size: var(--font-size-xxlarge);
      // @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
      font-weight: var(--font-weight-heading, var(--heading-font-weight));
    }

    .personalized-card-link {
      color: var(--link-color);
      font-size: var(--font-size-small);
    }

    // 1-column layout
    @media (max-width: $break-point-layout-variant) {
      grid-template-columns: 1fr;
      gap: var(--space-large);

      img {
        width: 100px;
        justify-self: initial;
      }

      h2 {
        margin-block-end: var(--space-xsmall);
      }
    }

    // 2-column layout
    @media (min-width: $break-point-layout-variant){
      grid-template-columns: 0.2fr 1fr 1.2fr;
      gap: var(--space-large);

      img {
        width: 130px;
        align-self: end;
        grid-row: 1 / span 2;
      }

      .personalized-card-cta-wrapper {
        align-items: center;
        display: grid;
        grid-template-columns: subgrid;
        grid-row: 2;
        grid-column: 2 / span 2;
        padding-block-end: var(--space-xxlarge);
      }

      p {
        width: 210px;
        margin: 0;
      }

      h2 {
        margin: 0;
      }
    }

    // 3 and 4-column layout
    @media (min-width: $break-point-widest) {
      grid-template-columns: 0.2fr 1.2fr 0.8fr 1fr;
      gap: var(--space-large);

      img {
        width: 100px;
        align-self: end;
      }

      h2 {
        grid-column:  2;
        grid-row: 1;
        width: initial;
      }

      p {
        grid-column:  3;
        grid-row: 1;
        width: 400px;
      }

      .personalized-card-cta-wrapper {
        grid-column: 4;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-self: end;
        gap: var(--space-medium);
        width: max-content;
        margin-inline-end: var(--space-medium);
      }

      .personalized-card-cta {
        align-self: baseline;
      }
    }

    // rules for 3-col
    @media (min-width: $break-point-widest) and (max-width: $break-point-sections-variant) {
      grid-template-columns: 0.2fr 1fr 1fr 1fr;

      h2 {
        max-width: 200px;
      }

      p {
        width: 300px;
      }
    }
  }

  @media (min-width: $break-point-layout-variant) {
    padding-block-end: 0;
  }
}