.sponsor-stripe-vue-app {
  min-height: 40px;
}

.sponsor-stripe-wrap {
  background-color: var(--color-surface-surface-active);
  min-height: 40px;
}

.sponsor-stripe-wrap.inverted {
  background-color: var(--color-background-background-inverse-neutral);
}

.header-banner {
  background-color: var(--color-foreground-foreground-inactive);
}

.header-banner,
.sponsor-stripe-wrap {
  display: flex;
  align-items: center;
}

.sponsor-stripe-bg {
  background-color: transparent;
}

.sponsor-stripe-bg .sponsor-stripe-block {
  min-height: 40px;
}

.sponsor-stripe-block {
  display: flex;
  gap: 16px;
  padding: var(--space-sm) var(--space-lg);
}

.sponsor-right {
  gap: 24px;
  padding: var(--space-sm) var(--space-xl);
}

.stripe-image {
  width: 71px;
  height: 40px;
}

.stripe-image img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}

.sponsor-stripe-text {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  width: 100%;
  display: flex;
}

.stripe-image + .sponsor-stripe-text {
  width: calc(100% - 87px);
}

.sponsor-stripe-text p {
  font-size: var(--typography-font-size-body2-strong-lg);
  line-height: var(--typography-line-height-body2-strong-lg);
  font-weight: var(--font-weight-bold);
}

.sponsor-stripe-text p,
.sponsor-stripe-text h2 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(
    --text-color-desktop,
    var(--color-foreground-foreground-on-active)
  );
}

.sponsor-stripe-text a {
  width: calc(100% - 40px);
  display: block;
}

.sponsor-stripe-text a:has(.icon-wrapper) {
  width: auto;
}

.sponsor-stripe-text:has(a) p {
  width: 100%;
}

.sponsor-stripe-text p {
  width: calc(100% - 40px);
}

.sponsor-stripe-text .icon-wrapper {
  width: 24px;
  height: 24px;
}

.header-banner .sponsor-stripe-block {
  padding: var(--space-sm) 0;
}

.sponsor-stripe-block .stripe-image img.img-fluid {
  border-radius: 0;
}

.sponsor-stripe-wrap,
.header-banner {
  background-size: cover;
}

/* .header-banner.sponsor-stripe-bg .sponsor-stripe-block,
.sponsor-stripe-wrap:has(.sponsor-stripe-block:empty) .sponsor-stripe-block {
  min-height: 88px;
} */

.sponsor-stripe-wrap--bgcolor,
.header-banner--bgcolor {
  background-color: var(--bg-color-desktop);
  background-image: none;
}

.sponsor-stripe-wrap--bgimg,
.header-banner--bgimg {
  background-image: var(--bg-img-desktop);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sponsor-stripe-wrap--headerbgimg,
.header-banner--headerbgimg {
  background-image: var(--header-bg-img-desktop);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-banner--bgimg,
.header-banner--headerbgimg {
  min-height: 88px;
}

.sponsor-stripe-wrap--bgimg,
.sponsor-stripe-wrap--headerbgimg {
  min-height: 40px;
}

@media only screen and (max-width: 960px) {
  .sponsor-stripe-block {
    gap: 16px;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);
  }

  .sponsor-right {
    padding: var(--space-sm) var(--space-lg);
  }

  .sponsor-stripe-text a {
    width: calc(100% - 36px);
  }

  .sponsor-stripe-wrap,
  .header-banner {
    background-size: 100% 100%;
  }

  /* .header-banner.sponsor-stripe-bg .sponsor-stripe-block {
    min-height: 64px;
  } */

  .sponsor-stripe-wrap--bgcolor,
  .header-banner--bgcolor {
    background-color: var(--bg-color-mobile);
    background-image: none;
  }

  .sponsor-stripe-wrap--bgimg,
  .header-banner--bgimg {
    background-image: var(--bg-img-mobile);
  }

  .sponsor-stripe-wrap--headerbgimg,
  .header-banner--headerbgimg {
    background-image: var(--header-bg-img-mobile);
  }

  .header-banner--bgimg,
  .header-banner--headerbgimg {
    min-height: 64px;
  }
}

/* utils */
.sponsor-stripe_content--reverse {
  display: flex;
  flex-direction: row-reverse;
}