.items{
	padding-bottom: 7.5rem;
	.wrapper{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.item{
		width: calc(100%/3 - 1px);	
		.img{
			img{
				width: 100%;
			}
		}
		.item-block{
			margin-right: 25%;
			margin-top: -120px;
			position: relative;
			z-index: 1;
			@media screen and (max-width: 1200px){
				margin-right: 15%;
			}
			@include br1{
				margin-right: 7%;
			}
		}
		@include br2{
			width: 100%;
		}
		.title{
			background: rgba(0,0,0,.8);
			font: 34px/35px $HL;
			color: #ffffff;
			padding: 25px 4rem;
			@media screen and (max-width: 1200px){
				padding: 25px 2rem;
			}
		}
		.content{
			background: rgba(255,255,255,.8);
			padding-top: 25px;
			div{
				padding: 0 4rem;
				@media screen and (max-width: 1200px){
					padding: 0 2rem;
				}
				@include br1{
					padding: 0 1.5rem;
				}
				a{
					text-decoration: underline;
					color: #54afdc;
					&:hover{
						color: #df4f00;
					}
				}
			}
			.details{
				margin-top: 4rem;
				text-align: right;
				display: block;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: #41a0b2;
				text-decoration: underline;
				.arrow{
					width: 48px;
					height: 48px;
					background-color: #41a0b2;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 2.8rem;
					margin-left: 10px;
				}
				&:hover{
					color: #df4f00;
					.arrow{
						background-color: #df4f00;
					}
				}
			}
		}
	}
	&.items1{
		background: url($img_dir + 'items1.jpg') no-repeat center bottom;
		background-size: cover;
	}
	&.items2{
		background: url($img_dir + 'items2.jpg') no-repeat center bottom;
		background-size: cover;
		.item{
			&:last-child{
				.content{
					padding-bottom: 25px;
				}
			}
		}
	}
}