Conversation Grid

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.conversation-grid-wrap {
	margin-top: 5rem;
	margin-bottom: 5rem;

	@include media-breakpoint-down(md) {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}
	h2 {
		max-width: 64rem;
		margin: 0 auto 3.5rem auto;

		@include media-breakpoint-down(md) {
			margin-bottom: 1.5rem;
		}
	}
}

.conversation-grid {
	display: flex;
	padding-right: 4rem;

	.item {
		width: 22.5rem;
		margin-bottom: 0.875rem;
		position: relative;
		background: var(--theme-colour);
		
		&:first-child {
			height: 20rem;
		}
		&:last-child {
			height: 13.5rem;
			margin-bottom: 0;
		}
		* {
			transition: all 0.3s ease-in-out;
		}
		&.image {
			overflow: hidden;

			img {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.5s ease-in-out;
			}	
		}
		&.text {
			padding: 0.5rem 1.75rem;
			display: flex;
			align-items: center;
		}
		&.social {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 1.25rem;
			text-align: center;
			justify-content: center;

			svg {
				margin-bottom: 0.5rem;
			}
		}
		&.theme-tiffany-blue,
		&.theme-blue,
		&.theme-pear,
		&.theme-green {
			* {
				color: $red;
			}
		}
		&.theme-pink,
		&.theme-purple {
			* {
				color: $white;
			}
		}
		&.theme-apricot,
		&.theme-orange {
			* {
				color: $white;
			}
		}
	}
	a.item {
		&:hover {
			&.image {
				img {
					transform: scale(1.05);
				}
			}
			&.text,
			&.social {
				background: $red !important;

				* {
					color: $white !important;
				}
			}
		}
	}
}

.conversation-grid-col {
	margin-right: 0.875rem;

	a {
		display: block;
	}
	&:first-child {
		margin-left: 10rem;

		@include media-breakpoint-down(md) {
			margin-left: 4rem;
		}
		@include media-breakpoint-down(xs) {
			margin-left: 1rem;
		}
	}
	&:nth-child(even) {
		.item {
			&:first-child {
				height: 13.5rem;
			}
			&:last-child {
				height: 20rem;
			}
		}
	}
}

.conversation-grid-scroll {
	overflow: auto;
	display: flex;
	-ms-overflow-style: none;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}