/* stylelint-disable length-zero-no-unit, prettier/prettier, selector-pseudo-element-colon-notation */
.cta {
  background-color: var(--color-yellow-light);
  border-radius: var(--radius-lg);
  margin: var(--spacing-1) auto;
  max-width: 90%;
  position: relative;
  overflow: hidden;
}

.cta .cta-note {
  display: flex;
  justify-content: space-between;
}

.cta-note .cta-note-body {
  padding: var(--spacing-2);
  padding-left: var(--spacing-4);
  padding-top: var(--spacing-4);
}

.cta-note .cta-note-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-3);
  line-height: var(--line-height-lg);
  margin-bottom: var(--spacing-1);
}

.cta-note img {
  margin: var(--spacing-2);
  transform: rotate(15deg);
  object-fit: contain;
}

.cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  border-radius: 0 0 var(--radius-lg) 0;
  border-width: 16px;
  border-color: var(--color-gray-100) var(--color-yellow) var(--color-yellow) var(--color-gray-100);
  border-style: solid;
}

@media only percy {
  .cta-note .cta-note-heading,
  .cta-note img {
    visibility: hidden;
  }
}

