[data-component-id="avchildcare:donation_method_card"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--background-primary);
  padding: 20px 10px;
  gap: 24px;
  border-radius: 20px;
  box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.05);
  width: 100%;

  & .donation-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--color-orange);
    color: var(--color-cream);
    width: 100%;
  }

  & .donation-header-text {
    color: var(--color-cream);
    margin: 0;
  }

  & .donation-icon {
    width: 24px;
    height: 24px;
    color: var(--color-cream);
  }

  & .donation-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 291px;
    & .left-col .text-small,
    & strong {
      color: var(--text-primary);
    }
    & a {
      text-decoration: none;
    }
    & a[href^="tel:"]:before {
      flex-shrink: 0;
      content: '';
      width: 16px;
      height: 16px;
      display: inline-block;
      vertical-align: -3px;
      margin-right: 8px;
      mask-size: contain;
      mask-repeat: no-repeat;
      background-color: currentColor;
      mask-image: url("/modules/custom/ui_icons_doodle/icons/call.svg");
    }
  }
  @media (min-width: 768px) {
    padding: 40px;
  }
}
[data-component-id="avchildcare:donation_method_card"]:has(.donation-header) {
  padding: 10px;
  & .donation-body {
    max-width: 100%;
  }
  @media (min-width: 768px) {
    padding: 20px;
  }  
}