/*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;
    }

    /* Image style standardization */
    /*
    * Standardize the size of images whose pixel aspect ratio
    * does not match the standard for the given page.
    * The standard for documentation images is 4:3.
    * The standard for software images is 2:1.
    */
    div.cards .img-container:has(.resized-img) {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    div.cards .img-container:has(.aspect-four-three) {
        aspect-ratio: 4 / 3;
    }
    div.cards .img-container:has(.aspect-two-one) {
        aspect-ratio: 2 / 1;
    }
    /* Solidify transparent backgrounds to standardize hover effect */
    div.cards .img-container:has(.transparent-img) {
        background-color: var(--white);
    }
    /* Optional padding for images that hug the edges */
    div.cards .img-container:has(.padded) {
        padding: 32px;
    }
}

@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;
}