/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */

#fervor-and-zeal form input[type="button"],
#fervor-and-zeal form input[type="submit"],
#fervor-and-zeal form input[type="text"] {
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#fervor-and-zeal form input[type="submit"],
#fervor-and-zeal a.button-primary {
    vertical-align: bottom;
    cursor: pointer;
    background-color: #f444fd;
    color: #fff;
    border-radius: 4px;
}

#fervor-and-zeal form input[type="submit"]:hover,
#fervor-and-zeal a.button-primary:hover {
    background-color: #e434fd;
}

/* Flexbox grid layout for div blocks */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* Space between grid items */
}

.flex-grid > div {
    flex: 1 1 calc(25% - 16px); /* Three items per row with gap adjustment */
    flex-direction: row;
    max-width: 450px;
    box-sizing: border-box;
    padding: 8px;
    background-color: #f0f0f0; /* Light grey background for visual separation */
    border: 1px solid #ccc; /* Light border for definition */
    border-radius: 4px; /* Rounded corners for aesthetics */
}

.flex-grid > div img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .flex-grid > div {
        flex: 1 1 calc(50% - 16px); /* Two items per row on smaller screens */
    }
}

@media (max-width: 480px) {
    .flex-grid > div {
        flex: 1 1 100%; /* Single item per row on extra small screens */
    }
}