.discover-container {
    position: fixed;
    height: 100svh;
    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: 100svh;
    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 {
    /* flex: 1 1 clamp(150px, 22vw, 396px); */
    /* max-width: clamp(200px, 20vw, 396px); */
    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;
    /* optional: make a comfortable “no fly” bottom band above the paragraph */
    --bottom-band: 18svh;
    /* space reserved for the black paragraph */
}

.discoverable-stack .discoverable-item {
    /* one transform pipe for all cards */
    transform: translate(var(--x, 0), var(--y, 0)) rotateZ(var(--rz, 0deg)) translateZ(0);
    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 ***********/

/* items on left side */
.discoverable-stack .discoverable-item.item1 {
    --x: -50svw;
    --y: -35svh;
    --rz: -5deg;
}

.discoverable-stack .discoverable-item.item3 {
    --x: -30svw;
    --y: -20svh;
    --rz: -5deg;
}

.discoverable-stack .discoverable-item.item5 {
    --x: -50svw;
    --y: -8svh;
    --rz: -12deg;
}

/* items on right side */
.discoverable-stack .discoverable-item.item2 {
    --x: 30svw;
    --y: -35svh;
    --rz: 5deg;
}

.discoverable-stack .discoverable-item.item4 {
    --x: 27svw;
    --y: -10svh;
    --rz: 5deg;
}

.discoverable-stack .discoverable-item.item6 {
    --x: 9svw;
    --y: -15svh;
    --rz: 0deg;
}


@media (max-width: 1278px) {
    /*bm3502511191855: If media query changes and effects item6 then change in theme.js also */

    /* items on left side */
    .discoverable-stack .discoverable-item.item1 {
        --x: -50svw;
        --y: -30svh;
        --rz: -5deg;
    }

    .discoverable-stack .discoverable-item.item3 {
        --x: -45svw;
        --y: -9svh;
        --rz: -5deg;
    }

    .discoverable-stack .discoverable-item.item5 {
        display: none;
    }

    /* items on right side */
    .discoverable-stack .discoverable-item.item2 {
        --x: 21svw;
        --y: -30svh;
        --rz: 5deg;
    }

    .discoverable-stack .discoverable-item.item4 {
        --x: 15svw;
        --y: -7svh;
        --rz: 5deg;
    }

    .discoverable-stack .discoverable-item.item6 {
        /*bm3502511191855: If media query changes and display is tempered then change in theme.js also */
        display: none;
    }
}


@media (max-width: 964px) {

    /* items on left side */
    .discoverable-stack .discoverable-item.item1 {
        --x: -50svw;
        --y: -30svh;
        --rz: -5deg;
    }

    .discoverable-stack .discoverable-item.item3 {
        --x: -50svw;
        --y: -9svh;
        --rz: -5deg;
    }

    /* items on right side */
    .discoverable-stack .discoverable-item.item2 {
        --x: 17svw;
        --y: -30svh;
        --rz: 5deg;
    }

    .discoverable-stack .discoverable-item.item4 {
        --x: 17svw;
        --y: -7svh;
        --rz: 5deg;
    }

    .discoverable-stack .discoverable-item.item5 {
        --x: -55svw;
    }
}

@media(max-width: 800px) {
    .sticky-note {
        min-width: unset;
    }

    .discoverable-stack .discoverable-item.item2 {
        --y: -27svh;
    }
}

@media(max-width: 725px) {
    .discoverable-stack .discoverable-item.item2 {
        --x: 15svw;
    }

    .discoverable-stack .discoverable-item.item4 {
        --x: 15svw;
    }
}

@media (max-width:600px) {
    .sticky-note {
        transform: scale(0.8) rotate(-2deg);
    }

    .discoverable-stack .discoverable-item.item2 {
        --x: -21svw;
        --y: -32svh;
    }

    .discoverable-stack .discoverable-item.item3 {
        --x: 10svw;
        --y: -29svh;
    }

    .discoverable-stack .discoverable-item.item4 {
        --x: 8svw;
        --y: -13svh;
        --rz: 5deg;
    }

    .discoverable-stack .discoverable-item.item5 {
        --y: -12svh;
        display: inherit;
    }
}

@media (max-width:500px) {
    .sticky-note {
        transform: scale(0.8);
    }

    .discoverable-stack .discoverable-item.item1 {
        --x: -56svw;
        --y: -38svh;
    }

    .discoverable-stack .discoverable-item.item2 {
        --x: 5svw;
        --y: -35svh;
        --rz: 14deg;
    }

    .discoverable-stack .discoverable-item.item3 {
        --x: -57svw;
        --y: -21svh;
        --rz: -12deg;
    }

    .discoverable-stack .discoverable-item.item4 {
        --x: 4svw;
        --y: -19svh;
        --rz: 4deg;
    }

    .discoverable-stack .discoverable-item.item5 {
        display: none;
    }
}

@media (max-width:450px) {
    .sticky-note {
        transform: scale(0.85) rotate(-2deg);
    }

    .discoverable-stack .discoverable-item.item1 {
        --x: -56svw;
        --y: -38svh;
    }

    .discoverable-stack .discoverable-item.item2 {
        --x: -2svw;
        --y: -37svh;
        --rz: 6deg;
    }

    .discoverable-stack .discoverable-item.item3 {
        --x: -55svw;
        --y: -21svh;
        --rz: -5deg;
    }

    .discoverable-stack .discoverable-item.item4 {
        --x: -2svw;
        --y: -19svh;
    }
    .discoverable-stack .discoverable-item.item4 {
        --x: -5svw;
    }
}

@media (max-width: 400px) {
}

@media (max-width: 350px) {
    .sticky-note {
        transform: scale(0.7) rotate(-2deg);
    }

    .discoverable-stack .discoverable-item.item1 {
        --x: -67svw;
        --y: -38svh;
    }

    .discoverable-stack .discoverable-item.item2 {
        --x: -11svw;
        --y: -37svh;
    }

    .discoverable-stack .discoverable-item.item3 {
        --x: -66svw;
        --y: -21svh;
    }

    .discoverable-stack .discoverable-item.item4 {
        --x: -13svw;
        --y: -23svh;
    }
}

@media (max-width: 300px) {
    .discoverable-stack .discoverable-item.item1 {
        --x: -69svw;
        --y: -38svh;
    }

    .discoverable-stack .discoverable-item.item2 {
        --x: -19svw;
        --y: -37svh;
    }

    .discoverable-stack .discoverable-item.item3 {
        --x: -68svw;
        --y: -21svh;
    }

    .discoverable-stack .discoverable-item.item4 {
        --x: -21svw;
        --y: -23svh;
    }
}

@media(max-width:1280px) and (max-height: 500px) {
    .discoverable-stack .discoverable-item.item1 {
        --x: -50svw;
        --y: -55svh;
    }

    .discoverable-stack .discoverable-item.item3 {
        --y: -28svh;
    }

    .discoverable-stack .discoverable-item.item2 {
        --y: -55svh;
    }

    .discoverable-stack .discoverable-item.item4 {
        --y: -26svh;
        --rz: 8deg;
    }
}
@media (max-width:600px) and (min-height: 550px) {
    /*bm3502511191855: If media query changes then change in theme.js also */
    .discoverable-stack .discoverable-item.item6 {
        --y: 50%;
        --x: -50%;
        --rz: -2deg;
        display: block; 
    }
}