.row-box {
		display: flex;
		gap: 25px;
		margin: 25px;
	}

	.box {
		flex: 1;

		.block-image {
			overflow: hidden;
			width: 100%;
			max-width: 100%;
			max-height: 100%;
		
			img {
				width: 100%;
				will-change: transform;
				transition: transform 500ms ease-out;
			}
			

		
		}

		&:hover {
			.block-image {
				img {
					transform: scale(1.2);
				}
			}
		}

		h4, .h4 {
			font-size: 24px;
			line-height: 90%;
			font-weight: 700;
			letter-spacing: .52px;
			text-transform: uppercase;
			font-style: normal;
			color: #1C1C1C !important;
		}
		
	}

	.row-image {
		display: flex;
		margin-bottom: 32px;
	}

	.box-text {
		flex: 1 1 50%; 
		width: 0;
		position: relative;
	}

	.box-image {
		flex: 1 1 50%; 
		width: 0;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #000;
	}

	.box-text {
		/*background-color: #000000;*/
		display: flex;
		flex-direction: column;
		padding: 32px;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 32px 10%;


		.box-heading {
			font-size: 18px;
			font-weight: 300;
			text-transform: uppercase;
			color: #ffffff;
			width: 100%;
		}

		.box-title {
			font-size: 60px;
			line-height: 54px;
			font-weight: 700;
			letter-spacing: calc(60px *.02);
			text-transform: uppercase;
			font-style: normal;
			color: #ffffff;
			margin-top: 12px;
		}

		.box-p {
			font-size: 16px;
			line-height: 1.2;
			letter-spacing: 0.1em;
			font-weight: 500;
			font-style: normal;
			color: #ffffff;
			margin: 18px 0;
		}
			
			
	}

	.row-image {

		img {
			width: 100%;
		}
	}

	.row-image-full-width {
		display: flex;
		margin-bottom: 32px;
		position: relative;
		z-index: 1;

		.box-text {
			z-index: 1;
			background-color: transparent;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 50%;
			z-index: 1;
			padding: 32px;
			padding-right: 20%;
			background: linear-gradient(to right, black, rgba(255, 0, 0, 0));
		}
	}

	.action-button {
		box-sizing: border-box;
		background-color: rgb(255, 255, 255);
		display: flex;
		align-items: center;
		height: 54px;
		letter-spacing: normal;
		line-height: 26px;
		margin-top: 12px;
		position: relative;
		-webkit-tap-highlight-color: rgba(28, 28, 2);
		font-size: 18px;
		padding: 18px 20px 18px 20px;
		text-transform: uppercase;
		color: #1C1C1C;
		border-width: 1px;
		border-radius: 5px;
		background-color: #fff;
		border-color: #fff;
		text-decoration: none;
		text-align: center;
		font-weight: 500;
		cursor: pointer;
	}

	.box-background-image {
		z-index: 0;
		width: 100%;

		img {
			width: 100%;
		}
	}

	.full-image {
		flex: 1;
		img {
			width: 100%;
		}
	}

	.text-center {
		text-align: center;
	}

	.text-left {
		text-align: left;
	}

	.box-text-on-top {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 32px;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.box-title-small {
		font-size: 28px;
		line-height: 25px;
		font-weight: 700;
		text-transform: uppercase;
		font-style: normal;
		color: #fff;
	}

	.action-link {
		color: #fff;
		font-weight: 500;
		font-size: 18px;
		margin-top: 12px;
		cursor: pointer;
		text-decoration: underline;

		&:hover {
			color: #fff;
			text-decoration: none;
		}
	}

	.box-image-grow {
		flex: 1 1 50%; 
		width: 0;
		position: relative;
		overflow: hidden;
		width: 100%;
		max-width: 100%;
		max-height: 100%;
		
		img {
			width: 100%;
			will-change: transform;
			transition: transform 500ms ease-out;
		}



		&:hover {

				img {
					transform: scale(1.2);
				}
		}
	}

	@media only screen and (max-width: 1080px) {
		.box-text {
			padding: 18px;

			.box-heading {
				font-size: 16px;
				line-height: 1;
			}

			.box-title {
				font-size: 36px;
				margin: 12px 0;
				line-height: 1;
			}

			.box-p {
				font-size: 14px;
				line-height: 1.1;
			}
		}


		.box-title-small {
			font-size: 23px;
		}
	}

	@media only screen and (max-width: 760px) {

		.row-box {
			flex-wrap: wrap;
			margin: 25px 0;
			gap: 25px;
		}

		.box {
			width: calc(50% - 25px);
			min-width: calc(50% - 25px);
		}

		.row-image {
			flex-direction: column;
		}

		.box-text {
			padding: 32px;
			width: 100%;
		}

		.box-image {
			width: 100%;
			width: 100%;
			padding: 0% 10% 0;
		}

		.only-image .box-image {
			padding: 0;
		}

		.row-image-full-width {
			.box-text {
				width: 70%;
				align-items: flex-start;
				justify-content: flex-start;
			}
		}
	}

	@media only screen and (max-width: 760px) {
		.row-image-full-width {
			.box-text {
				width: 100%;
			}
		}
	}