.paragraph.paragraph--type--standalone-cta {
  --ribbon-display: flex;
  --ribbon-top: unset;
  --ribbon-right: unset;
  --ribbon-bottom: unset;
  --ribbon-left: unset;
  --ribbon-align-items: initial;
  --ribbon-justify-content: initial;
  --ribbon-max-width: initial;
  --ribbon-margin: 20px auto;
  --ribbon-padding: initial;
  --ribbon-border-top: initial;
  --ribbon-border-right: initial;
  --ribbon-border-bottom: initial;
  --ribbon-border-left: initial;
  --ribbon-border-radius: initial;
  --ribbon-box-shadow: initial;
  --ribbon-background-color: transparent;
  --ribbon-background-image: none;
  --ribbon-background-repeat: no-repeat;
  --ribbon-background-position: initial;
  --ribbon-background-size: 100%;
  --ribbon-background-blend-mode: initial;

  position: relative;
  box-sizing: border-box;
  display: var(--ribbon-display);
  top: var(--ribbon-top);
  right: var(--ribbon-right);
  bottom: var(--ribbon-bottom);
  left: var(--ribbon-left);
  align-items: var(--ribbon-align-items);
  justify-content: var(--ribbon-justify-content);
  max-width: var(--ribbon-max-width);
  margin: var(--ribbon-margin);
  padding: var(--ribbon-padding);
  border-top: var(--ribbon-border-top);
  border-right: var(--ribbon-border-right);
  border-bottom: var(--ribbon-border-bottom);
  border-left: var(--ribbon-border-left);
  border-radius: var(--ribbon-border-radius);
  box-shadow: var(--ribbon-box-shadow);
  background-color: var(--ribbon-background-color);
  background-image: var(--ribbon-background-image);
  background-repeat: var(--ribbon-background-repeat);
  background-position: var(--ribbon-background-position);
  background-size: var(--ribbon-background-size);
  background-blend-mode: var(--ribbon-background-blend-mode);
}

@media screen and (min-width: 768px) {
  .paragraph.paragraph--type--standalone-cta {
    --ribbon-justify-content: center;
  }
}

@media screen and (min-width: 1024px) {
  .paragraph.paragraph--type--standalone-cta {
    --ribbon-margin: 50px auto;
  }
}

/* set base font styles at this level. */
.ribbon__container {
  --container-display: flex;
  --container-position: relative;
  --container-flex-flow: column;
  --container-gap: 20px;
  --container-top: unset;
  --container-right: unset;
  --container-bottom: unset;
  --container-left: unset;
  --container-align-items: left;
  --container-justify-content: unset;
  --container-width: 100%;
  --container-max-width: 100%;
  --container-margin: 0;
  --container-padding: 20px 19px;
  --container-transform: unset;
  --container-border: initial;
  --container-border-top: initial;
  --container-border-right: initial;
  --container-border-bottom: initial;
  --container-border-left: initial;
  --container-box-shadow: initial;
  --container-box-sizing: border-box;
  --container-background: var(--base-off-white);
  --container-color: var(--base-grey-5);
  --container-font-family: var(--font-primary);
  --container-font-size: 18px;
  --container-font-weight: 400;
  --container-text-align: initial;
  --container-line-height: 1.171;

  display: var(--container-display);
  position: var(--container-position);
  flex-flow: var(--container-flex-flow);
  gap: var(--container-gap);
  top: var(--container-top);
  right: var(--container-right);
  bottom: var(--container-bottom);
  left: var(--container-left);
  align-items: var(--container-align-items);
  justify-content: var(--container-justify-content);
  width: var(--container-width);
  max-width: var(--container-max-width);
  margin: var(--container-margin);
  padding: var(--container-padding);
  transform: var(--container-transform);
  border: var(--container-border);
  border-top: var(--container-border-top);
  border-right: var(--container-border-right);
  border-bottom: var(--container-border-bottom);
  border-left: var(--container-border-left);
  box-shadow: var(--container-box-shadow);
  box-sizing: var(--container-box-sizing);
  background: var(--container-background);
  color: var(--container-color);
  font-family: var(--container-font-family);
  font-size: var(--container-font-size);
  font-weight: var(--container-font-weight);
  text-align: var(--container-text-align);
  line-height: var(--container-line-height);
}

@media screen and (min-width: 768px) {
  .ribbon__container {
    --container-flex-flow: row;
    --container-max-width: var(--container-max-width-sm);
    --container-align-items: center;
    --container-justify-content: unset;
    --container-padding: 20px 18px;
  }
}

@media screen and (min-width: 1024px) {
  .ribbon__container {
    --container-max-width: var(--container-max-width-md);
  }
}

@media screen and (min-width: 1160px) {
  .ribbon__container {
    --container-max-width: var(--container-max-width-lg);
    --container-padding: 32px 20px 32px 16px;
  }
}

@media screen and (min-width: 1440px) {
  .ribbon__container {
    --container-max-width: var(--container-max-width-xl);
  }
}

@media screen and (min-width: 1800px) {
  .ribbon__container {
    --container-max-width: var(--container-max-width-ultra);
  }
}

