.hero-image {
    width: 100%;
    max-width: none;
    margin: 0 calc(-1 * var(--space-lg, 1.5rem)) var(--space-xl, 2rem);
    width: calc(100% + var(--space-lg, 1.5rem) * 2);
    border-radius: 0;
    aspect-ratio: 21/9;
    object-fit: cover;
    display: block;
    box-shadow: 0 8px 30px var(--color-shadow-strong, rgba(26, 95, 42, 0.15));
}

@media (min-width: 768px) {
    .hero-image {
        margin: 0 calc(-1 * var(--space-xl, 2rem)) var(--space-2xl, 3rem);
        width: calc(100% + var(--space-xl, 2rem) * 2);
        border-radius: var(--radius-xl, 16px);
    }
}

.article-image {
    width: 100%;
    height: auto;
    margin: var(--space-xl, 2rem) 0;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 8px 30px var(--color-shadow-strong, rgba(26, 95, 42, 0.15));
    display: block;
    transition: transform var(--transition-slow, 350ms ease), box-shadow var(--transition-slow, 350ms ease);
}

.article-image:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--color-shadow-strong, rgba(26, 95, 42, 0.15));
}

@media (max-width: 480px) {
    .hero-image {
        aspect-ratio: 16/9;
        margin: 0 calc(-1 * var(--space-md, 1rem)) var(--space-lg, 1.5rem);
        width: calc(100% + var(--space-md, 1rem) * 2);
    }
    
    .article-image {
        margin: var(--space-lg, 1.5rem) 0;
        border-radius: var(--radius-md, 8px);
    }
}

@media print {
    .hero-image,
    .article-image {
        box-shadow: none;
        break-inside: avoid;
    }
}