@charset "utf-8";

@import "../initial";

// Gallery MODULES
.widget-gallery {
  .widget-title {
    @extend .unity-title;
    color: $widget-title;
    padding-left: 10px;
    border-left: 4px solid $widget-title;
    line-height: 1;
  }

  .widget-content {
    position: relative;
  }

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

      .widget-pic {
        display: inline-block;
        padding: 0.0625em;
        text-align: center;

        @include size(33.3333%, auto);

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

  &.widget2 {
    .widget-content {
      margin-left: -0.3125em;
      margin-right: -0.3125em;

      .widget-pic {
        margin-bottom: 0.625em;
        padding-left: 0.3125em;
        padding-right: 0.3125em;

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

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

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

      .index-part {
        padding: 0.5em;
      }

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

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

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

  &.index2 {
    .index-content {
      padding: 1.5625em 0.9375em;
      background: lighten($theme-gray, 60%);
      margin-bottom: 1.25em;
      border-radius: 0.125em;

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

    .index-content-inner {
      margin-bottom: 1.5625em;
    }

    .index-img {
      border-radius: 0.125em;
    }

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

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

.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: 0.125em;
    }

    .show-content-inner {
      position: relative;
      padding: 0.3125em;
      z-index: 0;
    }

    .show-description {
      font-family: $main-font;
      font-size: 0.813em;
      padding: 0.5em;
    }
  }
}