/****************************************************************************** 
* Grid
******************************************************************************/

  .grid-loading {
    color: $color-800;
    font-size: 3.5rem;
    padding-top: 6rem;
    text-align: center;
  }

  .grid {
    display: grid;
    grid-auto-rows: 0;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    margin-top: 2rem;
    max-height: 0;
    opacity: 0;

    .grid-item {
      position: relative;

      .grid-item-body {
        box-shadow: 0 0 1rem 0 $grey-400;
      }

      .grid-item-image {
        position: relative;

        img {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          border-top-left-radius: 0.25rem;
          border-top-right-radius: 0.25rem;
          -webkit-transition: all ease-in-out 600ms;
          -moz-transition: all ease-in-out 600ms;
          -ms-transition: all ease-in-out 600ms;
          -o-transition: all ease-in-out 600ms;
          transition: all ease-in-out 600ms;
          width: 100%;

          &::before {
            content: '';
            display: block;
            padding-top: calc(100% * 2 / 3);
          }

          &::after {
            align-items: center;
            background-color: rgba($black, 0.24);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
            color: rgba($black, 0.12);
            content: '\f03e';
            display: flex;
            font-family: 'FontAwesome';
            font-size: 5rem;
            height: 100%;
            justify-content: center;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
          }
        }
      }

      .grid-item-content {
        background-color: rgba($black, 0.06);
        cursor: pointer;
        padding: 1rem 1rem 1px 1rem;
        -webkit-transition: all ease-in-out 600ms;
        -moz-transition: all ease-in-out 600ms;
        -ms-transition: all ease-in-out 600ms;
        -o-transition: all ease-in-out 600ms;
        transition: all ease-in-out 600ms;

        a {
          border-bottom: 1px dotted $grey-400;
          text-decoration: none;

          &:hover,
          &:focus,
          &:active {
            border-bottom: 1px solid $grey-200;
            color: $color-600;
          }
        }

        h3 {
          align-items: center;
          display: flex;
          justify-content: flex-start;
        }

        .grid-item-type {
          background-color: rgba($black, 0.03);
          border: 1px solid rgba($black, 0.06);
          border-radius: 10rem;
          color: $color-200;
          line-height: 0;
          margin-right: 1rem;
          padding: 0.75rem;
        }
      }

      .grid-item-meta {
        align-items: center;
        background-color: $color-800;
        border-right: 1px solid rgba($black, 0.12);
        display: flex;
        justify-content: center;
        text-transform: uppercase;

        a {
          color: $color-200;
          justify-content: center;
          text-decoration: none;

          em {
            font-style: normal;
            text-align: center;
            width: 100%;
          }

          &:hover,
          &:focus,
          &:active {
            color: $color-100;
          }
        }

        span {
          align-items: center;
          border: 1px solid rgba($black, 0.06);
          border-right: 0;
          color: $color-200;
          display: flex;
          flex: 0 0 50%;
          font-size: 0.725rem;

          a {
            align-items: center;
            display: flex;
            flex: 1 1;

            &.fa-icon-folder::before {
              content: '\f07c';
            }

            &::before {
              align-items: center;
              background-color: rgba($black, 0.12);
              border-right: 1px solid rgba($black, 0.06);
              color: $color-200;
              display: flex;
              justify-content: center;
              padding: 0.75rem 1rem;
            }
          }
        }
      }
    }
  }

/****************************************************************************** 
* Grid Mobile 
******************************************************************************/

  @media (max-width: $breakpoint-tablet) {

    .grid {
      grid-gap: 1.5rem;
    }
  }