@media (min-width: #{map-get($grid-breakpoints, lg)}) {
  .callout {
    p {
      font-size: 1rem;
    }
  }
}
div.callout {
  max-width: none;
  padding: 0; //override volto's style
  border: none;
  border-radius: unset;
  margin: 0;
  box-shadow: none;

  &:not(.callout-highlight):not(.callout-more) {
    .callout-title {
      display: flex;
      width: calc(100% + 1.389rem * 2 + 1.4rem); // padding + icon

      .icon {
        min-width: 24px;
      }

      .text {
        position: unset;
        width: auto;

        &:after {
          display: none;
        }
      }
      .text-line {
        position: relative;
        top: 1rem;
        width: 100%;
        min-width: 3rem;
        height: 2px;
        flex: 1;
        background-color: $color-border-secondary;
      }
    }
  }

  @each $color-name,
    $color-value
      in (
        success: $success,
        warning: $warning,
        danger: $danger,
        important: $success,
        note: $primary
      )
  {
    &:not(.callout-highlight):not(.callout-more).#{$color-name}
      .callout-title
      .text-line {
      background-color: $color-value;
    }
  }
}