.dxp-card--social {
  /* component variables */
  --card-gap: 3.5rem;
  --card-padding-vertical: 2rem;
  --card-padding-horizontal: 2rem;
  --card-body-background-color: var(--dxp-color-background-secondary);
  --card-body-font-color: var(--dxp-color-foreground-primary);
  --card-title-font: var(--dxp-font-h5);
  --card-title-color: var(--dxp-black-color);
  --card-label-font: var(--abb-body-s);
  --card-label-color: var(--dxp-color-foreground-tertiary);
  --card-body-font: var(--abb-font-body-large);
  --card-body-color: var(--dxp-color-brand-secondary);
}
  /* end: component variables */
  .dxp-card--social .dxp-card__wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--card-padding-vertical) var(--card-padding-horizontal);
    text-decoration: none;
    border-radius: var(--card-border);
    background-color: var(--card-body-background-color);
    gap: var(--card-gap);
  }
  .dxp-card--social .dxp-card__wrapper__text-wrapper {
      color: var(--card-body-font-color);
    }
  .dxp-card--social .dxp-card__wrapper__text-wrapper__inner {
        display: flex;
        flex-direction: column;
        gap: var(--card-gap);
      }
  .dxp-card--social .dxp-card__wrapper__text-wrapper__inner__title {
          display: flex;
          gap: 1rem;
        }
  .dxp-card--social .dxp-card__wrapper__text-wrapper__inner__title .dxp-icon {
            --icon-size: 3rem;
            --icon-color: #0073B0;

            margin: 0;
          }
  .dxp-card--social .dxp-card__wrapper__text-wrapper__inner__title__label {
            margin: 0;
            letter-spacing: -0.045rem;
            text-transform: uppercase;
            color: var(--card-label-color);
            font: var(--card-label-font);
          }
  .dxp-card--social .dxp-card__wrapper__text-wrapper__inner__title .dxp-title {
            margin: 0.1875rem 0 0;
            letter-spacing: -0.045rem;
            color: var(--card-title-color);
            font: var(--card-title-font);
          }
  .dxp-card--social .dxp-card__wrapper__text-wrapper__inner__text {
          display: -webkit-box;  
          overflow: hidden;
          max-width: 32.25rem;
          color: var(--card-body-color);
          font: var(--card-body-font);
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
        }
  .dxp-card--social .dxp-card__wrapper__text-wrapper__inner__text p:last-of-type {
            margin: 0;
          }
  .dxp-card--social.dxp-card--has-cta-button .dxp-card__wrapper__image__wrap::after {
            position: absolute;
            content: "";
            transition: background 0.3s ease-out;
            background: rgba(0, 0, 0, 0.4);
            inset: 0;
          }
  .dxp-card--social.dxp-card--has-cta-button .dxp-card__wrapper__image .dxp-image img {
            scale: 1;
            transition: scale 0.3s ease-out;
          }
  .dxp-card--social.dxp-card--has-cta-button .dxp-card__wrapper .dxp-button {
        display: none;
        min-height: 3.25rem;
        padding: 0.5rem 0.625rem;
      }
  @media all and (width >= 768px) {
  .dxp-card--social.dxp-card--has-cta-button .dxp-card__wrapper .dxp-button {
          min-height: 3.75rem;
          padding: 0.75rem 0.875rem
      }
        }
  .dxp-card--social.dxp-card--has-cta-button .dxp-card__wrapper:hover .dxp-button {
          --button-filled-background-color: var(--dxp-color-brand-primary);
        }
  .dxp-card--social.dxp-card--has-cta-button .dxp-card__wrapper:hover .dxp-button.button-component.dxp-button--has-right-icon .dxp-button__label {
            margin-right: 0.5rem;
          }
  .dxp-card--social.dxp-card--has-cta-button .dxp-card__wrapper:hover .dxp-card__wrapper__image .dxp-card__wrapper__image__wrap .dxp-image img {
                scale: 1.05;
              }
  .dxp-card--social.dxp-card--has-cta-button .dxp-card__wrapper:hover .dxp-card__wrapper__image .dxp-card__wrapper__image__wrap::after {
              background: rgba(0, 0, 0, 0.6);
            }
  .dxp-card--social--teaser {
    --card-title-font: var(--dxp-font-h5);
    --card-body-font: var(--abb-font-body-medium);
    --card-label-font: var(--abb-button-l);
    --card-border: 0;
    --card-image-border-radius: 1rem;
    --card-image-height: 12.5rem;
  }
  @media all and (width >= 768px) {
  .dxp-card--social--teaser {
      --card-image-height: 11.875rem
  }
    }
  @media all and (width >= 1024px) {
  .dxp-card--social--teaser {
      --card-image-height: 14.0625rem
  }
    }
  .dxp-card--social--teaser .dxp-card__wrapper__image {
        height: var(--card-image-height);
        border-radius: var(--card-image-border-radius);
        aspect-ratio: 2 / 1;
      }
  .dxp-card--social--teaser .dxp-card__wrapper__text-wrapper {
        padding-bottom: 0;
      }
  .dxp-card--social--teaser .dxp-card__wrapper__text-wrapper__inner__tags {
            display: flex;
            gap: 1rem;
            align-items: center;
          }
  .dxp-card--social--teaser .dxp-card__wrapper__text-wrapper__inner__label {
            color: var(--dxp-color-brand-secondary);
            font: var(--card-label-font);
          }
  .dxp-card--social--teaser .dxp-card__wrapper__text-wrapper__inner__title {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;  
            overflow: hidden;
          }
  .dxp-card--social--teaser .dxp-card__wrapper__text-wrapper__inner__text {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;  
            overflow: hidden;
          }
  .dxp-card--social--teaser .dxp-card__wrapper .dxp-button {
        width: -moz-fit-content;
        width: fit-content;
        min-width: unset;
        min-height: unset;
        margin-top: auto;
        padding: 0;
        border-bottom: thin solid var(--button-filled-background-color);
        border-radius: unset;
        font: var(--abb-font-body-large);
        font-weight: 400;
      }
  .dxp-card--social--teaser .dxp-card__wrapper .dxp-button:hover {
          border-bottom: thin solid var(--button-hover-color);
        }