// ============================================================================
// Components | Graphic
// ============================================================================

// ============================================================================
// Mixins
// ============================================================================

/// Base graphic styles
/// @group Graphic
@mixin graphic--base {
    margin: q(32) 0;
}

/// Elevated graphic variant
/// @group Graphic
@mixin graphic--elevate {
    margin-top: 0;
    margin-bottom: q(24);
    max-width: q(660);
}

/// Elevated graphic responsive behavior
/// @group Graphic
@mixin graphic--elevate-responsive {
    width: q(888);
    max-width: q(888);
    justify-self: center;
    margin-left: calc(q(444) - 50vw);
    margin-right: calc(q(444) - 50vw);
}

/// Image base styles for graphic content
/// @group Graphic
@mixin graphic-image--base {
    width: 100%;
}

/// Graphic without margins
/// @group Graphic
@mixin graphic--no-margins {
    margin: 0;
}