.changelog-listing-wrapper {
  container: changelogListing / inline-size;
  padding-block: 100px 106px;
  position: relative;
  /* display: flex;
  flex-flow: row wrap; */
  overflow: clip; /* used by morse code dots */
  view-timeline-name: --changelogListing;
  header {
    @container changelogListing (min-inline-size:769px){
      padding-inline-end: 6.063rem;
    }
    inline-size: calc(1272px + 2rem);
    margin-inline: auto;/* margin-block-end: 106px; */
    @container changelogListing (min-inline-size:calc(1272px + 2rem)){
      &:after {
          content: '';
          background: #3e5974;
          position: absolute;
          inset-inline-start: 0px;
          inline-size: 22%;
          block-size: 100px;
          z-index: 1;
      }
    }
    @container changelogListing (min-inline-size:1500px) {
      &:after{
        inline-size:30%;
      }
    }
    @container changelogListing (min-inline-size:3000px) {
      &:after{
        inline-size:40%;
      }
    }
    @container changelogListing (min-inline-size:1260px) {
      flex: 445 0;
    }
    .changelog-listing__header-bar {
      @container changelogListing (min-inline-size:769px){
        border-start-end-radius: 100px;
        border-end-end-radius: 100px;
      }
      @container changelogListing (max-inline-size:768px){
        background-color:transparent!important;
      }
      inline-size: 412px;
      max-inline-size: 100%;
      block-size: fit-content;
      display: inline-flex;
      justify-content: flex-end;
      transition: padding ease-in 0.2s;
      padding-inline-end: 6.25rem;
      margin-block-end: 3.5rem;
      z-index: 2;
      position:relative;
      text-wrap:pretty;
      
      p {
        margin-block-end: 0;
      }
      & > div {
        padding-block: 10px;
      }
    }

    h2 {
      font-size: 2.75rem;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      margin-block-end: -4px;
    }
  }
  /* @container changelogListing (min-inline-size:1120px) {
    header {
      inline-size: 100%;
    }
  }
  @container changelogListing (min-inline-size:1360px) {
    header {
      padding-inline-end: 6.063rem;
    }
  } */

  .article-list-wrapper {
    /* padding-inline-start: 1.625rem; */
    
    /* padding-inline-end: 6.063rem; */
    
    
   

    @container changelogListing (min-inline-size:1260px) {
      margin-block-start:-150px;
      inline-size: calc(1272px + 2rem);
      max-inline-size:100%;
      margin-inline: auto;
      flex: 995 0;
      ul,.changelog-listing__button-wrapper {
        padding-inline-start: calc(412px + 6.25rem);
      }
   
    }
    ul {
      display: flex;
      flex-flow: column;
      gap: 40px;
      margin-block-end: 2.8rem;
      inline-size:730px;
      max-inline-size:100%;
      @container changelogListing (max-inline-size:1259px){
        margin:0 auto;
      }
      
    }
  }
  li.changelog-listing__blog-post {
    display: flex;
    flex-flow: column;
    & > * {
      flex: 1;
    }
    .changelog-listing_post-title {
      font-size: 1.25rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5625rem; /* 125% */
      margin-block-end: 10px;
      a{
        text-decoration: none;
      }
    }
    .changelog-listing__blog-post-summary {
      border-inline-start: 6px solid var(--c-lorax);
      padding-inline-start: 20px;
      padding: 0 12px;

      .blog-post-summary__inner-wrapper {
        inline-size: 600px;
        max-inline-size: 100%;
      }
      p {
        margin-block-end: 0;
      }
    }
    .changelog-listing__blog-post-dates {
      
      color: #fff;
      font-size: 0.75rem;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .changelog-listing__blog-post-dates--desktop {
      display: none;
      text-align: end;
      padding: 17px 12px;
      text-transform: uppercase;
    }

    @container changelogListing (min-inline-size:720px) {
      flex-flow: row;
      .changelog-listing__blog-post-summary {
        flex: 6 0 600px;
      }
      .changelog-listing__blog-post-dates {
        flex: 1 0 120px;
      }

      .changelog-listing__blog-post-dates--desktop {
        display: block;
      }
      .changelog-listing__blog-post-dates--mobile {
        display: none;
      }
    }
  }
  .changelog-listing__button-wrapper {
    margin-inline-start: 138px;
  
  }
  .changelog-listing__bg-dots {
    opacity: 0.2;
    position: absolute;
    z-index: 0;
     @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {
        animation: horizontalSlide linear both;
        animation-timeline: view();
        animation-range:entry exit;
      }
    } 
    svg{
      margin-block-end: .8rem;
      display:block;
      & + svg{
        margin-inline-start:13rem;
      }
      &:last-of-type{
        margin-block-end:0;
      }
    }
  }
  .changelog-listing__bg-dots--top {
    inset-block-start: 19px;
  }
  .changelog-listing__bg-dots--bottom {
    inset-block-end: 14px;
    animation-direction:reverse;
    
    inline-size: 71dvw;
    inset-inline-end: 0;
  }
}

@keyframes horizontalSlide {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(10%);
  }
}