body main,
body div.popup {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;

    .card {
        margin: var(--card-margin);

        min-width: calc(100% - 2 * var(--card-margin));
        max-width: calc(100% - 2 * var(--card-margin));

        @media (min-width: calc(600px - 4em)) {
            min-width: calc(600px - 4 * var(--card-margin));
            max-width: calc(600px - 4 * var(--card-margin));
        }

        @media (min-width: 800px) {
            min-width: calc(50% - 4 * var(--card-margin));
            max-width: calc(50% - 4 * var(--card-margin));
        }
        
        @media (min-width: 1201px) {
            min-width: max(calc(600px - 4 * var(--card-margin)), calc(35% - 4 * var(--card-margin)));
            max-width: max(calc(600px - 4 * var(--card-margin)), calc(35% - 4 * var(--card-margin)));
        }

        border: solid 1px var(--header-background-color);

        .header {
            padding: 0.6em;
            background-color: var(--header-background-color);
            color: var(--header-color);
            font-size: 1.2em;
            text-align: center;
            font-weight: bold;
        }

        .content {
            padding: 1em;
            background-color: var(--content-background-color);
        }

        .footer {
            padding: 0.3em;
            background-color: var(--footer-background-color);

            &.flex-3 {
                button {
                    flex: 1 1 0;
                    margin: 0;
                }
                button+button {
                    margin-left: 1em;
                    margin-right: 1em;
                }
                button+button+button {
                    margin: 0;
                }
            }
        }
    }
}