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

@media (max-width: 580px) {
  :root {
    --list-margin-bottom: 10px;
    --list-margin-top: 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: var(--list-margin-top) 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);
}