.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%;

						img {
							width: 100%;
						}

						&--cover {
							height: 0;
							padding-bottom: 100%;
							position: relative;

							img {
								position: absolute;
							}
						}
					}

					&__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;

						&--cover {
							height: 250px;
						}
					}
					@media only screen and (min-width: $large) {
						width: 320px;

						&--cover {
							height: 320px;
						}
					}
				}
			}
		}
	}

	.item {
		margin-bottom: 100px;

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

			&--cover {
				height: 160px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}

		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;
			}
		}
	}
}