asiaH6/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: 3px;
        text-align: center;

        @include size(33.3333%, auto);

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

  &.widget2 {
      .widget-title{
          margin-top: 30px;
      }
    .widget-content {
      margin: 0;

      .image-wrap{
        padding: 15px; 
      }
      .widget-pic {

        // padding-right: 20px;
        position: relative;
        display: block;

          &:before{
            position: absolute;
            width: 100%;
            height: 100%;
            content: '';
            background: rgba(0,0,0,.3);
            opacity: 0;
            transition:.3s;
            top:0;
            left: 0;
            z-index: 1;
          }
          &:hover{
            &:before{
              opacity: 1;
            }
            
          }
        img {
          @include size(100%, auto);
          position: relative;
        }
      }
    }
  }

  &.widget3 {
    .widget-content {
      margin-top: 15px;
      margin-left: 5px;
      margin-right: 5px;

      .widget-pic {
        padding: 0; 
        margin-bottom: 20px;

        img {
          @include size(80%, auto);
        }
      }
    }
  }  
}

.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;
    }
  }
}