.c-swiper-navigation {
display: none
}

    @media (min-width: 1024px) {.c-swiper-navigation {
position: absolute;
right: 1.5rem;
top: 50%;
z-index: 1;
display: grid;
height: 1.5rem;
width: 3.75rem;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 0.5rem;
gap: 0.5rem
}

        .c-swiper-navigation .swiper-button-prev, 
        .c-swiper-navigation .swiper-button-next {
position: static;
margin-top: 0px;
display: flex;
height: 1.5rem;
width: 1.5rem;
align-items: center;
justify-content: center;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(238 241 239 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity))
}

        .c-swiper-navigation .swiper-button-prev::after, 
        .c-swiper-navigation .swiper-button-next::after {
content: var(--tw-content);
display: none
}

            .c-swiper-navigation .swiper-button-prev svg,  .c-swiper-navigation .swiper-button-next svg {
stroke-width: 1.5
}

        .c-swiper-navigation .swiper-button-next {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

        .c-swiper-navigation .swiper-button-disabled {
background-color: transparent;
--tw-text-opacity: 1;
color: rgb(121 134 127 / var(--tw-text-opacity));
opacity: 1;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1;
--tw-ring-color: rgb(247 247 247 / var(--tw-ring-opacity))
}

            .c-swiper-navigation .swiper-button-disabled svg {
stroke-width: 1
}
    }

/** full screen on mobile & fixed size on desktop **/

.ig-stories {
position: absolute;
z-index: 111 !important;
height: 100vh;
width: 100vw;
    height: -webkit-fill-available
}

.story .slideWrapper {
display: flex;
align-items: center;
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}

.overlay .stories_wrapper .story video {
height: auto
}

@media (min-width: 768px) {
    .ig-stories {
position: fixed;
left: 0px;
height: 100%;
width: 100%
}
}

.overlay {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 3000;
background-color: rgb(0 0 0 / 0.8)
}

.overlay .stories_wrapper {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
height: 100%
}

.overlay .stories_wrapper .slide {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center
}

.overlay-close {
position: absolute;
top: 1rem;
right: 1.25rem;
z-index: 2;
cursor: pointer;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}

@media (min-width: 450px) {
    .overlay-close {
top: 0.625rem
}
}