/*
 * A short note on frosted glass, with a round icon, laid over a photo.
 *
 *   <div class="yb-callout">
 *     <span class="yb-icon-badge yb-icon-badge--yellow" aria-hidden="true"><span class="yb-icon yb-icon--phone"></span></span>
 *     <div><p>…</p></div>
 *   </div>
 */
.yb-callout {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 16px;
  border-radius: 46px;
  background: var(--yb-color-glass);
  -webkit-backdrop-filter: var(--yb-blur-glass);
  backdrop-filter: var(--yb-blur-glass);
}

.yb-callout > div {
  padding: 7px 36px 0 0;
}

.yb-callout p {
  margin-bottom: 16px;
}

.yb-callout p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .yb-callout {
    border-radius: var(--yb-radius-panel);
  }

  .yb-callout > div {
    padding-right: 0;
  }
}