.personalized-card-wrapper {
  background-color: var(--background-color-canvas);
  border: 2px solid var(--border-color-card);
  color: var(--text-color);
  padding: var(--space-medium) var(--space-xlarge);
  border-radius: var(--border-radius-large);
  margin: var(--space-xlarge) 0;
  position: relative;

  .personalized-card-dismiss {
    text-align: end;
    margin-block-end: var(--space-small);
    margin-inline-end: calc(var(--space-medium) * -1);
  }

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


    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);
      font-weight: var(--font-weight-bold);
    }

    .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-small);

      img {
        justify-self: initial;
      }

      .personalized-card-link {
        margin-block-start: var(--space-small);
        margin-block-end: var(--space-large);
      }
    }

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

      h2 {
        width: 200px;
      }

      img {
        width: 80px;
      }

      .personalized-card-cta {
        grid-column: 2 / span 2;
        grid-row: span 2;
        margin-block-start: calc(var(--space-xxlarge) * -1);
        width: 195px;
      }

      .personalized-card-link {
        // Bug 1967304 - Large number (-64px)
        margin-block-start: calc(var(--space-xxlarge) * -2);
        grid-column: 3;
      }
    }

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

      img {
        width: 100px;
      }

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

      p {
        grid-column:  3;
      }

      .personalized-card-cta {
        grid-column:  4;
        margin-block-start: initial;
        width: 220px;
      }

      .personalized-card-link {
        grid-column:  4;
        // Bug 1967304 - Large number (-48px)
        margin-block-start: calc(var(--space-xlarge) * -2);
      }
    }

    @media (min-width: $break-point-widest) and (max-width: $break-point-sections-variant) {
      h2 {
        max-width: 200px;
      }

      p {
        width: 300px;
      }

      .personalized-card-cta {
        // Bug 1967304 - Large number (40px)
        margin-inline-end: calc(var(--space-large) + var(--space-xlarge));
      }

      .personalized-card-link {
        width: 290px;
        // Bug 1967304 - Large number (-64px)
        margin-block-start: calc(var(--space-xxlarge) * -2);
      }
    }
  }
}
