.items-row {

	.grid {
		display: block;
	}

	&--columns {
		.grid {
			@media only screen and (min-width: $large) {
				display: flex;

				.item {
					display: block;
					margin-bottom: auto;

					.img {
						width: 100%;
						height: 0;
						padding-bottom: 100%;
						position: relative;

						&--contain img {
							object-position: center center;
						}

						img {
							position: absolute;
							width: 100%;
							
						}
					}

					&__content {
						margin: 0;
					}
				}
			}
		}

		.container>h3 {
			@media only screen and (min-width: $medium) {
				text-align: center;
			}
		}
	}

	&--rows {
		.grid {
			display: block;

			.item {
				.img {
					@media only screen and (min-width: $medium) {
						width: 250px;
						height: 250px;
					}
					@media only screen and (min-width: $large) {
						width: 320px;
						height: 320px;
					}
				}
			}
		}
	}

	.item {
		margin-bottom: 100px;

		.img {
			margin-bottom: 20px;
			width: 160px;
			height: 160px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
        mix-blend-mode: multiply;
			}

			&--cover img {
				object-fit: cover;
			}

			&--contain img {
				object-fit: contain;
				object-position: top center;
			}
		}

		h3 {
			font-weight: bold;
			margin: 0 0 40px;
		}

		@media only screen and (min-width: $smallmedium) {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;

			&__content {
				flex: 1;
				margin-left: 30px;
			}
		}
	}

	// If there are more than 3 items; smaller header font size
	&--max {
		.item h3 {
			font-size: 28px;
		}
	}
}