.callout {
  --callout-color: #337eaf;
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  margin: 30px 0;
  padding: 22px 24px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--callout-color) 9%, #fff),
    color-mix(in srgb, var(--callout-color) 3%, #fff)
  );
  border: 1px solid color-mix(in srgb, var(--callout-color) 32%, var(--line));
  border-radius: 16px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--callout-color) 9%, transparent);
}

.callout::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: var(--callout-color);
}

.callout-icon {
  width: 34px;
  height: 34px;
  background: var(--callout-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.callout-title {
  display: block;
  margin: 1px 0 7px;
  color: var(--callout-color);
  font-size: 14px;
  letter-spacing: .01em;
}

.callout-warning { --callout-color: #bd7b16; }
.callout-danger { --callout-color: #c44745; }
.callout-success { --callout-color: #238668; }

.callout-warning .callout-icon,
.callout-danger .callout-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.callout-success .callout-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
}

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

@media (max-width: 720px) {
  .callout {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 13px;
    padding: 19px 18px;
  }

  .callout-icon {
    width: 30px;
    height: 30px;
  }
}