/* =Media
----------------------------------------------- */

.page-content,
.entry-content,
.comment-content {
	img.wp-smiley {
		border: none;
		margin-bottom: 0;
		margin-top: 0;
		padding: 0;
	}
}

// Image Captions
.wp-caption {
	margin-bottom: $vspacing;
	max-width: 100%;
	
	// consider targeting img[class*="size-large"] and img[class*="size-full"] instead
	img {
		display: block;
		margin: 0 auto;
	}

	.wp-caption-text {
		text-align: center;
		padding: 0.8075em 1em;
	    font-size: 14px;
	    font-size: 1.4rem;
	    font-weight: 300;
	    font-family: $base-font;
	    border-left: 1px solid $image-caption-border;
		border-bottom: 1px solid $image-caption-border;
		border-right: 1px solid $image-caption-border;
	}
}

// Galleries
.site-main {
	.gallery {
		@extend %clearfix;
		margin-bottom: $vspacing;

		.gallery-item {
			float: left;
		    background: $gallery-caption-background;
		    overflow: hidden;
		    width: 125px;
			height: auto;
			margin-bottom: 3px;

		    &:hover .gallery-caption {
		    	opacity: 0.7;
		    }

			.gallery-icon {

				a { display: block; }

				img {
					max-width: 100%;
				    height: auto;
				    display: block;
				    margin: 0 auto;
				    border: none;
				}
			}

			.gallery-caption {
				position: absolute;
			    bottom: 0;
			    left: 0;
			    max-height: 45%;
			    width: 100%;
				margin: 0;
				padding: 2px 8px;
			    font-size: 12px;
			    font-size: 1.2rem;
			    font-family: $base-font;
			    background: $gallery-caption-background;
			    opacity: 0;
			    line-height: 1.5;
			    color: $gallery-caption-text;
			    text-align: left;
			}
		}
	}
}

@mixin gallery_column ( $margin: 2, $num: 4 ){
	.gallery-columns-#{$num} .gallery-item {
     width: ( 100% - $margin * ( $num - 1 ) ) / $num;
     margin-right: $margin;
  }
  	.gallery-columns-#{$num} .gallery-item:nth-of-type(#{$num}n - #{$num}) {
     margin-right: 0;
     clear: right;
  }

}

/* Fluid Gallery Columns
   works well if you remove the default gallery styling
   by adding the following to your functions.php
   add_filter( 'use_default_gallery_style', '__return_false' );
*/

// @for $i from 2 through 9 {
// 	@include gallery_column( 2, $i );
// }

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}