.grid-block-wrapper {
	position: relative;
	display: block;
	padding: 0;
	margin: 0 -6px;

	@media (max-width: 1024px) {
		& {
			box-sizing: border-box;
			scroll-snap-type: x mandatory;
			-ms-overflow-style: none;
			overflow: -moz-scrollbars-none;
			overflow: hidden;
			overflow-x: scroll;
			-ms-overflow-style: none;
			scrollbar-width: none;
			scrollbar-height: none;
			scroll-snap-type: x mandatory;
			margin: 0 -50px;
			width: calc(100% + 100px);

		}

		&::-moz-scrollbar,
		&::-webkit-scrollbar {
			width: 0px;
			display: none;
		}
	}

	@media (max-width: 767px) {
		& {
			margin: 0 -20px;
			width: calc(100% + 40px);
		}
	}

	& > .flex-row {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: flex-start;
		align-content: flex-start;

		@media (max-width: 1024px) {
			& {
				position: relative;
				margin: 0;
				margin-inline: 0 !important;
				display: flex;
		    flex-direction: row;
		    justify-content: stretch;
		    align-items: stretch;
		    align-content: stretch;
		    flex-wrap: nowrap !important;
			}
		}

		& .grid-block-item {
			position: relative;
			display: flex;
			flex-flow: row wrap;
			justify-content: stretch;
			align-items: stretch;
			align-content: stretch;
			background: transparent;
			padding: 0;
			margin: 0;
			width: 25%;

			@media (max-width: 1024px) {
				& {
					width: 400px !important;
	        max-width: 75vw !important;
	        padding: 13px !important;
	        scroll-snap-align: center;
	        flex: 0 0 400px;

	        &:first-child {
	        	padding-left: 30px !important;
	        }

	        &:last-child {
	        	padding-right: 30px !important;
	        }
				}
			}

			& .grid-block-link {
				position: relative;
				display: flex;
				flex-flow: row wrap;
				justify-content: stretch;
				align-items: flex-start;
				align-content: flex-start;
				margin: 6px;
				background: #000;
				overflow: clip;
				width: 100%;

				@media (max-width: 1024px) {
					& {
						margin: 0;
					}
				}

				& img {
					position: relative;
					width: 100%;
					height: 100%;
					display: block;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					object-fit: cover;
					object-position: center top;
					pointer-events: none;
					z-index: 1;
					transform-origin: center;
					transform: scale(1.0, 1.0);
					transition: all 600ms var(--ease-out-expo);
					aspect-ratio: 0.817;
				}

				&:after {
					position: absolute;
					display: block;
					content: '';
					left: 0;
					right: 0;
					top: 0;
					height: 100px;
					pointer-events: none;
					z-index: 2;
					width: 100%;
					background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
				}

				& .grid-block-title {
					position: absolute;
					display: flex;
					flex-flow: row nowrap;
					justify-content: stretch;
					align-items: flex-start;
					align-content: flex-start;
					z-index: 10;
					top: 0;
					left: 0;
					right: 0;

					& .grid-block-inner-title.small-headline {
						display: block;
						padding: 12px 14px;
						width: calc(100% - 42px);
						transition: all 600ms var(--ease-out-expo);
						line-height: 1.2 !important;
						font-size: 0.93rem !important;

						@media (min-width: 1025px) and (max-width: 1100px) {
							& {
								font-size: 0.83rem !important;
							}
						}
					}

					&:after {
						position: relative;
						content: '+';
						display: flex;
						flex-flow: row nowrap;
						justify-content: center;
						align-items: center;
						align-content: center;
						width: 42px;
						height: 42px;
						background: rgba(0, 0, 0, 0.75);
						transition: all 600ms var(--ease-out-expo);
						color: #fff;
						font-size: 21px;
						font-weight: 400;
						-webkit-font-smoothing: antialiased;
					}
				}

				&, &:focus {
					& img {
						transform: scale(1.0, 1.0);
					}

					& .grid-block-title {
						&:after {
							background: rgba(0, 0, 0, 0.75);
						}
					}

					&:hover, &:active {
						& img {
							transform: scale(1.05, 1.05);
						}

						& .grid-block-title {
							&:after {
								background: var(--primary-color);
							}
						}
					}
				}
			}

			@media (min-width: 1025px) {
				&:nth-child(5),
				&:nth-child(6),
				&:nth-child(7),
				&:nth-child(8),
				&:nth-child(13),
				&:nth-child(14),
				&:nth-child(15),
				&:nth-child(16) {
					align-items: flex-end;
					align-content: flex-end;

					&:after {
						top: auto;
						bottom: 0;
						background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
					}

					& .grid-block-title {
						bottom: 0;
						top: auto;
						align-items: flex-end;
						align-content: flex-end;
					}
				}
			}

		}

	}
}