/* Post Content Styling Guide for Mary's NT Fashion Blog */

/* =======================
   IMAGE ALIGNMENT CLASSES
   ======================= */

/* Center images - use this class in HTML mode */
.img-center {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Float image left with text wrapping */
.img-left {
    float: left !important;
    margin-right: 1.5rem !important;
    margin-bottom: 1rem !important;
    max-width: 50% !important;
}

/* Float image right with text wrapping */
.img-right {
    float: right !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1rem !important;
    max-width: 50% !important;
}

/* Full width image that breaks out of content area */
.img-full {
    width: 100% !important;
    margin: 2rem -2rem !important;
    max-width: calc(100% + 4rem) !important;
}

/* Small image (thumbnail style) */
.img-small {
    max-width: 200px !important;
    height: auto !important;
}

/* Medium image */
.img-medium {
    max-width: 400px !important;
    height: auto !important;
}

/* =======================
   USAGE INSTRUCTIONS
   ======================= */

/*
HOW TO USE THESE STYLES IN YOUR BLOG POSTS:

1. CENTER AN IMAGE:
   - Switch to HTML view in your editor
   - Find your image tag: <img src="..." alt="...">
   - Add the class: <img src="..." alt="..." class="img-center">

2. FLOAT IMAGE LEFT OR RIGHT:
   - Add class="img-left" or class="img-right" to your image tag
   - The text will wrap around the image

3. MAKE IMAGE FULL WIDTH:
   - Add class="img-full" to your image tag
   - This makes the image break out of the content area for dramatic effect

EXAMPLES:

Centered image:
<img src="/uploads/fashion-trend.jpg" alt="Latest fashion trend" class="img-center">

Left-aligned image with text wrap:
<img src="/uploads/outfit.jpg" alt="Stylish outfit" class="img-left">

Full-width dramatic image:
<img src="/uploads/hero-image.jpg" alt="Fashion hero shot" class="img-full">

*/