.discover-container {
    position: fixed;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: -1;
}

.discover-image-container {
    position: relative;
    perspective: 200px;
    perspective-origin: left center;
}

.discover-image {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

.discover-image-rotateX15 {
    transform: rotateX(15deg);
}

.discover-image-rotateY15 {
    transform: rotateY(15deg);
}

.reflect-black-below {
    /* if any browser does not support it then ok, because it will not disturb anything else except reflection. */
    -webkit-box-reflect: below -10px linear-gradient(#fa626200, rgb(13 23 15 / 22%));
}

.discoverable-tagline {
    padding: 5px;
    text-align: center;
    border-radius: 8px;
    z-index: -1;
    position: fixed;
    left: 50%;
    top: 9%;
    translate: -50% -50%;
    z-index: -1;
    transition: filter 500ms ease;
    white-space: nowrap;
    font-size: 1.2rem;
}

    .discoverable-tagline span {
        font-weight: bold;
    }

.discoverable-tagline-hover {
    filter: drop-shadow(-1px -1px 1px #00303277);
}

@media(max-height:300px) {
    .discoverable-tagline {
        top: 10px !important;
        transform: scale(0.8);
    }
}



.large-text {
    font-size: clamp(16px, 2.5vw, 20px);
}

.discoverable-hero {
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layer below your fixed light overlay */
.discoverable-layer {
    width: 100%;
    display: flex;
    justify-content: center;
    transform-style: preserve-3d;
}


/* Stack of scattered images */
.discoverable-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 3vw, 28px);
    width: min(98vw, 1600px);
    transform-style: preserve-3d;
    perspective-origin: center center;
}

    .discoverable-stack .discoverable-item {
        aspect-ratio: 1/1;
        object-fit: cover;
        transition: transform .3s ease;
        justify-content: space-between;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: center center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        padding: 20px;
        background-position: top;
        background-size: contain;
        background-repeat: no-repeat;
    }

.fixed-center {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}





.discoverable-stack {
    position: relative;
    height:100%;
}

    .discoverable-stack .discoverable-item {
        --scale: 1;
        /* one transform pipe for all cards */
        transform: translate(var(--x, 0), var(--y, 0)) rotateZ(var(--rz, 0deg)) translateZ(0) scale(var(--scale));
        will-change: transform;
    }

        /* fixed center: keep where you already place it */
        .discoverable-stack .discoverable-item.fixed-center {
            max-height: 50px;
            aspect-ratio: auto;
            --x: -50%;
            --y: 120%;
            --rz: 2deg;           
            transform: translate(var(--x), var(--y)) rotateZ(var(--rz));
        }

        /*******   Default settings ***********/

        .discoverable-stack .discoverable-item.item1 {
            --x: -49vw;
            --y: -38vh;
            --rz: -5deg;
        }

        .discoverable-stack .discoverable-item.item2 {
            --x: 27vw;
            --y: -35vh;
            --rz: 5deg;
        }

        .discoverable-stack .discoverable-item.item3 {
            --x: 5vw;
            --y: -37vh;
            --rz: 2deg;
        }

        .discoverable-stack .discoverable-item.item4 {
            --x: 26vw;
            --y: -9vh;
            --rz: 11deg;
        }

        .discoverable-stack .discoverable-item.item5 {
            --x: -47vw;
            --y: -9vh;
            --rz: -8deg;
        }


        .discoverable-stack .discoverable-item.item6 {
            --x: 12vw;
            --y: 11vh;
            --rz: 10deg;
        }

        .discoverable-stack .discoverable-item.item7 {
            --x: -26vw;
            --y: -38vh;
            --rz: -1deg;
        }

        .discoverable-stack .discoverable-item.item8 {
            --x: -34vw;
            --y: 12vh;
            --rz: -6deg;
        }


@media (max-width: 1278px) and (min-height:650px) {
    .discoverable-stack .discoverable-item {
        --scale: 0.8;
    }

        .discoverable-stack .discoverable-item.item1 {
            --y: -33vh;
            --x: -52vw;
        }

        .discoverable-stack .discoverable-item.item2 {
            --x: 22vw;
            --y: -35vh;
            --rz: 5deg;
        }

        .discoverable-stack .discoverable-item.item3 {
            --x: -1vw;
            --y: -35vh;
            --rz: 2deg;
        }

        .discoverable-stack .discoverable-item.item4 {
            --x: 20vw;
        }

        .discoverable-stack .discoverable-item.item7 {
            --y: -34vh;
        }
}
@media(max-width:950px) and (min-height:650px) {
    .discoverable-stack .discoverable-item.item1 {
        --y: -28vh;
    }
    .discoverable-stack .discoverable-item.item2 {
        --y: -27vh;
    }
    .discoverable-stack .discoverable-item.item5 {
        --y: -5vh;
    }
}

@media(max-width:850px) and (min-height:650px) {

    .discoverable-stack .discoverable-item.item1 {
        --y: -36vh;
        --x: -42vw;
    }
    .discoverable-stack .discoverable-item.item2 {
        --y: -16vh;
        --x: 16vw;
    }
    .discoverable-stack .discoverable-item.item3 {
        --x: 8vw;
        --y: -35vh;
    }
    .discoverable-stack .discoverable-item.item4 {
        --x: 17vw;
        --y: 3vh;
    }
    .discoverable-stack .discoverable-item.item5 {
        --y: -15vh;
        --x: -50vw;
    }
    .discoverable-stack .discoverable-item.item6 {
        --x: 9vw;
        --y: 19vh;
    }
    .discoverable-stack .discoverable-item.item7 {
        --y: 3vh;
        --x: -49vw;
    }
    .discoverable-stack .discoverable-item.item8 {
        --x: -43vw;
        --y: 19vh;
    }
}

@media(max-width:700px) and (min-height:650px) {
    .discoverable-stack .discoverable-item {
        --scale:0.7;
    }
    .discoverable-stack .discoverable-item.item1 {
        --y: -36vh;
        --x: -50vw;
    }
    .discoverable-stack .discoverable-item.item2 {
        --y: -16vh;
        --x: 6vw;
    }
    .discoverable-stack .discoverable-item.item3 {
        --x: 6vw;
        --y: -35vh;
        --rz: 10deg;
    }
    .discoverable-stack .discoverable-item.item4 {
        --x: 7vw;
        --y: 2vh;
        --rz: -2deg;
    }
    .discoverable-stack .discoverable-item.item5 {
        --y: -15vh;
        --x: -53vw;
    }
    .discoverable-stack .discoverable-item.item6 {
        --x: 3vw;
        --y: 20vh;
    }
    .discoverable-stack .discoverable-item.item8 {
        --x: -48vw;
        --y: 19vh;
    }
}

@media(max-width:550px) and (min-height:650px) {
    .discoverable-stack .discoverable-item {
        --scale: 0.6;
    }
        .discoverable-stack .discoverable-item.item1 {
            --x: -59vw;
        }

        .discoverable-stack .discoverable-item.item2 {
            --x: 8vw;
        }
        .discoverable-stack .discoverable-item.item3 {
            --x: 6vw;
        }
        .discoverable-stack .discoverable-item.item4 {
            --x: 6vw;
            --rz: 11deg;
        }
        .discoverable-stack .discoverable-item.item5 {
            --y: -15vh;
            --x: -59vw;
        }
        .discoverable-stack .discoverable-item.item6 {
            --x: 3vw;
            --y: 20vh;
        }
        .discoverable-stack .discoverable-item.item7 {
            --y: 3vh;
            --x: -57vw;
        }
        .discoverable-stack .discoverable-item.item8 {
            --x: -52vw;
            --y: 20vh;
        }
}

@media(max-width:501px) and (min-height:650px) {
    .discoverable-stack .discoverable-item {
        --scale: 0.55;
    }
        .discoverable-stack .discoverable-item.item1 {
            --x: -62vw;
        }
        .discoverable-stack .discoverable-item.item2 {
            --x: 3vw;
        }
        .discoverable-stack .discoverable-item.item3 {
            --x: 2vw;
        }
        .discoverable-stack .discoverable-item.item4 {
            --x: -1vw;
            --rz: 11deg;
        }
        .discoverable-stack .discoverable-item.item5 {
            --x: -61vw;
        }
}

@media(max-width:401px) and (min-height:650px) {
    .discoverable-stack .discoverable-item {
        --scale: 0.5;
    }
        .discoverable-stack .discoverable-item.item1 {
            --x: -68vw;
        }
        .discoverable-stack .discoverable-item.item2 {
            --x: -37vw;
            --y: 21vh;
            --scale: 0.4;
        }
        .discoverable-stack .discoverable-item.item3 {
            --x: -7vw;
            --y: -33vh;
        }
        .discoverable-stack .discoverable-item.item4 {
            --x: -7vw;
            --rz: 11deg;
        }
        .discoverable-stack .discoverable-item.item5 {
            --x: -37vw;
            --y: 8vh;
            --scale: 0.4;
            --rz: 11deg;
        }
        .discoverable-stack .discoverable-item.item6 {
            --x: -6vw;
            --y: 20vh;
        }
        .discoverable-stack .discoverable-item.item7 {
            --x: -67vw;
        }
        .discoverable-stack .discoverable-item.item8 {
            --x: -66vw;
            --y: 17vh;
        }
}
@media(max-width:401px) {
    .discover-container {
        display: none;
    }
}
@media(max-height:500px) {
    .discoverable-stack .discoverable-item {
        --scale: 0.5;
    }
}