managing-media-queries-blog-post.scss

.hero {
    width: 100%;
    height: 400px;
    position: relative;

    .callout {
        padding: 2rem;
        .title { font-size: 3rem; }
    }

    /*modifiers*/
    &.hero--highlight {
        height: 500px;
        .callout { background: papayawhip; }
    }

    /*responsive*/
    @media (min-width:500px) {
        .callout {
            padding: 3rem;
            .title { font-size: 4rem; }
        }
    }

    @media (min-width:830px) {
        .callout {
            padding: 4rem;
            .title { font-size: 5rem;}
        }
    }
}