:root {
    --module-margin-100: max(60px, calc(100 * var(--px)));
    --module-margin-40: max(30px, calc(40 * var(--px)));
  }
  
  .module.mrgn-100 {
    margin-bottom: var(--module-margin-100);
  }
  
  .module.mrgn-40 {
    margin-bottom: var(--module-margin-40);
  }
  
  .module.mrgn-0-if-last:last-child {
    margin-bottom: 0;
  }
  
  
  
  
  
  
  
  
  .module-blog-col-set.has-aside .module-inner {
    display: flex;
    flex-flow: row nowrap;
    gap: 0 calc(150 * var(--px));
  }
  
  .module-blog-col-set.has-aside .module-inner .blog-aside {
    width: calc(366 * var(--px));
    flex-shrink: 0;
  }
  
  .module-blog-col-set.has-aside .module-inner .blog-main {
    width: 100%;
  }
  
  .module-blog-col-set .sections-list {
    position: sticky;
    top: calc(var(--header-height) + 5em);
    display: flex;
    flex-flow: column nowrap;
    gap: 1.25em 0;
  }
  
  .module-blog-col-set .sections-list div[data-max-height] {
    max-height: 0px;
    overflow: hidden;
    overflow: clip;
    opacity: 0;
    interactivity: inert;
    transform: translateY(-20px);
    transition: 500ms var(--ttf-4);
    transition-property: max-height, opacity, transform;
  }
  
  .module-blog-col-set .sections-list > li:has(a.current) div[data-max-height],
  .module-blog-col-set .sections-list div[data-max-height]:has(a.current) {
    max-height: var(--max-height, 2000px);
    opacity: 1;
    transform: none;
    interactivity: auto;
    overflow: visible;
  }
  
  .module-blog-col-set .sections-list ul {
    display: flex;
    flex-flow: column nowrap;
    gap: 1.25em 0;
    list-style: decimal;
    padding-block: 1.25em 1.5em;
    padding-left: 2em;
  }
  
  .module-blog-col-set .sections-list li {
    position: relative;
  }
  
  .module-blog-col-set .sections-list a {
    position: relative;
    display: block;
    padding-right: 2.5em;
  }
  
  .module-blog-col-set .sections-list a.current {
    font-family: var(--base-font-1-semibold);
  }
  
  .module-blog-col-set .sections-list a.current::before {
    content: '';
    display: block;
    position: absolute;
    inset: -0.75em -1em;
    right: 0;
    background: #f9f7f1;
    border-radius: 16px;
    z-index: -1;
  }
  
  .module-blog-col-set .sections-list ul a.current::before {
    left: -2em;
  }
  
  .module-blog-col-set .sections-list span[aria-hidden] {
    position: absolute;
    right: 1em;
    top: 0;
  }
  
  .btn-sidebar-nav {
    display: none;
  }
  
  .btn-close-sidebar-nav {
    display: none;
  }
  
  
  @media (max-width: 1000px) {
    
    .module-blog-col-set.has-aside .module-inner {
      gap: 0 var(--page-padding-left);
    }
    
  }
  
  
  @media (max-width: 750px) {
    
    .module-blog-col-set.has-aside .module-inner .blog-aside {
      position: fixed;
      left: 0;
      top: 50%;
      z-index: 1050;
      width: auto;
      transform: translate(-100%, -50%);
      transition: transform 750ms var(--ttf-4);
    }
    
    body.menu .module-blog-col-set.has-aside .module-inner .blog-aside {
      z-index: 50;
    }
    
    .module-blog-col-set.has-aside .module-inner .btn-sidebar-nav {
      content: '';
      display: block;
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 19;
      width: 19px;
      height: 60px;
      background: url(../../imgs/sidebar-handle.svg) no-repeat center center;
      background-size: contain;
    }
    
    .module-blog-col-set .sections-list {
      position: relative;
      top: auto;
      width: 300px;
      interactivity: inert;
      background: var(--base-color-white);
      border-radius: 0 9px 9px 0;
      box-sizing: border-box;
      padding: calc(var(--page-padding-left) * 2) var(--page-padding-left);
    }
    
    body.show-sidebar-nav .module-blog-col-set.has-aside .module-inner .blog-aside {
      transform: translate(0%, -50%);
    } 
    
    body.show-sidebar-nav .module-blog-col-set .sections-list {
      interactivity: auto;
    }
    
    body::before {
      content: '';
      display: block;
      position: fixed;
      inset: 0;
      background: var(--base-color-black);
      opacity: 0;
      z-index: 1049;
      pointer-events: none;
      transition: opacity 750ms var(--ttf-4);
    }
    
    body.show-sidebar-nav::before {
      opacity: 0.33;
      pointer-events: all;
    }
    
    .btn-sidebar-nav {
      display: block;
    }
    
    .btn-close-sidebar-nav {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      display: block;
    }
    
    .btn-close-sidebar-nav svg {
      display: block;
      height: auto;
      width: 16px;
    }
    
  }