/*

Usage:
@include breakpoint(laptop) {
  // styles for laptop and wider
}
@include breakpoint(laptop, 800px) {
  // styles for laptop width and screens up to 800px tall
  // useful for targeting shorter laptop screens
}

@include breakpoint(desktop, 900px) {
  // styles for desktop width but shorter screens
}
  */
/*-----------------------
EASING 
---------------------- */
.single-callout-button .callout-button-lg {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 2.2rem 3.2rem 3.2rem 3.2rem;
  border-radius: var(--border-radius);
  position: relative;
  min-height: 15.8rem;
}
@media (min-width: 1024px) {
  .single-callout-button .callout-button-lg {
    width: calc(100% - 5.5rem);
  }
}
.single-callout-button .callout-button-lg .button-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.single-callout-button .callout-button-lg .button-inner .subheading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-transform: uppercase;
}
.single-callout-button .callout-button-lg .button-inner .heading {
  font-size: var(--font-size-md-lg);
  font-stretch: var(--font-width-normal);
  font-weight: var(--font-weight-normal);
  line-height: 1.14;
}
.single-callout-button .callout-button-lg .arrow {
  width: 7.5rem;
  height: 7.5rem;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0%, -50%);
  border-radius: var(--border-radius);
  background-color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  .single-callout-button .callout-button-lg .arrow {
    width: 3.8rem;
    height: 3.8rem;
    transform: translate(50%, -50%);
  }
}
.single-callout-button .callout-button-lg .arrow svg {
  width: 72%;
}
.single-callout-button .callout-button-lg .arrow svg path {
  fill: var(--color-white);
}
.single-callout-button .callout-button-lg .arrow .inverted-corner {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 0;
  right: 0;
}
.single-callout-button .callout-button-lg .arrow .inverted-corner svg {
  width: 100%;
}
.single-callout-button .callout-button-lg .arrow .inverted-corner svg path {
  fill: var(--color-accent);
}
.single-callout-button .callout-button-lg .arrow .inverted-corner.top-left {
  right: 100%;
  top: 50%;
  transform: translate(0, -100%);
}
.single-callout-button .callout-button-lg .arrow .inverted-corner.bottom-right {
  top: 100%;
  right: 50%;
  transform: translate(100%, 0);
}
@media (min-width: 1024px) {
  .single-callout-button .callout-button-lg .arrow {
    width: 11rem;
    height: 11rem;
  }
}