@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html.lenis {
    height: auto;
}
  
.lenis.lenis-smooth {
    scroll-behavior: auto;
}
  
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
  
.lenis.lenis-stopped {
    overflow: hidden;
}
  
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body{
    min-height: 100vh;
    width: 100%;
    font-family: 'Poppins', sans-serif;
}
img{
    max-width: 100%;
}
.home{
    width: 100%;
    position: relative;
    display: flex;
    padding: 2rem;
    gap: 4rem;

    & .main-img__wrapper{
        width: 60%;
        position: fixed;
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 2rem;

        & .header{
            position: absolute;
            width: 100%;
            font-size: clamp(1.5rem, calc(1.5rem + 1.5vw), 4rem);
            text-align: center;
            padding-bottom: 2rem;
            top: calc(clamp(1.5rem, calc(1.5rem + 1.5vw), 4rem) + 1.5rem);
            z-index: 9;
        }

        & .main-img{
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: flex-end;
            position: relative;
            border: none;
            border-radius: 1.2rem;

            & img{
                border: none;
                border-radius: 1.5rem;
                display: block;
                position: relative;
            }
        }

    }

    & .img-gallery__wrapper{
        width: 25%;
        position: absolute;
        right: 0;
        padding: 1rem;

        & .img-gallery{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;

            & .image-element{
                border: none;
                border-radius: 1rem;
                cursor: pointer;
                opacity: 0.4;

                &.active{
                    opacity: 1;
                }
            }
        }

    }

}