.sf-main-page {

    display: grid;

    gap: 1em;

}



.ms-viewport {

   .sf-hub-tabs {

       display: flex !important;

   }

}



.sf-hub-tabs {

    display: none;

    margin: 0;

    width: fit-content !important;

    flex-direction: row;

    list-style-type: none;

    padding: 0;

    gap: 0em;

    flex-wrap: nowrap;



    .sf-menu-icon {

        position: relative;

    }

}





.sf-tab[data-target="sf-home-stories-root"] .sf-tab__icon::after {

    content: '';

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

    background-position: center;

    background-size: 8em;

    background-repeat: no-repeat;

    cursor: pointer;

    height: 8em;

    width: 8em;

    top: 0;

    left: 0;

    display: block;

    box-sizing: border-box;

    position: absolute;

}



.sf-tab .menu-link {

    display: flex;

    align-items: center;

    border-radius: 10px;

    cursor: grab;

    user-select: none;

    height: auto;

    overflow: clip;

    flex-direction: column;

    flex-wrap: nowrap;

}



.sf-tab.is-active span:not(.sf-menu-icon) {

    color: #ffa452;

}



.sf-tab img {

  display: inline !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

}



.sf-hub-more{

  margin: 16px 1em 10px;

  display:flex;

  justify-content:center;

}



.sf-more-btn{

  background: #dedced !important;

  padding: 0 1.5em;

  border-radius: 8px;

  color: #3f3c5a;

  font-weight: 600;

  font-size: 13px;

  font-family: 'Poppins';

  height: 36px;

  cursor: pointer;

}



/* Skeleton */

.sf-skeleton{

  border-radius:16px;

  height: 220px;

  margin: 10px 0;

  background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.10) 37%, rgba(0,0,0,.06) 63%);

  background-size: 400% 100%;

  animation: sf-skel 1.2s ease-in-out infinite;

}



@keyframes sf-skel{

  0%{ background-position: 100% 0; }

  100%{ background-position: 0 0; }

}



    .sf-home-hub {

       position: relative;

       width: 100%;

       display: flex;

       flex-direction: column;

       flex-wrap: nowrap;

    }





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



    .sf-hub-tabs li.sf-tab:first-child .menu-link {

        margin-left: 2em;

    }



    .sf-hub-tabs li.sf-tab:last-child .menu-link {

        margin-right: 2em;

    }



    .sf-tab:hover img {

        transition: 0.7s, transform 0.7s;

        transform: translate(0px, 0px) scale(0.75);

    }



    .sf-tab:hover .sf-menu-icon::after {

        transition: 0.7s, transform 0.7s;

        transform: translate(0px, 0px) scale(0.75);

    }



    .sf-tab:hover span:not(.sf-menu-icon) {

        color: #ffa452;

        transition: ease 0.2s;

    }



    .sf-tab .menu-link {

        gap: 4px;

        margin: 0;

        transform: scale(1);

        transition: 0.7s, transform 0.7s;

        padding: 0.75em;

    }



    .sf-tab[data-target="sf-home-stories-root"] .sf-tab__icon::after {

        content: '';

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

        background-position: center;

        background-size: 8.5em;

        background-repeat: no-repeat;

        cursor: pointer;

        height: 9em;

        width: 9em;

        top: 0;

        left: 0;

        display: block;

        box-sizing: border-box;

        position: absolute;

    }



.sf-tab.is-active .sf-menu-icon::after, .sf-tab:hover .sf-menu-icon::after {

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

    background-position: center;

    background-size: 8.5em;

    background-repeat: no-repeat;

}



    .sf-tab .sf-menu-icon::after {

        content: '';

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

        background-position: center;

        background-size: 8.5em;

        background-repeat: no-repeat;

        cursor: pointer;

        height: 9em;

        width: 9em;

        top: 0;

        left: 0;

        display: block;

        box-sizing: border-box;

        position: absolute;

    }



    .sf-tab .sf-menu-icon {

        padding: 1em;

    }



    .sf-tab .sf-menu-icon img {

        height: 7em;

        width: 7em;

        background: #ebeaf2;

        border-radius: 50%;

    }



    .sf-tab span:not(.sf-menu-icon) {

        font-family: 'Poppins';

        font-size: 16px;

        font-weight: 700;

        color: #4a5464f2;

    }

}



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



    .sf-hub-tabs li.sf-tab:first-child .menu-link {

        margin-left: 1em;

    }



    .sf-hub-tabs li.sf-tab:last-child .menu-link {

        margin-right: 1em;

    }



    .sf-more-btn {

        width: 100%;

    }



    .sf-tab .menu-link{

        gap: 4px;

        margin: 0.5em;

    }



    .sf-tab .sf-menu-icon {

        padding: 0.6em;

    }



    .sf-tab .sf-menu-icon::after {

        content: '';

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

        background-position: center;

        background-size: 6.2em;

        background-repeat: no-repeat;

        cursor: pointer;

        height: 6.2em;

        width: 6.2em;

        top: 0;

        left: 0;

        display: block;

        box-sizing: border-box;

        position: absolute;

    }



.sf-tab.is-active .sf-menu-icon::after {

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

    background-position: center;

    background-size: 6.2em;

    background-repeat: no-repeat;

}



    .sf-tab[data-target="sf-home-stories-root"] .sf-menu-icon::after {

        content: '';

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

        background-position: center;

        background-size: 6.2em;

        background-repeat: no-repeat;

        cursor: pointer;

        height: 6.2em;

        width: 6.2em;

        top: 0;

        left: 0;

        display: block;

        box-sizing: border-box;

        position: absolute;

    }



    .sf-tab .sf-menu-icon img {

        height: 5em;

        width: 5em;

        background: #ebeaf2;

        border-radius: 50%;

    }



    .sf-tab span:not(.sf-menu-icon) {

        font-family: 'Poppins';

        font-size: 13px;

        font-weight: 400;

        color: #4a5464f2;

    }

}