@charset "UTF-8";
.widget .banner {
  display: block;
  text-decoration: none;
  position: relative;
  margin-inline: auto;
  width: calc(100% - var(--size-3));
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget .banner {
    padding-top: 1.875rem;
    position: absolute;
    bottom: 7rem;
    left: 50%;
    translate: -50% 0;
    width: 45.5rem;
  }
}
.widget .banner blockquote {
  background-image: url("/src/assets/images/banner/stars.svg"), url("/src/assets/images/banner/lights.svg"), linear-gradient(272deg, var(--color-brand-gradient-rb));
  background-position: 0 0, right calc(var(--size-line) * -3) top calc(var(--size-line) * -1);
  background-repeat: no-repeat;
  border-radius: var(--border-radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding-inline: var(--size-2);
  height: var(--size-7);
}
@media only screen and (min-width: 568px) {
  .widget .banner blockquote {
    align-items: center;
  }
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget .banner blockquote {
    align-items: flex-start;
    background-image: url("/src/assets/images/banner/stars.svg"), url("/src/assets/images/banner/lights.svg"), url("/src/assets/images/banner/stripes.svg"), linear-gradient(272deg, var(--color-brand-gradient-rb));
    background-position: 0 0, 100% 0, 100% 0;
    border-radius: var(--border-radius-base);
    padding-inline: var(--size-5);
    height: 5.625rem;
  }
}
.widget .banner p {
  display: none;
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget .banner p {
    background: hsl(var(--h), var(--s), calc(var(--l) - 4%));
    border-radius: var(--border-radius-pill);
    color: var(--color-ink-inverse-max);
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-block: var(--size-1);
    padding-inline: var(--size-2);
    position: relative;
    width: fit-content;
    min-width: 25rem;
    max-width: 35.125rem;
  }
  .widget .banner p::after {
    background: var(--color-brand-primary);
    mix-blend-mode: color;
    border-radius: var(--border-radius-pill);
    content: "";
    position: absolute;
    inset: 0;
  }
}
.widget .banner footer {
  background: var(--color-brand-2ry);
  border-radius: var(--border-radius-xs);
  color: var(--color-ink-inverse-900);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  display: flex;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-block: var(--size-half);
  padding-inline: var(--size-1p5);
  position: relative;
  width: fit-content;
  max-width: 100%;
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget .banner footer {
    border-radius: var(--border-radius-pill);
    margin-top: calc(var(--size-half) * -1);
    margin-left: var(--size-3);
    max-width: 35.125rem;
  }
}
.widget .banner cite {
  display: none;
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget .banner cite {
    display: inline;
    font-style: normal;
    font-weight: 500;
  }
  .widget .banner cite::after {
    content: "—";
    margin-inline: var(--size-half);
  }
}
.widget .banner img {
  border-radius: var(--border-radius-sm);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .widget .banner img {
    height: 4.25rem;
    width: auto;
  }
}
@media only screen and (min-width: 768px) and (min-height: 361px) {
  .widget .banner img {
    border-radius: 0;
    right: var(--size-2p5);
  }
}

/*# sourceMappingURL=banner.css.map */