.resources-grid {
    background-color: #EFF5F0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-family: "Roboto", "Open Sans", sans-serif !important;
}

    .resources-grid > .container {
        flex-direction: column;
    }

    .resources-grid .resources-grid-top-row {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

@media screen and (max-width:768px) {
    .resources-grid .resources-grid-top-row,
    .resources-grid .resources-grid-top-row .heading-area {
        flex-direction: column;
        justify-content: space-around;
        margin-bottom: 1.5rem;
    }

        .resources-grid .resources-grid-top-row h2 {
            font-size: 2rem !important;
            margin-bottom: 1rem;
        }
}

.resources-grid .resources-grid-top-row > div {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.resources-grid .resources-grid-top-row .resources-grid-heading {
    font-size: 2.25rem;
    color: #000000;
    font-weight: 400;
}

.resources-grid .resources-grid-top-row .all-resources-link {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0066CC;
    text-transform: uppercase;
}

    .resources-grid .resources-grid-top-row .all-resources-link:hover {
        text-decoration: underline !important;
        text-decoration-color: #0066CC !important;
    }

.resources-grid .resources-grid-area > div[class^=col] {
    justify-content: center;
}

.resources-grid .resources-grid-area {
    padding: 0 2rem;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media screen and (max-width: 991px) {
    .resources-grid .resources-grid-area {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .resources-grid .resources-grid-area {
        grid-template-columns: repeat(1, 1fr);
    }
}

.resources-grid .resources-grid-area .resources-grid-chunk {
    padding: 15px;
    display: contents;
}

    .resources-grid .resources-grid-area .resources-grid-chunk .resource-card {
        background: white;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
        box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.29), -3px -3px 0px 3px #EDF5FA;
    }
        .resources-grid .resources-grid-area .resources-grid-chunk .resource-card:hover {
            transition: all ease 0.25s;
            transform: scale3d(1.03, 1.03, 1.03);
        }
        .resources-grid .resources-grid-area .resources-grid-chunk .resource-card:hover h3 {
            text-decoration: underline !important;
            text-decoration-color: #0066CC !important;
            color: #0066CC !important;
            font-weight:500;
        }
            .resources-grid .resources-grid-area .resources-grid-chunk .resource-card:hover .resource-card-copy-area {
                color: black !important;
            }


        .resources-grid .resources-grid-area .resources-grid-chunk .resource-card .resource-card-copy-area {
            font-size: 1.1rem;
        }