.community-banner-wrapper {
  container: communityBanner / inline-size;
  padding-block: 100px 106px;
  position: relative;
  overflow: clip; /* used by morse code dots */
  header {
    padding-inline-end: 6.063rem;

    inline-size: calc(1272px + 2rem);
    margin-inline: auto;/* margin-block-end: 106px; */
    margin-block-end: 5.813rem;
    max-inline-size:100%;
    
    @container communityBanner (min-inline-size:calc(1272px + 2rem)){
      &:after {
          content: '';
          background: #3e5974;
          position: absolute;
          inset-inline-start: 0px;
          inline-size: 50%;
          block-size: 100px;
          z-index: 1;
      }
    }
    
    .community-banner__header-bar {
      border-start-end-radius: 100px;
      border-end-end-radius: 100px;
      inline-size: 953px;
      inline-size:fit-content;
      /* inline-size: 900px; <-- changed to 900px from IIRC 983px */
      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;
      padding-inline-start:2rem;
      max-inline-size:100%;
      position:relative;
      z-index: 2;
      text-wrap:pretty;
      @container communityBanner (max-inline-size:1271px + 2rem){
        padding-inline-start:2rem;
      }

      p {
        margin-block-end: 0;
      }
      & > div {
        padding-block: 10px;
        /* padding-inline-start:8%; */
      }
      /* @container communityBanner (min-inline-size:1900px){
        inline-size:66.4%;
        

      }
      @container communityBanner (min-inline-size:1900px){
        inline-size:66.4%;

      } */
    }
    @container communityBanner (max-inline-size:768px){
      padding-inline-end:0;

      .community-banner__header-bar{
        border-radius:0;
        background-color:transparent!important; {# temporary solution#}
      }
        
    }

    h2 {
      font-size: 2.75rem;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      margin-block-end: -4px;
    }
  }
  /* @container communityBanner (min-inline-size:1120px) {
    header {
      inline-size: 100%;
    }
  }
  @container communityBanner (min-inline-size:1360px) {
    header {
      padding-inline-end: 6.063rem;
    }
  } */
  .list-wrapper{
    inline-size: 1272px;
    inline-size: calc(1272px + 2rem);
    max-inline-size:100%;
    margin-inline: auto;
    margin-block-end:106px;
    padding-inline:2rem;
    --swiper-theme-color:var(--c-comet);
    .swiper-button-disabled{opacity:0;}
    button{
      appearance:none;
      background:transparent;
      border:0;
    }
    &:has(+.community-banner__cta){
      margin-block-end:50px;
    }
  }
  /* .community-items{
    gap:34px;
  } */
  .item-heading{
    font-size:1.25rem;
    margin-block-end: 0.813rem;
    
  }

  .community-banner__bg-dots {
    opacity: 0.2;
    position: absolute;
    z-index: -1;
     @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;
      }
    }
  }
  .community-banner__bg-dots--top {
    inset-block-start: 19px;
    z-index:0;
  }
  .community-banner__bg-dots--bottom {
    inset-block-end: 14px;
    animation-direction:reverse;
    
    inline-size: 71dvw;
    inset-inline-end: 0;
    z-index:0;
  }
  .community-banner__cta{
    text-align:center;
    inline-size: 1272px;
    inline-size: calc(1272px + 2rem);
    max-inline-size:100%;
    margin-block-end:40px;
    margin-inline:auto;
  }
}

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