.Ip5SFEN7jyD3mWgndVph {
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--icon-bg, rgba(255, 255, 255, 0.2));
  color: var(--icon-color, #ffffff);
  border-radius: 9999px;
  text-decoration: none;
  font-family: inherit;
}

.Ip5SFEN7jyD3mWgndVph:hover {
  background-color: var(
    --icon-bg-hover,
    var(--icon-bg, rgba(255, 255, 255, 0.3))
  );
  color: var(--icon-color-hover, var(--icon-color, #ffffff));
}

.Ip5SFEN7jyD3mWgndVph:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.XURl8lNKwGa0Uh9c8vHJ {
  display: block;
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
  .Ip5SFEN7jyD3mWgndVph {
    transition:
      background-color 150ms ease,
      color 150ms ease;
  }
}

/*
 * NBL Desktop Wireframes — Social Media Card (node 6478:163976).
 *
 * Card: 16px padding, 18px gap, #EE7623 fill, 8px radius, Elevation/Low shadow
 * (0px 1px 4px 0px rgba(0, 0, 0, 0.12)).
 * Title: Heading/S/Semi Bold — 20px/28px, #FFFFFF.
 * Paragraph: Body/M/Regular — 14px/17px, #E5E5E5.
 *
 * Sizing: the card fills its container's height (`height: 100%` plus
 * `align-self: stretch`), matching the Figma instance's vertical `fill`.
 * The parent needs a definite height — or must stretch the card as a flex/grid
 * item — for the percentage to resolve; otherwise the card hugs its content.
 */
.KVU8fREEXoeqvNPaY4oN {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0px;
  min-height: 0px;
  flex-direction: column;
  align-self: stretch;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  overflow: hidden;
  color: var(--social-card-color, #ffffff);
  background: var(--social-card-background, #ee7623);
  border-radius: 8px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.12);
  font-family: inherit;
}

.ZCUOvWQh99PckXfWCnWK {
  width: 100%;
  min-width: 0px;
  margin: 0px;
  font-size: var(--social-card-heading-font-size, 20px);
  font-weight: 600;
  line-height: 1.4em;
  overflow-wrap: break-word;
}

.dwga1bDLPwdOA4X7xANQ {
  width: 100%;
  min-width: 0px;
  margin: 0px;
  color: var(--social-card-description-color, #e5e5e5);
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  overflow-wrap: break-word;
}

.DZNImHZ5uLx83khe72Vs {
  display: flex;
  width: 100%;
  min-width: 0px;
  align-items: center;
  justify-content: space-between;
}

/*
 * Icon hover: keep the idle colours and scale up slightly instead. The
 * `[style*="--icon-bg"]` guard targets Figma/Icon roots (which set those
 * custom properties inline) so custom slot content keeps its own hover.
 */
@media (prefers-reduced-motion: no-preference) {
  .DZNImHZ5uLx83khe72Vs > a,
  .DZNImHZ5uLx83khe72Vs > span {
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.DZNImHZ5uLx83khe72Vs > a:hover,
.DZNImHZ5uLx83khe72Vs > span:hover {
  transform: scale(1.08);
}

.DZNImHZ5uLx83khe72Vs > a[style*="--icon-bg"]:hover,
.DZNImHZ5uLx83khe72Vs > span[style*="--icon-bg"]:hover {
  background-color: var(--icon-bg);
  color: var(--icon-color);
}