/*=======  Offers  =======*/
.offers-area {
	.offer-boxes-loop {
		.offer-box {
			margin-bottom: 60px;
			.offer-desc {
				background-color: $white;
				padding: 65px 60px 60px;
				margin-left: 60px;
				margin-right: 60px;
				border-top: 6px solid $primary-color;
				margin-top: -75px;
				z-index: 2;
				position: relative;
				@media #{$md} {
					margin-left: 30px;
					margin-right: 30px;
					padding: 65px 40px 60px;
				}
				@media #{$lsm} {
					margin-left: 20px;
					margin-right: 20px;
					padding: 40px 30px 30px;
					margin-top: -50px;
				}
				@media #{$xsm} {
					margin-left: 15px;
					margin-right: 15px;
					padding: 40px 20px 30px;
					margin-top: -30px;
				}
				@media #{$tiny} {
					margin-left: 5px;
					margin-right: 5px;
					padding: 30px 15px 20px;
				}
				.main-btn {
					box-shadow: none;
					margin-top: 30px;
					@media #{$xsm} {
						padding: 0 35px;
						line-height: 40px;
					}
				}

				.title-wrap {
					border-bottom: 2px solid #ececec;
					margin-bottom: 40px;
					padding-bottom: 40px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title {
						.room-cat {
							text-transform: uppercase;
							padding-bottom: 10px;
							font-size: 14px;
							font-weight: 700;
							letter-spacing: 3px;
							@media #{$xsm} {
								letter-spacing: 2px;
							}
						}
						h2 {
							font-size: 48px;
							letter-spacing: -1px;
							@media #{$lsm} {
								font-size: 32px;
							}
							@media #{$xsm} {
								font-size: 24px;
							}
						}
					}

					.price {
						font-size: 40px;
						color: $primary-color;
						font-weight: 700;
						text-align: right;
						line-height: 1;
						@media #{$md} {
							font-size: 32px;
						}
						@media #{$lsm} {
							font-size: 28px;
						}
						@media #{$xsm} {
							font-size: 20px;
						}
						span {
							font-size: 16px;
						}
					}
				}

				.offer-text,
				.offer-feature {
					font-family: $roboto;
				}

				.offer-feature {
					@media #{$md} {
						margin-top: 50px;
					}
					@media #{$sm} {
						margin-top: 50px;
					}
					li {
						width: 50%;
						float: left;
						margin-bottom: 20px;
						padding-left: 40px;
						position: relative;
						i {
							color: $primary-color;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}
			}
		}
	}
}

/*=======  Gallery  =======*/
.gallery-loop {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;

	@media #{$sm} {
		grid-gap: 10px;
	}

	@media #{$xsm} {
		grid-gap: 10px;
	}

	.single-gallery-image {
		overflow: hidden;
		img {
			@include transition(0.4s);
		}
		&:hover {
			img {
				transform: scale(1.1);
			}
		}
	}

	.single-gallery-image:nth-child(3),
	.single-gallery-image:nth-child(6),
	.single-gallery-image:nth-child(9),
	.single-gallery-image:nth-child(12) {
		grid-column: 1 / 3;
	}

	.single-gallery-image:nth-child(3) {
		grid-row: 2 / 3;
	}

	.single-gallery-image:nth-child(6) {
		grid-row: 4 / 5;
	}

	.single-gallery-image:nth-child(9) {
		grid-row: 6 / 7;
	}

	.single-gallery-image:nth-child(12) {
		grid-row: 8 / 9;
	}
}