/* =========================================================
CARDS
========================================================= */

.story{

    position:relative;

    margin-top:-120px;

    z-index:20;

}

.card{

    position:relative;

    max-width:1200px;

    margin:50px auto;

    padding:45px;

    border-radius:24px;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            rgba(23,29,40,.92),
            rgba(17,22,32,.96)
        );

    border:

        1px solid rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    border-color:

        rgba(16,216,211,.35);

    box-shadow:

        0 0 40px rgba(16,216,211,.12);

}

/* Glow */

.card::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:24px;

    padding:1px;

    background:

        linear-gradient(
            135deg,
            transparent,
            rgba(30,136,245,.55),
            rgba(16,216,211,.55),
            transparent
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.35s;

}

.card:hover::before{

    opacity:1;

}

.card h2{

    margin-bottom:18px;

    font-size:2rem;

    background:

        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    -webkit-background-clip:text;

    color:transparent;

}

.card p{

    max-width:900px;

}

@media(max-width:768px){

    .story{

        margin-top:-60px;

    }

    .card{

        margin:30px 20px;

        padding:30px;

    }

}