@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 */
.image-with-callout__image {
  position: relative;
  padding-right: 3.125rem; }
  @media (max-width: 35.9375rem) {
    .image-with-callout__image {
      padding-right: 0; } }
  .image-with-callout__image img {
    display: block; }
    .image-with-callout__image img.rounded-corner {
      border-radius: 0.9375rem; }

.image-with-callout__callout {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(50%);
  width: 23.125rem;
  max-width: 100%;
  background: #ffcf3e;
  border-radius: 0.9375rem;
  padding: 1.875rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  box-shadow: 0 3px 26px 0 rgba(0, 0, 0, 0.16); }
  @media (max-width: 35.9375rem) {
    .image-with-callout__callout {
      width: 100%;
      transform: none;
      bottom: auto;
      top: calc(100% - 20px); } }
  .image-with-callout__callout-icon {
    margin-top: 0.1875rem;
    flex-shrink: 0; }
    .image-with-callout__callout-icon img {
      width: 1.875rem;
      height: 1.875rem; }
  .image-with-callout__callout-text {
    font-size: 1.25rem; }
    .image-with-callout__callout-text p {
      margin: 0;
      margin-bottom: 0.9375rem; }
      .image-with-callout__callout-text p:last-child {
        margin-bottom: 0; }

/*# sourceMappingURL=image-with-callout.css.map */