/*!
 * Lights of Peace Articles: block styles (Card, Soft box, Highlight box, Warm callout,
 * Feature panel, Try this box, Checklist, Small label, Step number, Large serif text, button).
 * Used in articles and in the block editor.
 */
:is(#lopa-article, .editor-styles-wrapper) {
  --lopa-b-fg: #082624;
  --lopa-b-muted: #4b6265;
  --lopa-b-primary: #007165;
  --lopa-b-primary-fg: #f8fdfc;
  --lopa-b-border: #cedfdc;
  --lopa-b-soft: #e8f8f3;
  --lopa-b-highlight: #d1f3f6;
  --lopa-b-accent: #c8ebd8;
  --lopa-b-accent-fg: #004031;
  --lopa-b-callout: #f8efde;
  --lopa-b-callout-fg: #3c311e;
  --lopa-b-callout-border: #d9c194;
  --lopa-b-display: "LOP DM Serif Display", "DM Serif Display", Georgia, serif;
  --lopa-b-sans: "LOP Manrope", "Manrope", system-ui, sans-serif;
}

/* ------------------------------------------------------------ boxes */
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-card, .is-style-lopa-soft, .is-style-lopa-highlight, .is-style-lopa-callout, .is-style-lopa-feature, .is-style-lopa-try) {
  box-sizing: border-box;
  padding: 24px;
  font-family: var(--lopa-b-sans);
  font-size: 16px;
  line-height: 28px;
  color: var(--lopa-b-muted);
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-card, .is-style-lopa-soft, .is-style-lopa-highlight, .is-style-lopa-callout, .is-style-lopa-feature, .is-style-lopa-try) > * {
  margin-top: 0;
  margin-bottom: 0;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-card, .is-style-lopa-soft, .is-style-lopa-highlight, .is-style-lopa-callout, .is-style-lopa-feature, .is-style-lopa-try) > * + * {
  margin-top: 16px;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group > p.is-style-lopa-eyebrow + * {
  margin-top: 8px;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group > p.is-style-lopa-number + * {
  margin-top: 16px;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group > .wp-block-buttons {
  margin-top: 24px;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-card, .is-style-lopa-soft, .is-style-lopa-highlight, .is-style-lopa-callout, .is-style-lopa-feature, .is-style-lopa-try) :is(h2, h3, h4) {
  margin: 0;
  padding: 0;
  font-family: var(--lopa-b-display);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lopa-b-fg);
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-card, .is-style-lopa-soft, .is-style-lopa-highlight, .is-style-lopa-callout, .is-style-lopa-feature, .is-style-lopa-try) h2 {
  font-size: 30px;
  line-height: 1.25;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-card, .is-style-lopa-soft, .is-style-lopa-highlight, .is-style-lopa-callout, .is-style-lopa-feature, .is-style-lopa-try) h3 {
  font-size: 20px;
  line-height: 28px;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-card, .is-style-lopa-soft, .is-style-lopa-highlight, .is-style-lopa-callout, .is-style-lopa-feature, .is-style-lopa-try) p:not([class*="is-style-lopa-"]) {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-card {
  border: 1px solid var(--lopa-b-border);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(8, 38, 36, 0.06);
  font-size: 14px;
  line-height: 24px;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-soft {
  border: 1px solid var(--lopa-b-border);
  border-radius: 26px;
  background: var(--lopa-b-soft);
  box-shadow: 0 8px 24px rgba(8, 38, 36, 0.06);
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-highlight {
  border-radius: 26px;
  background: var(--lopa-b-highlight);
  color: #3f5a5e;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-callout {
  border: 1px solid var(--lopa-b-callout-border);
  border-radius: 26px;
  background: var(--lopa-b-callout);
  color: var(--lopa-b-callout-fg);
  font-size: 18px;
  line-height: 32px;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-feature {
  border-radius: 26px;
  background: var(--lopa-b-primary);
  color: rgba(248, 253, 252, 0.9);
  box-shadow: 0 20px 50px rgba(8, 38, 36, 0.1);
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-feature :is(h2, h3, h4, strong, b) {
  color: var(--lopa-b-primary-fg);
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-feature a {
  color: var(--lopa-b-primary-fg);
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-feature .is-style-lopa-eyebrow {
  color: rgba(248, 253, 252, 0.9);
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-try {
  border-radius: 20px;
  background: var(--lopa-b-accent);
  color: var(--lopa-b-accent-fg);
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-try .is-style-lopa-eyebrow {
  color: var(--lopa-b-accent-fg);
  letter-spacing: 0.14em;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-try :is(h2, h3, h4) {
  color: var(--lopa-b-accent-fg);
}

/* the small note inside the dark panel, with a shield icon */
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-note {
  box-sizing: border-box;
  border-radius: 20px;
  background: rgba(248, 253, 252, 0.1);
  padding: 20px;
  font-family: var(--lopa-b-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: var(--lopa-b-primary-fg);
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-note::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-note > * {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-feature .wp-block-columns {
  gap: 32px;
  margin-bottom: 0;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-group.is-style-lopa-feature .wp-block-column > * + * {
  margin-top: 16px;
}

/* ------------------------------------------------------------ checklists */
:is(#lopa-article, .editor-styles-wrapper) :is(ul, ol).wp-block-list:is(.is-style-lopa-checks, .is-style-lopa-checks-two) {
  display: grid;
  gap: 16px 32px;
  margin-left: 0;
  padding: 0;
  list-style: none;
}
:is(#lopa-article, .editor-styles-wrapper) :is(ul, ol).wp-block-list:is(.is-style-lopa-checks, .is-style-lopa-checks-two) > li {
  position: relative;
  margin: 0;
  padding: 0 0 0 28px;
  list-style: none;
  font-family: var(--lopa-b-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--lopa-b-fg);
}
:is(#lopa-article, .editor-styles-wrapper) :is(ul, ol).wp-block-list:is(.is-style-lopa-checks, .is-style-lopa-checks-two) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: var(--lopa-b-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#lopa-article, .editor-styles-wrapper) :is(ul, ol).wp-block-list:is(.is-style-lopa-checks, .is-style-lopa-checks-two) > li + li {
  margin-top: 0;
}
@media (min-width: 640px) {
  :is(#lopa-article, .editor-styles-wrapper) :is(ul, ol).wp-block-list.is-style-lopa-checks-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------ text */
:is(#lopa-article, .editor-styles-wrapper) p:is(.is-style-lopa-eyebrow, .is-style-lopa-number, .is-style-lopa-large) {
  padding: 0;
}
:is(#lopa-article, .editor-styles-wrapper) p.is-style-lopa-eyebrow {
  font-family: var(--lopa-b-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lopa-b-primary);
}
:is(#lopa-article, .editor-styles-wrapper) p.is-style-lopa-number {
  font-family: var(--lopa-b-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #4f9a91; /* the template's half-strength teal, made solid so it stays readable (3.3:1) */
}
:is(#lopa-article, .editor-styles-wrapper) p.is-style-lopa-large {
  font-family: var(--lopa-b-display);
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
}

/* ------------------------------------------------------------ button */
:is(#lopa-article, .editor-styles-wrapper) .wp-block-button.is-style-lopa-pill .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px !important;
  background: var(--lopa-b-primary);
  color: var(--lopa-b-primary-fg);
  font-family: var(--lopa-b-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
  transition: opacity 0.2s ease;
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-button.is-style-lopa-pill .wp-block-button__link:hover {
  opacity: 0.9;
  color: var(--lopa-b-primary-fg);
}
:is(#lopa-article, .editor-styles-wrapper) .wp-block-button.is-style-lopa-pill .wp-block-button__link::after {
  content: "\2192";
  font-weight: 700;
}

@media (min-width: 768px) {
  :is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-highlight, .is-style-lopa-callout, .is-style-lopa-feature) {
    padding: 40px;
  }
  :is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-soft) {
    padding: 36px;
  }
  :is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-try) {
    padding: 32px;
  }
  :is(#lopa-article, .editor-styles-wrapper) .wp-block-group:is(.is-style-lopa-card, .is-style-lopa-soft, .is-style-lopa-highlight, .is-style-lopa-callout, .is-style-lopa-feature, .is-style-lopa-try) h2 {
    font-size: 36px;
  }
}

/* =====================================================================
 * The Lights of Peace box block (lop/box). ":is(#lopa-article, body)" gives these rules the
 * same weight in articles, in the editor and on any other page that uses a box.
 * ===================================================================== */
:is(#lopa-article, body) .lopa-box {
  --box-bg: #e8f8f3;
  --box-text: #4b6265;
  --box-heading: #082624;
  --box-label: #007165;
  --box-link: #007165;
  --box-icon-bg: #007165;
  --box-icon-fg: #f8fdfc;
  --box-border: #cedfdc;
  --box-radius: 26px;
  --box-shadow: 0 8px 24px rgba(8, 38, 36, 0.06);
  --box-pad: 24px;
  --box-pad-wide: 36px;
  --box-note-bg: rgba(0, 113, 101, 0.08);
  --box-dot: #007165;
  --box-size: 17px;
  --box-line: 28px;
  box-sizing: border-box;
  display: grid;
  gap: 32px;
  margin: 0;
  padding: var(--box-pad);
  border: 1px solid var(--box-border);
  border-radius: var(--box-radius);
  background: var(--box-bg);
  box-shadow: var(--box-shadow);
  color: var(--box-text);
  font-family: var(--lopa-b-sans, "LOP Manrope", system-ui, sans-serif);
  font-size: var(--box-size);
  line-height: var(--box-line);
  text-align: left;
  letter-spacing: 0;
}
body:not(:has(#lopa-article)) .lopa-box {
  margin-top: 32px;
  margin-bottom: 32px;
}
/* In the editor, a box sits in the same centred column as the text around it. */
:is(#lopa-article, body).editor-styles-wrapper .lopa-box.wp-block,
:is(#lopa-article, body) .editor-styles-wrapper .lopa-box.wp-block {
  margin-left: auto;
  margin-right: auto;
}
:is(#lopa-article, body) .lopa-box *,
:is(#lopa-article, body) .lopa-box *::before {
  box-sizing: border-box;
}

/* colours (from the template) */
:is(#lopa-article, body) .lopa-box.lopa-box--white {
  --box-bg: #ffffff;
  --box-radius: 20px;
  --box-pad-wide: 24px;
  --box-icon-bg: #c8ebd8;
  --box-icon-fg: #004031;
  --box-size: 15px;
  --box-line: 26px;
}
:is(#lopa-article, body) .lopa-box.lopa-box--mint {
  --box-bg: #c8ebd8;
  --box-text: #004031;
  --box-heading: #004031;
  --box-label: #004031;
  --box-link: #004031;
  --box-icon-bg: transparent;
  --box-icon-fg: #004031;
  --box-border: transparent;
  --box-radius: 20px;
  --box-shadow: none;
  --box-pad-wide: 32px;
  --box-note-bg: rgba(0, 64, 49, 0.08);
  --box-dot: #004031;
}
:is(#lopa-article, body) .lopa-box.lopa-box--blue {
  --box-bg: #d1f3f6;
  --box-text: #3f5a5e;
  --box-border: transparent;
  --box-shadow: none;
  --box-pad-wide: 40px;
}
:is(#lopa-article, body) .lopa-box.lopa-box--sand {
  --box-bg: #f8efde;
  --box-text: #3c311e;
  --box-border: #d9c194;
  --box-shadow: none;
  --box-pad-wide: 40px;
  --box-size: 18px;
  --box-line: 30px;
  --box-note-bg: rgba(60, 49, 30, 0.07);
}
:is(#lopa-article, body) .lopa-box.lopa-box--dark {
  --box-bg: #007165;
  --box-text: rgba(248, 253, 252, 0.9);
  --box-heading: #f8fdfc;
  --box-label: rgba(248, 253, 252, 0.9);
  --box-link: #f8fdfc;
  --box-icon-bg: rgba(248, 253, 252, 0.12);
  --box-icon-fg: #f8fdfc;
  --box-border: transparent;
  --box-shadow: 0 20px 50px rgba(8, 38, 36, 0.1);
  --box-pad-wide: 40px;
  --box-note-bg: rgba(248, 253, 252, 0.1);
  --box-dot: #c8ebd8;
  --box-size: 16px;
}
:is(#lopa-article, body) .lopa-box.lopa-box--grey {
  --box-bg: #e9f2f0;
  --box-radius: 20px;
  --box-shadow: none;
  --box-pad-wide: 28px;
  --box-icon-bg: #c8ebd8;
  --box-icon-fg: #004031;
  --box-size: 16px;
}

/* parts */
:is(#lopa-article, body) .lopa-box .lopa-box-main {
  display: block;
  min-width: 0;
}
:is(#lopa-article, body) .lopa-box.lopa-box--icon-left .lopa-box-main {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
:is(#lopa-article, body) .lopa-box .lopa-box-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--box-icon-bg);
  color: var(--box-icon-fg);
}
:is(#lopa-article, body) .lopa-box.lopa-box--mint .lopa-box-icon {
  width: 28px;
  height: 32px;
}
:is(#lopa-article, body) .lopa-box.lopa-box--icon-top .lopa-box-icon {
  margin-bottom: 20px;
}
:is(#lopa-article, body) .lopa-box .lopa-box-icon svg {
  width: 22px;
  height: 22px;
}
:is(#lopa-article, body) .lopa-box .lopa-box-body {
  flex: 1;
  min-width: 0;
}
:is(#lopa-article, body) .lopa-box .lopa-box-label {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--lopa-b-sans, "LOP Manrope", system-ui, sans-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--box-label);
}
:is(#lopa-article, body) .lopa-box .lopa-box-content > * {
  margin-top: 0;
  margin-bottom: 0;
}
:is(#lopa-article, body) .lopa-box .lopa-box-content > * + * {
  margin-top: 16px;
}
:is(#lopa-article, body) .lopa-box .lopa-box-content :is(h1, h2, h3, h4, h5, h6) {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  font-family: var(--lopa-b-display, "LOP DM Serif Display", Georgia, serif);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--box-heading);
}
:is(#lopa-article, body) .lopa-box .lopa-box-content :is(h1, h2) {
  font-size: 30px;
  line-height: 1.25;
}
:is(#lopa-article, body) .lopa-box .lopa-box-content h3 {
  font-size: 22px;
  line-height: 30px;
}
:is(#lopa-article, body) .lopa-box.lopa-box--white .lopa-box-content h3 {
  font-size: 20px;
  line-height: 28px;
}
:is(#lopa-article, body) .lopa-box .lopa-box-content :is(h4, h5, h6) {
  font-size: 19px;
  line-height: 28px;
}
:is(#lopa-article, body) .lopa-box .lopa-box-content > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 10px;
}
:is(#lopa-article, body) .lopa-box .lopa-box-content > h2 + * {
  margin-top: 16px;
}
:is(#lopa-article, body) .lopa-box .lopa-box-content p {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
:is(#lopa-article, body) .lopa-box .lopa-box-content li {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
:is(#lopa-article, body) .lopa-box .lopa-box-content :is(strong, b) {
  font-family: inherit;
  color: var(--box-heading);
}
:is(#lopa-article, body) .lopa-box .lopa-box-content a:not(.wp-block-button__link) {
  color: var(--box-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
:is(#lopa-article, body) .lopa-box .lopa-box-content ul > li::before {
  background: var(--box-dot);
}
:is(#lopa-article, body) .lopa-box .lopa-box-content ol > li::before {
  color: var(--box-dot);
}
:is(#lopa-article, body) .lopa-box .lopa-box-content ul.wp-block-list:is(.is-style-lopa-checks, .is-style-lopa-checks-two) > li {
  color: var(--box-heading);
}
:is(#lopa-article, body) .lopa-box .lopa-box-content ul.wp-block-list:is(.is-style-lopa-checks, .is-style-lopa-checks-two) > li::before {
  background: var(--box-dot);
}
:is(#lopa-article, body) .lopa-box .lopa-box-content .wp-block-button.is-style-lopa-pill .wp-block-button__link {
  background: var(--box-link);
  color: var(--box-bg);
}
:is(#lopa-article, body) .lopa-box.lopa-box--dark .lopa-box-content .wp-block-button.is-style-lopa-pill .wp-block-button__link {
  background: #f8fdfc;
  color: #007165;
}

/* centred (like the template's "Quick takeaway") */
:is(#lopa-article, body) .lopa-box.lopa-box--center {
  text-align: center;
}
:is(#lopa-article, body) .lopa-box.lopa-box--center .lopa-box-main {
  display: block;
}
:is(#lopa-article, body) .lopa-box.lopa-box--center .lopa-box-icon {
  margin: 0 auto 20px;
}
:is(#lopa-article, body) .lopa-box.lopa-box--center .lopa-box-content > * {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
:is(#lopa-article, body) .lopa-box.lopa-box--center .lopa-box-content > :is(ul, ol) {
  display: inline-block;
  text-align: left;
}
:is(#lopa-article, body) .lopa-box.lopa-box--center .wp-block-buttons {
  justify-content: center;
}

/* side note with a shield (like the template's dark green box) */
:is(#lopa-article, body) .lopa-box .lopa-box-aside {
  display: flex;
  align-items: flex-end;
}
:is(#lopa-article, body) .lopa-box .lopa-box-note {
  width: 100%;
  border-radius: 20px;
  background: var(--box-note-bg);
  padding: 20px;
  color: var(--box-heading);
}
:is(#lopa-article, body) .lopa-box .lopa-box-note svg {
  display: block;
  width: 28px;
  height: 28px;
  color: inherit;
}
:is(#lopa-article, body) .lopa-box .lopa-box-note p {
  margin: 12px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  color: inherit;
  text-align: left;
}

@media (min-width: 768px) {
  :is(#lopa-article, body) .lopa-box {
    padding: var(--box-pad-wide);
  }
  :is(#lopa-article, body) .lopa-box .lopa-box-content :is(h1, h2) {
    font-size: 36px;
  }
  :is(#lopa-article, body) .lopa-box.lopa-box--with-note {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
}