.main-circle__right,
.main-circle__left{
    position: relative;
    height:min(161.8vw,90vh);
    width: 100%;
    clip-path: circle(calc(min(161.8vw,90vh)/2) at 50% 50%);
    background-color: #000;
    margin-top: 4.236em
}

.main-circle__left::after{
    content:'';
    display: block;
    width: min(161.8vw,90vh);
    height: min(161.8vw,90vh);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
/*    background-color: #000;*/
    
}
        
.slideshow,.slide-container,.slide-container *{
    height:100%;
    width: 100%;
}
        
.slideshow{
    position: relative;
    clip-path: circle(calc(min(161.8vw,90vh)/2 - .382em) at 50% 50%);
}
        
.slide-container{
    padding: 0;
    display: flex;
    overflow-x: auto;
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory}

.slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always}
        
.slide img{
    object-fit: cover;
    display: block}

/*DELAY LOADING SLIDESHOW IMAGES UNTIL THE SLIDESHOW IS IN THE VIEWPORT*/
.slide-container.io .slide:not(:first-of-type) img{
    display: none
}

.slide-container.visible .slide:not(:first-of-type) img{
    display: block
}
/*---------*/
        
/*ARROWS*/
.slideshow button {
    position:absolute;
    top:calc((100% - max(2.618rem,5vw))/2);
    width:max(2.618rem,5vw);
    height: max(2.618rem,5vw);
    margin-inline:max(.618rem,1vw);
    border: none;
    border-radius: 50%;
    font-family:roboto,system-ui;
    font-family: 'material symbols outlined';
    font-size:max(1.618rem,3vw);
    line-height: 1;
    font-weight: 400;
    text-align: center;
    color: inherit;
    color: #fff;
    cursor: pointer;
    background-color: #00a651;
    transition: all .5s .2s cubic-bezier(.32,1.09,.44,3);
    opacity: 0;
    transform: scale(.75);
    border: 2px solid #000;
}

.material-symbols-outlined {
    font-size:max(1.618rem,3vw);
    line-height: .8;
}

.slideshow button.prev{left:0}
.slideshow button.next{right:0}
   
.country{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    display: block;
    width: 100%;
    height: auto;
    line-height: 2.618;
    text-align: center;
    color: #fff;
    background:linear-gradient(to bottom,rgba(0,0,0,1)0%,rgba(0,0,0,0)100%);
    }

.slideshow:has( button.visible) .country,
.slide-container:not(:has(div:last-of-type.visible))~button.next.visible,
.slide-container:not(:has(div:first-of-type.visible)) ~ button.prev.visible{
    opacity: 1;
    transform: scale(1);
}
      
@media(min-aspect-ratio:1.001/1){
    .main-circle__right,
    .main-circle__left{
        display: block;
        height:100vw;
        width: 62vw;
        margin-top: 0;
        position: relative;
        z-index: 5
    }
            
    .main-circle__right{
        margin-left: auto;
        clip-path: circle(50vw at 50vw 50%)
    }
    
    .main-circle__right .slideshow{
        clip-path: circle(calc(50vw - .382em) at 50vw 50%)
    }
            
    .main-circle__left{
        z-index: 0;
        margin-top: calc((100vw - 100vh)/-2);
        margin-right: auto;
        clip-path: circle(50vw at 12vw 50%)
    }
    
    .main-circle__left>*{
        clip-path: circle(calc(50vw - .382em) at 12vw 50%);
        width: 100%;
        height: 100%;
    }
    
    .main-circle__left>*>*{
        width: 62vw;
        height: 100vh;
        object-fit: cover;
        display: block;
        position: sticky;
            top: 0;
    }
    
    @media(min-width:75rem){
        .main-circle__left>*{
            padding-top: var(--nav-3);
        }
    }
    
    .slide {
        position: sticky;
        left: 0;
        z-index: -1;}
         
    .main-circle__right .slide{clip-path: circle(50vw at 50vw 50%);}
    .main-circle__left .slide{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
            
    .slide img{
        width: 62vw;
        height: 100vh;
        position: fixed;
        top: 0;
    }
    
    .country{
        width: 62vw;
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: auto;
        text-align: right;
        padding-right: max(4.236rem,8vw);
        background:
        linear-gradient(to top,rgba(0,0,0,.8)0%,rgba(0,0,0,0)100%);
        opacity: 0;
        transition: opacity .5s linear
        
    }
            
    .main-circle__right img{right: 0}
    .main-circle__left img{left: 0}
    
    .slideshow button {
        border: 3px solid #000;
    }
    
    .slideshow button.prev{margin-inline:max(1rem,(1vw + .382rem));}
            
    .slide-container:not(:has(div:last-of-type.visible))~button.next.visible,
    .slide-container:has(div:nth-of-type(2).visible) ~ button.prev.visible{
        opacity: 1;
        transform: scale(1);
    }
}
/**/
        
/*HIDE SCROLLBAR*/
.slide-container{scrollbar-width:0;scrollbar-color:rgba(0,0,0,0) rgba(0,0,0,0)}.slide-container::-webkit-scrollbar{width: 0;height: 0}.slide-container::-webkit-scrollbar-thumb{background:rgba(0,0,0,0)}.slide-container::-webkit-scrollbar-track{background:rgba(0,0,0,0)}