* {
            border: 0;
        }

        body {
            height: 90vh;
            font-size: 14px;
        }

        .hero-section {
            align-items: center;
            display: flex;
            min-height: 90vh;
            justify-content: center;
        }

        .card-grid {
            display: inline-flex;
            grid-column-gap: 40px;
        }

        @media(max-width:850px) {
            .card-grid {
                position: fixed;
                width: 100%;
                height: min-content;
            }
            .card-background{
                background: fixed;
            }
            .card-heading{
                font-size: 0.1em;
                line-height: 0.7em;
                margin-left: -25%;
            }
        }

        .card {
            position: relative;
            width: 300px;
            height: 450px;
            transition: .8s ease-in-out;
            border-radius: 20px;
            background-image: linear-gradient(15deg, #0f4667 0%, #2a6977);
        }

        .card:hover {
            box-shadow: 2px 30px 30px rgba(0, 0, 0, 0.5);
        }

        .card-background {
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            background-size: cover;
            background-position: center;
            border-radius: 24px;
            transform-origin: center;
            transform: scale(1) translateZ(0);
            transition: filter 200ms linear, transform 200ms liner;
            filter: brightness(0.75) saturate(1.2) contrast(0.85);
        }

        .card-content {
            position: absolute;
            left: 0;
            top: 0;
            padding: 24px;
        }

        .card-heading {
            color: #fff;
            font-size: 1.5rem;
            line-height: 1.4;
            width: 88%;
            font-weight: bold;
        }

        .card-category {
            left: 35%;
            top: 14em;
            color: #fff;
            font-size: 26px;
            font-weight: normal;
            text-transform: uppercase;
        }

        .card:hover .card-background {
            transform: scale(1.05) translateZ(0);
        }

        .card-grid:hover>.card:not(:hover),
        .card-content:not(:hover) .card-background {
            filter: brightness(0.8) saturate(1) contrast(1.2) blur(10px);
        }