@use "sass:math";
/* media query mixin */
/* get rid of list formatting */
/* prevent long links from breaking out of container */
/* creates a colored circle with an icon in the middle */
/* formats the placeholder text within an input field */
.intro-yellow-callout-wrap {
  padding: 0; }

.intro-yellow-callout__text {
  position: relative;
  width: 61.25rem;
  padding: 3.75rem 5.625rem 1.25rem 0;
  max-width: 100%; }
  @media (max-width: 74.9375rem) {
    .intro-yellow-callout__text {
      padding: 3.75rem 3.75rem 1.25rem 0; } }
  @media (max-width: 47.9375rem) {
    .intro-yellow-callout__text {
      padding: 3.75rem 1.875rem 1.25rem 0; } }
  @media (max-width: 35.9375rem) {
    .intro-yellow-callout__text {
      padding: 1.875rem 0; } }
  .intro-yellow-callout__text-subtitle {
    font-size: 1.125rem;
    text-transform: uppercase;
    margin-bottom: 0.9375rem; }
  .intro-yellow-callout__text-title {
    max-width: 50rem; }
    .intro-yellow-callout__text-title h1 {
      font-size: 3.75rem;
      line-height: 1.2;
      margin: 0; }
      .intro-yellow-callout__text-title h1.larger {
        font-size: 2.25rem; }
      .intro-yellow-callout__text-title h1.large {
        font-size: 1.875rem; }
      @media (max-width: 47.9375rem) {
        .intro-yellow-callout__text-title h1 {
          font-size: 2.25rem; }
          .intro-yellow-callout__text-title h1.larger {
            font-size: 1.75rem; }
          .intro-yellow-callout__text-title h1.large {
            font-size: 1.5rem; } }

.intro-yellow-callout__img-wrap {
  position: relative;
  margin-top: 5.625rem; }
  @media (max-width: 47.9375rem) {
    .intro-yellow-callout__img-wrap {
      margin-top: 0rem; } }

.intro-yellow-callout__img {
  position: relative;
  z-index: 1;
  height: 37.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }
  @media (max-width: 47.9375rem) {
    .intro-yellow-callout__img {
      height: auto;
      padding-top: 70%; } }

.intro-yellow-callout__callout {
  position: relative;
  z-index: 2;
  position: absolute;
  top: -5.625rem;
  left: 50%;
  background: #ffcf3e;
  width: 37.5rem;
  padding: 3.125rem;
  border-radius: 0.9375rem; }
  @media (max-width: 86.9375rem) {
    .intro-yellow-callout__callout {
      left: auto;
      right: 3.75rem; } }
  @media (max-width: 47.9375rem) {
    .intro-yellow-callout__callout {
      left: 0;
      right: 0;
      width: auto;
      padding: 1.875rem;
      position: relative;
      top: auto;
      margin-bottom: -3.75rem;
      margin-left: 1.875rem;
      margin-right: 1.875rem; } }
  .intro-yellow-callout__callout-title {
    font-size: 1.125rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0.9375rem; }
  .intro-yellow-callout__callout-description {
    font-size: 1.25rem;
    font-weight: 400; }
  .intro-yellow-callout__callout-anchor {
    display: inline-flex;
    align-items: center;
    margin-top: 1.875rem;
    text-decoration: none; }
    @media (max-width: 47.9375rem) {
      .intro-yellow-callout__callout-anchor {
        margin-top: 0.9375rem; } }
    .intro-yellow-callout__callout-anchor:hover {
      text-decoration: none; }
      .intro-yellow-callout__callout-anchor:hover .intro-yellow-callout__callout-anchor-icon {
        background: #2b2b2b; }
        .intro-yellow-callout__callout-anchor:hover .intro-yellow-callout__callout-anchor-icon i {
          color: white; }
      .intro-yellow-callout__callout-anchor:hover .intro-yellow-callout__callout-anchor-text {
        text-decoration: underline; }
    .intro-yellow-callout__callout-anchor-icon {
      flex-shrink: 0;
      width: 1.5625rem;
      height: 1.5625rem;
      margin-right: 0.625rem;
      border-radius: 50%;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center; }
      .intro-yellow-callout__callout-anchor-icon i {
        font-size: 0.875rem; }
    .intro-yellow-callout__callout-anchor-text {
      font-size: 1.125rem;
      font-weight: bold; }

/*# sourceMappingURL=intro-yellow-callout.css.map */