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

        .card-grid {
            display: inline-flex;
            grid-column-gap: 40px;
        }
        .card{
           position: relative;
           margin: auto;
           padding: auto;
           width: 100%;
           height: 100%;
           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); 
        }
        @media(max-width:850px){
            .card-grid{
                position: fixed;
            }
            .card-background{
                width: 500px;
            }
        }
        .card-background{
            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;
        }