@list-image-height: 75px;

.gallery {
	margin-left: -(@gutter * 2);
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;

	.image {
		margin-left: (@gutter * 2);
		margin-bottom: (@gutter * 2);
		min-width: 580px;

		&.list {
			flex: 1;
			width: 100%;
			min-width: 100%;
			margin: 0 (@gutter * 2);
			position: relative;
			border-bottom: 1px solid transparent;
			
			&.selected {
				box-shadow: none;
				border: 1px solid transparent;
				background-color: fade(@primary, 5%);
			}

			.media-4-3 {
				max-width: @list-image-height;
				min-width: @list-image-height;
				padding-top: calc(@list-image-height ~"*" 0.75);
				display: inline-block;

				img {
					display: block;
				}
			}

			.image-title {
				display: inline-block;
				vertical-align: top;
				padding-left: (@gutter * 2);
    			padding-top: round((@list-image-height / 2) - (@base-font-size * 1.6));
			}

			.image-controls {
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				border: none;

				&>div {
					display: inline-block;
					
					.button {
						margin-right: (@gutter * 2);
					}
				}
			}

			.palette {
				display: none;
			}
		}

		&>.image {
			margin-left: 0;
			margin-bottom: 0;
		}
	}
}