asiaH8/assets/stylesheets/template/modules/gallery.scss

@charset "utf-8";

@import "../initial";

// Gallery MODULES
.widget-gallery {
  .widget-title {
    @extend .unity-title;
  }

  .widget-content {
    position: relative;
  }

  &.widget1 {
    .widget-content {
      overflow: hidden;

      .widget-pic {
        display: inline-block;
        padding: 1px;
        text-align: center;

        @include size(33.3333%, auto);

        img {
          @include size(100%, 100%);
        }
      }
    }
  }

  &.widget2 {
    .widget-content {
      margin-left: -5px;
      margin-right: -5px;

      .widget-pic {
        margin-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
        transition:.5s;

        img {
          @include size(100%, auto);
          padding: 3px;
          border: 1px solid #d6d6d6;
        }
      }
      .widget-pic:hover{
        opacity: .5;
      }
    }
  }
}

.index-gallery {
  .index-title {
    @extend .unity-title;
  }

  &.index1 {
    .index-content {
      &:nth-child(4n+1) {
        clear: both;
      }

      .index-part {
        padding: 8px;
      }

      .index-content-inner {
        position: relative;
      }

      .index-content-title {
        font-family: $main-font;
        font-size: 0.9375em;
      }

      .index-img-description {
        font-size: 0.8125em;
      }
    }
  }

  &.index2 {
    .index-content {
      padding: 25px 15px;
      background: lighten($theme-gray, 60%);
      margin-bottom: 20px;
      border-radius: 2px;

      @media screen and (max-width: $screen-sm) {
        margin-right: 20px;
        margin-left: 20px;
      }
    }

    .index-content-inner {
      margin-bottom: 25px;
    }

    .index-img {
      border-radius: 2px;
    }

    .index-content-title {
      font-family: $main-font;
      font-size: 0.9375em;
    }

    .index-img-description {
      font-size: 0.8125em;
    }
  }
}

.show-gallery {
  .show-title {
    @extend .unity-title;
  }

  .show-content {
    padding-right: 0;
    padding-left: 0;

    &:nth-child(6n+1) {
      clear: both;
    }

    .img {
      display: inline-block;
      width: 100%;
      height: auto;
      border-radius: 2px;
    }

    .show-content-inner {
      position: relative;
      padding: 5px;
      z-index: 0;
    }

    .show-description {
      font-family: $main-font;
      font-size: 0.8125em;
      padding: 8px;
    }
  }
}