/*
@include breakpoint(tablet) {
}
*/
:root {
  --list-margin-bottom: 15px; }

@media (max-width: 580px) {
  :root {
    --list-margin-bottom: 10px; } }

#editor [data-type="core/list"] ul,
#editor [data-type="core/list"] ol,
#wrapper .list-outer-wrapper .list-inner-wrapper ul,
#wrapper .list-outer-wrapper .list-inner-wrapper ol {
  max-width: var(--text-max-width);
  margin: var(--list-container-margin, 0 auto var(--p-margin-bottom) auto);
  padding: var(--list-container-padding, 0 0 0 8px);
  width: 100%; }
  #editor [data-type="core/list"] ul li,
  #editor [data-type="core/list"] ol li,
  #wrapper .list-outer-wrapper .list-inner-wrapper ul li,
  #wrapper .list-outer-wrapper .list-inner-wrapper ol li {
    margin-left: 20px;
    padding-left: var(--list-item-padding-left, var(--list-item-before-width, 10px));
    margin: 0 0 var(--list-margin-bottom) 0;
    list-style: none;
    position: relative;
    max-width: var(--list-item-max-width, var(--text-width)); }
    #editor [data-type="core/list"] ul li:before,
    #editor [data-type="core/list"] ol li:before,
    #wrapper .list-outer-wrapper .list-inner-wrapper ul li:before,
    #wrapper .list-outer-wrapper .list-inner-wrapper ol li:before {
      content: var(--list-item-before-content, "");
      font-family: var(--list-item-before-font-family, inherit);
      font-weight: var(--list-item-before-font-weight, 400);
      display: block;
      position: absolute;
      top: var(--list-item-top, 8px);
      left: 0;
      background-size: contain;
      background-repeat: no-repeat;
      width: var(--list-item-before-width, 8px);
      height: var(--list-item-before-height, 8px);
      border-radius: var(--list-item-border-radius, 50%);
      background: var(--list-item-before-background, var(--primary-color));
      background-position: top left; }
    #editor [data-type="core/list"] ul li,
    #editor [data-type="core/list"] ul li a,
    #editor [data-type="core/list"] ol li,
    #editor [data-type="core/list"] ol li a,
    #wrapper .list-outer-wrapper .list-inner-wrapper ul li,
    #wrapper .list-outer-wrapper .list-inner-wrapper ul li a,
    #wrapper .list-outer-wrapper .list-inner-wrapper ol li,
    #wrapper .list-outer-wrapper .list-inner-wrapper ol li a {
      max-width: var(--p-max-width, var(--text-max-width));
      width: 100%;
      font-family: var(--p-font-family, var(--primary-font));
      font-size: var(--p-font-size, 16px);
      color: var(--p-color, var(--text-color));
      line-height: var(--p-line-height, 1.4);
      font-weight: var(--p-font-weight, 400); }