.grid {
  position: relative;
  margin-bottom: 1rem;

  .full {
    width: 100%;
  }

  .half {
    width: 50%;
  }

  .third {
    width: 33.3%;
  }

  .quarter {
    width: 25%;
  }

  .fifth {
    width: 20%;
  }
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer {
  padding: 0.5rem;
}

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
  border-radius: 0.25rem;
}

.grid-item img {
  display: block;
  max-width: 100%;  
}


.gallery {
  padding: 1rem;
  @include flexbox();
  @include flex-direction(column);

  img {
    border-radius: 0.25rem;
  }
  
  &__contents {
      padding: 1rem;
      width: 65%;
      font-family: $content-font;
      font-size: 1rem;
      text-align: center;
  }

  .grid-item {
    position: relative;
    opacity: 1;
    height: auto;
    cursor: pointer;

    &__desc {
      position: absolute;
      display: none;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 0.5rem;
      width: 100%;
      height: 100%;
      border-radius: 0.25rem;      
      z-index: z('gallery-mask');
      font-family: $title-font;
      font-weight: 700;
      cursor: pointer;

      @include truncate(350px);
      @include box-shadow(0, 4px, 4px, 0, rgba(0, 0, 0, 0.4));
      @include on-event {
        @include transition(all, 0.25s, ease);
        @include themify($themes) {
          color: themed('gallery-mask-color');
          background-color: themed('gallery-mask-background-color');
        }
      }
    }
  }
}