.marlon-posts-river{

	@gap: 2px;

	position: relative;

	padding: 1em;

	background-color: var(--header-background-color);

	.m1-sm({
		padding: @gap 50px;
	});

	.m1-md({
		padding: @gap e('calc(var(--ui-size) + @{gap})');
		//padding: 0 e('calc( var(--ui-size) - 5px)');
	});

	.river{
		//.clearfix();
		display: block;
		list-style: none;
		position: relative;
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
	}

	.grid-sizer,
	.river-item{
		display: block;
		position: relative;
		float: left;
		margin-bottom: 0;
		overflow: hidden;
		height: auto;
		width: 100%;

		//background-color: #f03;

		//box-shadow: inset 0 0 0 2px #f03;

		&::after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow: inset 0 0 0 @gap var(--header-background-color);
			z-index: 5;
			pointer-events: none;
		}

		.m1-sm({
			width: 100% / 2;
		});

		.m1-md({
			width: 100% / 3;
		});

		.m1-lg({
			width: 100% / 4;
		});

		.m1-xl({
			width: 100% / 5;
		});

		&.river-item--post-status{
			background-color: #fff;
			color: #000;
			.river-content{
				padding: 0 1.5em;
				padding-top: 1em;
			}
			.subcontent & p{
				color: #000;
				margin-top: 0;
				margin-bottom: 0;
			}
			a{
				color: #999;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #6b36ed;
				}
			}
			.river-footer{
				text-align: left;
				background-color: inherit;
			}
			.river-card::before{
				padding-top: 50%;
			}
		}

		&.river-item--post-reply{
			background-color: #fff;
			color: #000;
			.river-content{
				padding: 0 1.5em;
				padding-top: 1em;
			}
			.subcontent & p{
				color: #000;
				margin-top: 0;
				margin-bottom: 0;
			}
			a{
				color: #999;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #6b36ed;
				}
			}
			.river-footer{
				background-color: inherit;
				text-align: left;
			}
			.river-card::before{
				padding-top: 50%;
			}
			.river-icon{
				top: 0;
				width: 130px;
				opacity: 0.1;
			}
		}

		&.river-item--post-repost{
			background-color: #fff;
			color: #000;
			.river-content{
				padding: 0 1.5em;
				padding-top: 1em;
			}
			.subcontent & p{
				color: #000;
				margin-top: 0;
				margin-bottom: 0;
			}
			a{
				color: #999;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #6b36ed;
				}
			}
			.river-footer{
				background-color: inherit;
			}
			.river-card::before{
				padding-top: 50%;
			}
			.river-icon{
				top: 0;
				width: 140px;
				opacity: 0.1;
			}
		}

		&.river-item--post-bookmark{
			background-color: #eaf5ff;
			color: #1e90ff;
			.river-icon{
				width: 13px;
				path{
					fill: #1e90ff;
				}
			}
			.river-content{
				position: absolute;
				top: 50%;
				padding: 2em;
				.translateY(-50%);
			}
			.subcontent & p{
				color: #1e90ff;
				margin-top: 0;
				margin-bottom: 0;
				&.highlight{
					line-height: 1;
					font-size: 2em;
					font-weight: bold;
					color: #002951;
					a{
						color: inherit;
					}
				}
			}
			a{
				color: #1e90ff;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #002951;
				}
			}
			.river-card::before{
				padding-top: 50%;
			}
		}

		&.river-item--post-like{
			background-color: #fef1f4;
			color: #ed365b;
			.river-icon{
				path{
					fill: #ed365b;
				}
			}
			.river-content{
				position: absolute;
				top: 50%;
				padding: 2em;
				.translateY(-50%);
			}
			.subcontent & p{
				color: #ed365b;
				margin-top: 0;
				margin-bottom: 0;
				&.highlight{
					line-height: 1;
					font-size: 2em;
					font-weight: bold;
					color: #500716;
					a{
						color: inherit;
					}
				}
			}
			a{
				color: #ed365b;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #500716;
				}
			}
			.river-card::before{
				padding-top: 50%;
			}
		}

		&.river-item--post-favorite{
			background-color: #fefcf1;
			color: #eda436;
			.river-icon{
				path{
					fill: #eda436;
				}
			}
			.river-content{
				position: absolute;
				top: 50%;
				padding: 2em;
				.translateY(-50%);
			}
			.subcontent & p{
				color: #eda436;
				margin-top: 0;
				margin-bottom: 0;
				&.highlight{
					line-height: 1;
					font-size: 2em;
					font-weight: bold;
					color: #503d07;
					a{
						color: inherit;
					}
				}
			}
			a{
				color: #eda436;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #503d07;
				}
			}
			.river-card::before{
				padding-top: 50%;
			}
		}

		&.river-item--post-image{
			img{
				position: absolute;
				max-width: none;
				min-width: 1000%;
				min-height: 1000%;
				height: auto;
				width: auto;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%) scale(.1);
			}
		}

		&.river-item--post-gallery{
			img{
				position: absolute;
				max-width: none;
				min-width: 1000%;
				min-height: 1000%;
				height: auto;
				width: auto;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%) scale(.1);
			}
			.river-icon{
				path{
					fill: #fff;
				}
				&::after{
					display: none;
				}
			}
		}

		&.river-item--post-quote{
			background-color: #ededed;
			color: #000;

			.m1-md({
				width: 100% / 3 * 2;
			});
			.m1-lg({
				width: 100% / 4 * 2;
			});
			.m1-xl({
				width: 100% / 5 * 2;
			});

			.river-content{
				position: absolute;
				top: 50%;
				padding: 2em;
				.translateY(-50%);
			}
			.subcontent & p{
				color: #000;
				margin-top: 0;
				margin-bottom: 0;

					margin-bottom: 0;
					padding: 30px;
					font-size: 2.5em;
					font-weight: bold;
					line-height: 1;
			}
			a{
				color: #999;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #6b36ed;
				}
			}

			blockquote{
				position: relative;
				margin: 0;
				&::before,
				&::after{
					font-size: 10em;
					position: absolute;
					display: block;
					color: rgba(0,0,0,0.1);
					font-family: serif;
					font-weight: bold;
				}
				&::before {
					content: "“";
					top: -67px;
					left: 20px;
				}
				&::after {
					content: "”";
					bottom: -97px;
					right: 20px;
				}
			}
			footer{
				padding: 20px 30px;
				padding-top: 0;
				margin-top: -30px;
				text-align: right;
			}
			cite{
				color: grey;
				color: var(--global-headline-color);
				&::before{
					content: "— ";
				}
			}

			.river-footer{
				text-align: left;
				background-color: inherit;
			}

			.river-card::before{
				padding-top: 50%;
			}
		}

		&.river-item--post-audio{
			background-color: #222;
			.river-content{
				position: absolute;
				top: 50%;
				width: 100%;
				padding: @gap;
				.translateY(-50%);
				z-index: 5;
			}
			a{
				color: #999;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #fff;
				}
			}
			.mejs-container, .mejs-embed, .mejs-container .mejs-controls{
				background: transparent;
			}
			.river-footer{
				z-index: 6;
				text-align: left;
			}
			.river-icon{
				top: 1em;
				color: #000;
				width: 80px;
				&::after{
					display: none;
				}
			}
			.river-card::before{
				padding-top: 50%;
			}
		}

		&.river-item--post-video{
			background-color: #000;

			.m1-md({
				width: 100% / 3 * 2;
			});
			.m1-lg({
				width: 100% / 4 * 2;
			});
			.m1-xl({
				width: 100% / 5 * 2;
			});

			.river-content{
				//position: absolute;
				//top: 50%;
				width: 100%;
				height: 100%;
				//padding: @gap;
				//.translateY(-50%);
				z-index: 5;
				iframe{
					height: 100%;
				}
			}
			a{
				color: #999;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #fff;
				}
			}
			/*
			.mejs-container, .mejs-embed, .mejs-container .mejs-controls{
				background: transparent;
			}
			*/
			.river-footer{
				z-index: 6;
				text-align: left;
				display: none;
			}
			.river-card::before{
				padding-top: 50%;
			}
		}

		&.river-item--post-aside{
			background-color: #fff;
			color: #000;
			opacity: 0.8;
			.river-content{
				padding: 0 1.5em;
				padding-top: 1em;
			}
			.subcontent & p{
				color: #000;
				margin-top: 0;
				margin-bottom: 0;
			}
			a{
				color: #999;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #000;
				}
			}
			.river-footer{
				text-align: left;
				background-color: inherit;
			}
			.river-icon{
				color: #888;
				top: 0;
				width: 170px;
				opacity: 0.1;
			}
			.river-card::before{
				padding-top: 50%;
			}
		}

		.river-footer{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: inherit;
			background-color: transparent;
			padding: 1em 2em;
			//text-transform: uppercase;
			font-size: 80%;
			text-align: right;
			z-index: 1;
		}

		.river-meta{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: transparent;
			padding: 1em 2em;
			font-size: 80%;
			text-align: left;
			z-index: 2;
			pointer-events: none;
			color: #999;
		}

		&.river-cover{
			background-color: #fff;
			.river-content{
				position: absolute;
				top: 50%;
				padding: 2em;
				width: 100%;
				.translateY(-50%);
				z-index: 5;
			}
			.subcontent & p{
				margin-top: 0;
				margin-bottom: 0;
				line-height: 1;
				font-size: 2em;
				font-weight: bold;
				color: #000;
				text-align: center;
				a{
					color: inherit;
				}
			}
			a{
				color: #000;
				text-decoration: none;
				&:hover,
				&:focus,
				&:active{
					color: #000;
				}
			}
			.river-count{
				position: absolute;
				top: 50%;
				width: 100%;
				.translateY(-50%);
				z-index: 1;
				font-size: 130px;
				font-weight: bold;
				color: rgba(0,0,0,0.05);
				pointer-events: none;
				text-align: center;
			}
		}
	}

	.river-card{
		background-color: inherit;
		position: relative;
		overflow: hidden;
		&::before{
			content: "";
			display: block;
			padding-top: 100%;
		}
		.river-card-content{
			background-color: inherit;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}
	}

	.river-icon{
		pointer-events: none;
		position: absolute;
		top: 2em;
		right: 2em;
		width: 20px;
		height: auto;
		z-index: 2;
		//opacity: 0.1;
		&::after{
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			.translate(-50%,-50%);
			width: 120px;
			height: 120px;
			border-radius: 50%;
			background-color: #fff;
			opacity: 0.2;
			z-index: -1;
		}
	}

}
