#features.page{
    gap: 48px;
    padding-top: 80px;
    overflow: visible;
    & h2{
        font-weight: 700;
        font-size: 32px;
    }
    & .keyFeature{
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 25%;
        max-width: 512px;
        & > span.material-symbols-outlined{
            padding: 16px;
            height: 72px;
            width: 72px;
            box-sizing: border-box;
            background: #D8EAFF;
            border-radius: 72px;
            color: #002E58;
            font-size: 40px;
        }
        & > h3{
            font-size: 24px;
            font-weight: 650;
            line-height: 29px;
        }
        & > p{
            font-size: 16px;
            font-weight: 400;
            line-height: 120%;
        }
    }
    & .keyFeatureList{
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: center;
        gap: 32px;
    }
    & .useCase{
        transform: perspective(1000px) rotate3d(1, 0, 0, 45deg) scale(0.7);
        --shadowColor: rgba(0, 0, 0, 0.25);
        box-shadow: 0px 4px 8px var(--shadowColor), 0px 128px 64px -96px var(--shadowColor);
        transition: 1s transform ease, 0.3s opacity;
        opacity: 0.2;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: row;
        padding: 72px 72px 72px 72px;
        width: 100%;
        margin-inline: -80px;
        border-radius: 16px;
        gap: 80px;
        margin-bottom: -32px;
        height: auto;
        & img{
            max-width: calc(100svw - 512px);
            height: 50svh;
        }
        & > .content{
            display: flex;
            flex-direction: column;
            padding: 0px;
            gap: 16px;
            max-width: 348px;
            min-width: 256px;
            height: 100%;
            width: max-content;
            color: white;
            align-items: left;
            justify-content: center;
            & > button{
                width: fit-content;
                margin-top: 8px;
            }
            & > h3{
                font-weight: 600;
                font-size: 32px;
                line-height: 120%;
            }
            & > p{
                font-size: 16px;
                font-weight: 400;
                line-height: 130%;
                white-space: pre-line;
            }
        }
    }
    & .useCase.scrollVisible{
        transform: perspective(1000px);
        opacity: 1;
    }
    & .useCase.gaming{
        margin-top: 72px;
        background: url(../honeycomb.png),
                    linear-gradient(90deg, #141414 0%, rgba(20, 20, 20, 0.39) 15.65%,rgba(28, 28, 28, 0) 50.49%),
                    linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.5) 100%),
                    linear-gradient(63.81deg, rgba(35, 41, 35, 0.85) 20.73%, rgba(113, 255, 63, 0.85) 80.47%);
        background-size: 219px 384px,
                         100%,
                         100%,
                         100%;
        background-repeat: repeat;
        --shadowColor:#27372875;
        & > .content{
            & > button{
                background: #273728;
                color: #8DFF93;
                opacity: 1;
            }
        }
    }
    & .useCase.productivity{
        --shadowColor: #3e589981;
        background-size: cover;
        background: radial-gradient(40.63% 171.64% at 64.04% 61.26%, rgba(0, 0, 0, 0) 99.99%, rgba(0, 0, 0, 0.2) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
                    radial-gradient(19.6% 82.82% at 64.04% 61.26%, rgba(0, 0, 0, 0) 99.99%, rgba(0, 0, 0, 0.2) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
                    linear-gradient(180deg, #0085FF 0%, #4F6EBE 100%);
    }
    & .useCase.creative{
        --shadowColor: #5e3cbd7e;
        background: linear-gradient(270deg, rgba(22, 21, 92, 0) 36.2%, #6C43B9 100%), url(../imgs/wallpaper-light.png), linear-gradient(0deg, #6C43B9, #6C43B9);
        background-size: cover;
        background-position: center;
    }
}