.mb-root {

    display: grid;

    grid-template-columns: 1fr;

    grid-auto-rows: min-content;

    font-family: 'Poppins';



  .mb-swiper {

    overflow: hidden;

    position: relative;

    height: auto;

    width: 100%;



  .mb-banner {

    position: relative;

    overflow: hidden;

    border-radius: 0 !important;

    height: calc(100% - 1.25em);

    width: 100%;

    min-height: 320px;

    margin-bottom: 1.25em;

    background-size: cover;

    background-position: center;



    .mb-inner {

      display: flex;

      gap: 24px;

      padding: 0;

      height: 100%;

      align-items: center;

      z-index: 9999999;

      position: relative;

      flex-direction: row;

      flex-wrap: nowrap;



      .mb-left {

        display: flex;

        gap: 1em;

        margin: 0 auto 0 5%;

        min-width: calc(40% - 5%);

        flex-direction: column;

        flex-wrap: nowrap;

        z-index: 999;



        .mb-text {

          line-height: 1.05;

          font-weight: 700;

        }



        .mb-cta {

          display: inline-block;

          margin: 0.75em 0;

          border-radius: 8px;

          text-decoration: none;

          width: fit-content;

          min-width: 100px;

          text-align: center;

          font-weight: 500;

          font-family: 'Poppins';

          height: fit-content;

        }



        .mb-tags--list {

          display: flex;

          flex-direction: row;

          flex-wrap: wrap;

          gap: 1em;



          .mb-tag--item::before {

            content: '';

            width: 0.5rem;

            height: 0.5rem;

            top: 50%;

            right: 0px;

            display: block;

            position: relative;

            background: #faa65b;

            border-radius: 50%;

            transform: translateY(-50%);

          }



          .mb-tag--item {

            display: flex;

            flex-direction: row;

            flex-wrap: nowrap;

            gap: 0.5em;

          }

        }

      }



      .mb-right {

        width: 100%;

        height: 100%;

        align-content: center;

        z-index: -1;



        .mb-video {

          background: #ffffff32;

          backdrop-filter: blur(12px);

          object-fit: contain;

          position: relative;

          display: block;

          max-width: unset;

          max-height: unset;

          height: calc(100% - 4em);

          width: calc(100% - 4em);

          border-radius: 10px;

          z-index: 9;

          margin: 2em;

        }



        .mb-image {

          height: calc(100% - 4em);

          object-fit: cover;

          padding: 0;

          position: relative;

          border-radius: 10px;

          margin: 2em;

          width: calc(100% - 4em);

          display: flex;

          flex-direction: column;

          flex-wrap: nowrap;

          justify-content: center;

          object-position: right;

        }



        .mb-media-3d {

          margin: 2em;

          width: calc(100% - 4em);

          height: calc(100% - 4em);

        }

      }

    }

  }

}

}





.mb-swiper-pagination {

  bottom: 0px !important;



  .swiper-pagination-bullet-active {

    background: #f59a47;

  }

}





.mb-swiper-button-next.swiper-button-next, .mb-swiper-button-prev.swiper-button-prev {

  background: #ffffff21 !important;

  width: 50px !important;

  height: 50px !important;

  top: unset;

  bottom: 2em;

}



.mb-swiper-button-next.swiper-button-next:hover:after, .mb-swiper-button-prev.swiper-button-prev:hover:after {

    opacity: 1;

}



.mb-swiper-button-next.swiper-button-next:after, .mb-swiper-button-prev.swiper-button-prev:after {

    background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/sf-1/arrwa.svg) !important;

    background-size: cover !important;

    width: 40px !important;

    height: 40px !important;

    top: 5px !important;

    left: 7px !important;

    opacity: 0.5;

    transition: all 0.3s ease-in-out;

}



.mb-swiper-button-next.swiper-button-next {

  transform: rotate(0deg);

  opacity: 0;

}



.mb-swiper-button-prev.swiper-button-prev {

  transform: rotate(180deg);

  opacity: 0;

}



.mb-swiper:hover .mb-swiper-button-next, .mb-swiper:hover .mb-swiper-button-prev {

    opacity: 1 !important;

    transition: all 0.3s ease-in-out;

}



.mb-swiper-button-next.swiper-button-next:hover, .mb-swiper-button-prev.swiper-button-prev:hover {

    background: #ffffff52 !important;

}



.mb-swiper:hover .mb-swiper-button-next.swiper-button-disabled, .mb-swiper:hover .mb-swiper-button-prev.swiper-button-disabled {

    opacity: 0 !important;

}





/****/



.sf-home-hub {



  .ms-viewport {

    border-radius: 10px;

  }



  .ms-arrow.ms-arrow--left {

    left: 2em !important;

  }



  .ms-arrow.ms-arrow--right {

    right: 2em !important;

  }



  .ms-arrow, .ms-arrow:focus-visible, .ms-arrow:focus {

    width: 45px !important;

    height: 45px !important;

    transform: translateY(-85%) !important;

    background: #00000052 !important;

  }



  .ms-arrow::before {

    width: 25px !important;

    height: 25px !important;

    top: 10px !important;

    left: 10px !important;

  }

}



