:root {
  --mobile-breakpoint: 480px;
  --phablet-breakpoint: 580px;
  --tablet-breakpoint: 768px;
  --desktop-breakpoint: 1024px;
  --desktop-wide-breakpoint: 1280px;
  --full-hd-breakpoint: 1920px;
  --primary-font: 'Fira Sans';
  --font-awesome-font-family: 'Font Awesome 6 Pro';
  --secondary-font: var(--primary-font);
  --text-max-width: 768px;
  --content-width: 100%;
  --content-max-width: 1280px;
  --global-padding: 20px;
  --grid-gutter: 15px;
  --white: #fff;
  --black: #000;
  --grey-light: rgba(8, 60, 44, .05);
  --grey-dark: #777;
  --text-color: #222;
  --primary-color: #b0b0b0;
  --primary-color-light: var(--primary-color);
  --primary-dark: var(--primary-color);
  --secondary-color: #4d4d4d;
  --secondary-dark: var(--secondary-color);
  --transition-duration: .3s;
  --fa-style-family: 'Font Awesome 6 Pro';
  --columns-phablet-breakpoint: 1024px;
  --columns-mobile-breakpoint: 768px; }

/*
@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: 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: '';
      display: block;
      position: absolute;
      top: var(--list-item-top, 8px);
      right: 100%;
      background-size: contain;
      background-repeat: no-repeat;
      width: var(--list-item-width, 8px);
      height: var(--list-item-height, 8px);
      border-radius: var(--list-item-border-radius, 50%);
      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); }
