#home {
  position: relative;
  flex: 1;
  .v-speed-dial {
    position: absolute;
    top: -35px;
    z-index: 2;
    /deep/ .v-speed-dial__list {
      align-items: flex-end !important;
    }
  }
  #card-container {
    position: relative;
    margin: 0 auto;
    &.has-toolbar {
      margin: 20px auto;
    }
    &.placeholder {
      padding: 15px 0;
      column-gap: 15px;
    }
    .placeholder-item {
      width: 400px;
      margin-bottom: 30px;
      page-break-inside: avoid;
      will-change: transform;
      break-inside: avoid;
      background-color: rgba(164, 163, 164, .35);
    }
    /deep/ .muuri-item-placeholder {
      background-color: rgba(0,0,0,0.23);
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
      z-index: 0;
    }
  }
  // While waiting for a muuri update this is the easiest way to center the cards.
  // 1 column
  @media (max-width: 859px) {
    #card-container {
      width: 430px;
      &.placeholder {
        column-count: 1;
      }
    }
  }
  // 2 columns
  @media (min-width: 860px) and (max-width: 1289px) {
    #card-container {
      width: 860px;
      &.placeholder {
        column-count: 2;
      }
    }
  }
  // 3 columns
  @media (min-width: 1290px) and (max-width: 1719px) {
    #card-container {
      width: 1290px;
      &.placeholder {
        column-count: 3;
      }
    }
  }
  // 4 columns
  @media (min-width: 1720px) and (max-width: 2149px) {
    #card-container {
      width: 1720px;
      &.placeholder {
        column-count: 4;
      }
    }
  }
  // 5 columns
  @media (min-width: 2150px) {
    #card-container {
      width: 2150px;
      &.placeholder {
        column-count: 5;
      }
    }
  }
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .2s cubic-bezier(.4,0,.2,1)
}
.fade-enter, .fade-leave-to {
    opacity: 0
}
