inflation-explorer/atoms/default/client/css/_dcr_enhancer.scss

@import "mq";

.content__main-column--interactive {
    @include mq(leftCol) {
        margin-left: 160px;
    }
    
    @include mq(wide) {
        margin-left: 240px;
    }

    .element-atom { 
      max-width: 620px; // there is no element-inline class on interactive atoms so targeting element-atom as default for inline weighting instead

      @include mq($until: tablet) {
        max-width: 100%;
      }
    }

    .element-showcase {
      margin-left: 0px;

      @include mq(tablet) {
        max-width: 620px;
      }

      @include mq(leftCol) {
        max-width: 860px;
      }
    }

    .element-immersive {
      max-width: 1100px;
      @include mq($until: tablet) {
        width: calc( 100vw - var(--scrollbar-width));
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
        margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
      }
      @include mq(tablet) {
        transform: translateX(-20px);
        width: calc(100% + 60px);
      }
      @include mq($until: leftCol) {
        margin-left: 0;
        margin-right: 0;
      }
      @include mq(leftCol) {
        transform: translateX(0px);
        width: auto;
      }
      @include mq(wide) {
        max-width: 1260px;
      }
    }

    p {
        color: #121212;
        max-width: 620px;
    }

    &:before {
      position: absolute;
      top: 0px;
      height: calc(100% + 15px);
      min-height: 100px;
      content: "";
      @include mq(leftCol) {
        border-left:1px solid #dcdcdc;
        z-index: -1;
        left: -10px;
      }
  
      @include mq(wide) {
        border-left: 1px solid #dcdcdc;
        left: -11px;
      }
    }

  .element-atom { // this fixes the top/bottom margin gap with the left ruler
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 12px;
    padding-top: 12px;
  }

  p+.element-atom { // this sets the correct top margin if there is a p before the element-atom
      padding-top: 0;
      padding-bottom: 0;
      margin-top: 12px;
      margin-bottom: 12px;
  }

  .element-inline {
    max-width: 620px;
  }
}