// =============================================================================
// SCSS/SITE/STACKS/INTEGRITY/_IMAGES.SCSS
// -----------------------------------------------------------------------------
// Classes for image styling.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Rounded
//   02. Circular
//   03. Thumbnail
// =============================================================================

// Rounded
// =============================================================================

.x-img-rounded {
  border-radius: 6px;
  @include transition(#{opacity 0.3s ease});
}

a.x-img-rounded:hover {
  @include opacity(0.5);
}



// Circular
// =============================================================================

.x-img-circle {
  border-radius: 100em;
  @include transition(#{opacity 0.3s ease});
}

a.x-img-circle:hover {
  @include opacity(0.5);
}



// Thumbnail
// =============================================================================

.x-img-thumbnail {
  @include img_thumbnail();

  > img {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

a.x-img-thumbnail:hover {
  border-color: $accentColor;
  @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
}