/*Cards CSS pattern*/
/*Used in wiki under applications, and homepage*/
:root {
    --light-gray-hover: #f6f6f8;
}

@media only screen {
    section#content {
        max-width: 32rem;
    }

    div.cards {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        margin: 0 0 2rem 0;
        gap: 2rem 0;
    }

    div.cards > a {
        box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
        margin: 0 1rem;
    }

    div.cards > a img {
        width: 100%;
    }

    div.content > div > h2, section#content > div > div > h2 {
        text-align: center;
        text-transform: uppercase;
    }

    .caption {
        padding: 1rem;
        font-family: var(--headline-font);
        color: var(--font-black);
    }

    div.cards > a:hover {
        background-color: var(--light-gray-hover);
    }

    div.cards > a:hover code {
        background-color: var(--white);
    }

    div.cards h3 {
        color: var(--byu-blue);
        text-align: center;
    }
}

@media only screen and (min-width: 801px) {
    section#content {
        max-width: 52rem;
    }

    div.cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
    }
}

@media only screen and (min-width: 1261px) {
    section#content {
        max-width: 100rem;
    }

    div.cards {
        grid-template-columns: repeat(3, 1fr);

    }
}

.onDemand{
    padding: 100px 20px 150px;
}