#main, #sf-posts {

  container-type: inline-size;

  container-name: main;

}



@container main (min-width: 1201px) {



  .mb-root {

    .mb-banner {

      aspect-ratio: 3 / 1 !important;



      .mb-left {



        .mb-text {

            font-size: 45px;

        }



        .mb-desc {

          font-size: 18px;

        }



        .mb-cta {

          font-size: 18px;

          padding: 12px 25px;

        }

      }

    }

  }

}



@container main (min-width: 701px) and (max-width: 1200px) {



  .mb-root {

    .mb-banner {

      aspect-ratio: 2 / 1 !important;



      .mb-left {



        .mb-text {

            font-size: 35px;

        }



        .mb-desc {

          font-size: 16px;

        }



        .mb-cta {

          font-size: 16px;

          padding: 10px 20px;

        }

      }

    }

  }

}





@container main (min-width: 701px) {

  .mb-media-3d {

     background: #ffffff21;

     backdrop-filter: blur(6px);

     border-radius: 10px;

  }

}





@container main (max-width: 700px) {



  .mb-left:has(.mb-text--primary) .mb-text--secondary {

    top: unset !important;

    bottom: 0;

    left: 0;

    right: 0;

    background: linear-gradient(180deg,  rgb(0 0 0 / 0%) 0%,  rgb(0 0 0 / 8%) 15%,  rgb(0 0 0 / 18%) 30%,  rgb(0 0 0 / 30%) 50%,  rgb(0 0 0 / 42%) 65%,  rgb(0 0 0 / 50%) 75%) !important;

  }



  .mb-left:has(.mb-text--secondary):has(.mb-text--primary) .mb-desc--main {

    display: none !important;

  }



  .mb-root {

      width: 100% !important;



    .mb-banner {

      aspect-ratio: 4 / 4 !important;



      .mb-inner {

        flex-direction: column !important;

        gap: unset !important;

        height: 100% !important;

        padding: 0 !important;



        .mb-left {

          margin: 0 !important;

          min-width: unset !important;

          width: 100%;

          height: 100%;

          gap: unset !important;

          text-align: center;



          .mb-text {

            font-size: 32px !important;

            padding: 0.5em;

            position: absolute;

          }



          .mb-text--primary, .mb-text--secondary {

            top: 0;

            left: 0;

            right: 0;

            background: linear-gradient(0deg,  rgb(0 0 0 / 0%) 0%,  rgb(0 0 0 / 8%) 15%,  rgb(0 0 0 / 18%) 30%,  rgb(0 0 0 / 30%) 50%,  rgb(0 0 0 / 42%) 65%,  rgb(0 0 0 / 50%) 75%);

          }



          .mb-desc--main {

            font-size: 14px !important;

            padding: 1em 0.5em;

            font-weight: 500;

            z-index: 99;

            position: absolute;

            bottom: 0;

            left: 0;

            right: 0;

            line-height: 1;

            background: linear-gradient(180deg,  rgb(0 0 0 / 0%) 0%,  rgb(0 0 0 / 8%) 15%,  rgb(0 0 0 / 18%) 30%,  rgb(0 0 0 / 30%) 50%,  rgb(0 0 0 / 42%) 65%,  rgb(0 0 0 / 50%) 75%) !important;

          }



          .mb-cta {

            background: transparent !important;

            font-size: 0 !important;

            z-index: 99;

            position: absolute;

            bottom: 0;

            left: 0;

            right: 0;

            top: 0;

            width: 100% !important;

            height: 100% !important;

          }



          .mb-tags--list {

            display: none !important;

          }

        }



        .mb-right {

          position: absolute;



          .mb-image {

            height: 100% !important;

            object-fit: contain !important;

            border-radius: 0 !important;

            margin: 0 !important;

            width: 100% !important;

            object-position: center !important;

          }



          .mb-video {

            backdrop-filter: unset !important;

            background: transparent !important;

            height: 100% !important;

            width: 100% !important;

            border-radius: 0 !important;

            padding: 0 !important;

            margin: 0 !important;

          }



          .mb-media-3d {

            width: calc(100% - 8em) !important;

            margin: 4em !important;

            height: calc(100% - 8em) !important;

          }

        }

      }

    }

  }

}





@media (max-width: 900px) {

  .sf-filter-block {

    display: none !important;

  }



  .logo--story-active::before {

      content: '';

      background-image: url(https://starkframe.store/wp-content/plugins/sf-posts/assets/images/insta_act_ring.svg);

      background-position: center;

      background-size: 45px !important;

      background-repeat: no-repeat;

      height: 45px !important;

      width: 45px !important;

  }



  .sf-home-hub{

    .ms-arrow {

      display: none !important;

    }

  }



  .mb-swiper-button-next.swiper-button-next, .mb-swiper-button-prev.swiper-button-prev {

  display: none;

  }

}