Usage

Use of the epic component is simple, just add the epic class to the parent of the content you wish to wrap. This will add padding on the x and y axis of the container.
Note: Be sure to add the bg-{color} class to display the appropriate background.

<div class="epic bg-primary c-white br">
    <h1>Epic section</h1>
    <p class="lead">This section is pretty epic...</p>
    <button class="btn btn-white btn-outline">Call to action!</button>
</div>

Variables

Change the default epic padding with the variables below.

$epic-mobile-padding: 2rem 1rem;

$epic-default-padding: 4rem 2rem;