.ribbon__container::after {
  --container-after-content: none;
  --container-after-display: block;
  --container-after-position: absolute;
  --container-after-top: unset;
  --container-after-right: unset;
  --container-after-bottom: unset;
  --container-after-left: unset;
  --container-after-width: initial;
  --container-after-height: initial;
  --container-after-background: transparent;

  content: var(--container-after-content);
  display: var(--container-after-display);
  position: var(--container-after-position);
  top: var(--container-after-top);
  right: var(--container-after-right);
  bottom: var(--container-after-bottom);
  left: var(--container-after-left);
  width: var(--container-after-width);
  height: var(--container-after-height);
  background: var(--container-after-background);
}

.ribbon__container .field--name-field-media-image {
  --image-position: relative;
  --image-top: unset;
  --image-right: unset;
  --image-bottom: unset;
  --image-left: unset;
  --image-width: initial;
  --image-flex: 0 0 33.33334%;
  --image-margin: initial;
  --image-padding: initial;
  --image-line-height: initial;

  display: flex;
  position: var(--image-position);
  top: var(--image-top);
  right: var(--image-right);
  bottom: var(--image-bottom);
  left: var(--image-left);
  width: var(--image-width);
  flex: var(--image-flex);
  margin: var(--image-margin);
  padding: var(--image-padding);
  line-height: var(--image-line-height);
}

.ribbon__container .field--name-field-title {
  --title-margin: 0;
  --title-padding: 0;
  --title-border-right: initial;
  --title-border-left: initial;
  --title-color: var(--base-black);
  --title-font-size: 22px;
  --title-font-family: var(--font-primary);
  --title-font-weight: var(--font-weight-bold);
  --title-line-height: 1.17;
  --title-text-transform: initial;

  margin: var(--title-margin);
  padding: var(--title-padding);
  border-right: var(--title-border-right);
  border-left: var(--title-border-left);
  color: var(--title-color);
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
  line-height: var(--title-line-height);
  text-transform: var(--title-text-transform);
}

@media screen and (min-width: 1160px) {
  .ribbon__container .field--name-field-title {
    /* todo: once breakpoints is merged, get the right screen size value. */
    --title-font-size-medium: 24px;
    /* todo: once breakpoints is merged, get the right screen size value. */
    --title-line-height-medium: 1.166;
  }
}

.ribbon__container p a {
  --description-link-color: inherit;
  --description-link-font-size: inherit;
  --description-link-font-weight: inherit;
  --description-link-line-height: inherit;
  --description-link-text-decoration: inherit;
  --description-link-margin: inherit;

  color: var(--description-link-color);
  font-size: var(--description-link-font-size);
  font-weight: var(--description-link-font-weight);
  line-height: var(--description-link-line-height);
  text-decoration: var(--description-link-text-decoration);
  margin: var(--description-link-margin);
}

.ribbon__container p {
  --description-flex: unset;
  --description-flex-small: 0 1 40%;
  --description-flex-medium: 0 1 50%;
  --description-flex-large: 0 1 59%;
  --description-margin: initial;
  --description-padding: initial;
  --description-color: var(--grey-light);
  --description-font-size: 20px;
  --description-font-weight: var(--font-weight-bold);
  --description-line-height: inherit;

  flex: var(--description-flex);
  margin: var(--description-margin);
  padding: var(--description-padding);
  color: var(--description-color);
  font-size: var(--description-font-size);
  font-weight: var(--description-font-weight);
  line-height: var(--description-line-height);
}

/* todo: clean this up */

@media screen and (min-width: 768px) {
  .ribbon__container p {
    flex: var(--description-flex-small);
  }
}

@media screen and (min-width: 1024px) {
  .ribbon__container p {
    flex: var(--description-flex-medium);
  }
}

@media screen and (min-width: 1160px) {
  .ribbon__container p {
    flex: var(--description-flex-large);
  }
}

@media screen and (min-width: 1440px) {
  .ribbon__container p {
    --description-flex-large: unset;
  }
}

@media screen and (min-width: 1800px) {
  .ribbon__container {
    --description-flex-large: unset;
  }
}

.ribbon__container p {
  margin: 0;
  padding: 0;
}

.ribbon__container .field--name-field-link {
  --button-container-display: initial;
  --button-container-flex: unset;
  --button-container-justify-content: unset;
  --button-container-margin: initial;
  --button-container-font-size: initial;

  display: var(--button-container-display);
  flex: var(--button-container-flex);
  justify-content: var(--button-container-justify-content);
  margin: var(--button-container-margin);
  font-size: var(--button-container-font-size);
}

@media screen and (min-width: 768px) {
  .ribbon__container .field--name-field-link {
    --button-container-flex: 0 0 fit-content;
  }
}

a.ribbon__link {
  --link-display: inherit;
  --link-font-size: inherit;
  --link-font-weight: inherit;
  --link-line-height: inherit;
  --link-color: inherit;
  --link-margin: unset;
  --link-padding: unset;
  --link-border: unset;
  --link-border-radius: unset;
  --link-background: unset;
  --link-text-decoration: unset;

  text-decoration: none;
  display: var(--link-display);
  font-size: var(--link-font-size);
  font-weight: var(--link-font-weight);
  line-height: var(--link-line-height);
  color: var(--link-color);
  margin: var(--link-margin);
  padding: var(--link-padding);
  border: var(--link-border);
  border-radius: var(--link-border-radius);
  background: var(--link-background);
  text-decoration: var(--link-text-decoration);
}

.ribbon__link::after {
  --button-after-content: '';
  --button-after-top: 2px;
}

.paragraph .ribbon__link:hover {
  color: var(--link-color);
}