<h2>sGrid: Changing Cell Alignment</h2>

<div class="my-grid">
  <div class="label">
    <strong>Vertical Top</strong>
  </div>
  <div class="my-cell-1">First cell</div>
  <div class="my-cell-2 top">Second cell</div>
</div>
<div class="my-grid">
  <div class="label">
    <strong>Vertical Center</strong>
  </div>
  <div class="my-cell-1">First cell</div>
  <div class="my-cell-2 middle">Second cell</div>
</div>
<div class="my-grid">
  <div class="label">
    <strong>Vertical Bottom</strong>
  </div>
  <div class="my-cell-1">First cell</div>
  <div class="my-cell-2 bottom">Second cell</div>
</div>

<p class="p">Demo by Julian Ćwirko. <a href="http://www.sitepoint.com" target="_blank">See article</a>.</p>

body
  text-align center
  padding 20px

/* ...sGrid loaded from:
https://codepen.io/SitePoint/pen/bf2645f66d89c4245c8691509b134155

See: https://github.com/juliancwirko/s-grid */

.my-grid
    background-color #E9E9EA
    margin-top rem-calc(50)
    center(500)
    grid()
    .label
        stack()
        text-align center
    .my-cell-1, .my-cell-2
        stack()
        padding rem-calc(10)
        background-color #D5D5D7
    @media screen and (min-width: rem-calc(breakpoints[md]))
        .my-cell-1
            height rem-calc(300)
            cell(2, 3)
        .my-cell-2
            &.top
                cell(1, 3, align: 'top')
            &.middle
                cell(1, 3, align: 'center')
            &.bottom
                cell(1, 3, align: 'bottom')

.p
  padding-top 130px
  font-size 13px