/* ========================================
   IMAGES - Generic CKEditor Alignment
   Future: Add custom image styles here
   ======================================== */

.image-style-align-left {
    float: left !important;
    margin: 0 1.5em 1em 0 !important;
    max-width: 45% !important;
}

.image-style-align-right {
    float: right !important;
    margin: 0 0 1em 1.5em !important;
    max-width: 45% !important;
}

/* ========================================
   CENTER ALIGNED IMAGES
   ======================================== */

figure.image.image-style-align-center {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    clear: both;
    max-width: auto;
}

figure.image.image-style-align-center img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto;
}

/* ========================================
   GENERAL IMAGE STYLES
   ======================================== */

figure.image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

figure.image_resized {
    max-width: 100% !important;
    height: auto !important;
}

figure.image_resized.image-style-align-center {
    max-width: 80% !important;
}

/* ========================================
   IMAGE CAPTIONS
   ======================================== */

figcaption {
    font-size: 0.9em;
    color: #718096;
    text-align: center;
    font-style: italic;
    margin-top: 0.5em;
    padding: 0 1em;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .image-style-align-left,
    .image-style-align-right,
    .image-style-align-center {
        float: none !important;
        margin: 1em auto !important;
        display: block !important;
        max-width: 100% !important;
        width: auto !important;
    }
}