<style>
    .container {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:left;
    }
    .card_example {
        position: relative;
        color: var(--code-text-color);
        border-radius: 25px;
        max-width: 520px;
        padding: 20px;
        margin: 20px;
        flex-grow: 0;

        /* For the contents of this card */
        display: inline-flex;
    }
    .card_example_sections {
        position: relative;
        color: var(--code-text-color);
        border-radius: 25px;
        max-width: 520px;
        padding: 20px;
        margin: 20px;
    }
    .card_example footer {
        position: absolute;
        bottom: 0;

        margin-left: 20px;
        margin-bottom: 20px;
    }
    .cd1 {
        box-shadow: inset 3em 1em 0 0 var(--card-background-color);
    }
    .cd1_inset {
        margin-left: 3em;
        margin-top: 1em;
    }
    .cd2 {
        background: radial-gradient(circle, var(--card-background-color) 35%, var(--background-color) 100%);
        clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
    }
    .cd3 {
        background: linear-gradient(to bottom right, var(--card-background-color) 35%, var(--background-color) 100%);
    }
    .cd4 {
        background-color: var(--code-background-color);
    }
    .cd4_clipped {
        clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
        max-width: 400px;
        max-height: 400px;
    }
    .cd5 {
        box-shadow: inset 3em 1em 0 0 var(--card-background-color);
    }
    .cd5 h2 {
        position: absolute;
        color: var(--constant-text-color-light);
        background-color: var(--constant-background-color-semi-transparent);
    }
    .cd5 a {
        color: var(--constant-text-color-light);
        background-color: var(--constant-background-color-semi-transparent);
    }
    .cd6 {
        color: var(--constant-text-color-light) !important;
    	background-image: url("/files-static/images/photo_plant_sun.jpg");
    	background-repeat: no-repeat;
    	background-size: auto;
    }
    .cd6 a {
        color: var(--constant-text-color-light);
        background-color: var(--constant-background-color-semi-transparent);
    }
    .cd7 {
        color: var(--constant-text-color-light) !important;
    	background-image: url("/files-static/images/photo_plant_sun.jpg");
    	background-repeat: no-repeat;
    	background-size: cover;
    }
    .cd7 a {
        color: var(--constant-text-color-light);
        background-color: var(--constant-background-color-semi-transparent);
    }
    .cd7 > div * {
        background-color: var(--constant-background-color-dark) !important;
    }
    .cd8 {
        color: var(--constant-text-color-light) !important;
        background-color: green;

        position: absolute;

        /* To balance out the child element's relative position we need to add margin on the opposite side.
           It might be best to do this with CSS variables instead of hardcoded values. */
        margin-right: 2em;
        margin-bottom: 2em;
    }
    .cd8_inset {
        background-color: orange;

        position: relative;
        left: 2em;
        top: 2em;

        padding: 1em;
    }
    .cd9 {
    }
    .cd9 > * {
        display: block;
    }
    .cd9_image {
        border: 2px solid orange;

        width: 100%;
        max-height: 200px;

        object-fit: cover;
        object-position: 25% 25%;
    }
    .cd9_inset {
        border-left: 2px solid orange;
        border-right: 2px solid orange;
        border-bottom: 2px solid orange;

        background-color: var(--constant-background-color-dark) !important;
        color: var(--constant-text-color-light) !important;

        width: calc(100% - 1em);

        padding-left: 1em;

        /*
        position: absolute;
        bottom: 10px;
        */
    }
    .cd9_inset a {
        color: var(--constant-text-color-light) !important;
    }
    .hover:hover {
        transform: scale(1.5, 1.5);
        z-index: 500;
    }
    .wide {
        /* Grow to fit, without getting too close to the neighbors. */
        flex: 1;
    }
    .small {
        max-width: 75px;
        max-height: 75px;
        padding: 10px;
    }
    .small * {
        max-width: 75px;
        max-height: 75px;
    }
    .attribution {
        font-size: 50%;
    }
</style>