#home
  #header
    text-align center
    margin-top 8vmin
    margin-bottom 16vmin
    padding 0 2em

    h1
      font-size 12vw
      font-family "Abril Fatface", serif

    h2
      font-size 5.5vw

  #list-container
  #list-header
  #list
    text-align left
    width 100%
    padding 0 2em

    & > .item
      padding .25em 1em
      margin 1.5em 0
      transition all ease .1s
      border-radius .5em
      display block

      .title
        margin-bottom .25em

      .thumbnail
        img
          width 100%
          height 12em
          object-fit cover
          object-position center
          border-radius .5em
          transition var(--animation)
          transform scale(1)

    hr
      margin 0 1.5em

  #lights
    img
      position fixed
      top .25em
      right .25em
      transition var(--animation)
      height var(--icon-width)

@media only screen and (min-width: 40em)
  #home
    #list
      width var(--text-width)

      & > .item
        &:hover
          box-shadow var(--small-shadow)
          transform scale(1.05)
          padding-bottom 1em

          .thumbnail
            img
              transform scale(1.2) translateY(-1em)
              height 16em
              margin 1em 0
              box-shadow var(--small-shadow)

    #header
      h1
        font-size 5em

      h2
        font-size 2em

    #lights
      img
        top .5em
        right 1em