article
{
	header
	{
		picture
		{
			display: block;
			width: 100%;
			margin-bottom:80px;
			img
			{
				display: block;
				width: 100%;
				border-radius: 10px;
			}
		}
		h1
		{
			color:$main-color;
			font-size: 24px;
			font-weight: 700;
			line-height: 36px; /* 150% */
			letter-spacing: 2.16px;
			margin-bottom:25px;
		}
		p
		{
			font-size: 16px;
			font-weight: 400;
			line-height: 24px; /* 150% */
			letter-spacing: 1.44px;
			margin-bottom:120px;
			max-width: 600px;
		}
	}
	#content
	{
		picture
		{
			display: block;
			margin-bottom:80px;
			img
			{
				display: block;
				width: 100%;
			}
		}
		#article-list
		{
			>div
			{
				padding-bottom:200px;
				position: relative;
				&::after
				{
					content:' ';
					width: 1px;
					height:100%;
					position: absolute;
					top:64px;
					left:34px;
					background-color: $main-color;
				}
				&:last-child
				{
					padding-bottom:50px;
					&::after
					{
						display: none;
					}
				}
				h2
				{
					color:$main-color;
					font-size: 20px;
					font-weight: 700;
					line-height: 30px; /* 150% */
					letter-spacing: 1.8px;
					margin-bottom:30px;
					display: flex;
					align-items:center;
					position: relative;
					&::before
					{
						content:' ';
						width:64px;
						height:64px;
						background-color: #fff;
						border-radius: 100%;
						border:1px solid $main-color;
					}
					&::after
					{
						content:' ';
						width:20px;
						height:20px;
						background-color: $main-color;
						position: absolute;
						border-radius: 100%;
						top:22px;
						left:22px;
					}
					span
					{
						padding-left:10%;
					}
				}
				p
				{
					padding-left:calc(64px + 10%);
					font-size: 16px;
					font-weight: 400;
					line-height: 24px; /* 150% */
					letter-spacing: 1.44px;
					color:$text-color;
				}
			}
		}

	}
	
	@media(min-width:1180px)
	{
		#content
		{
			picture
			{
				padding-right:15%;
			}
			#article-list
			{
				padding-right:110px;
			}
		}
	}
	@media(max-width:1199px)
	{
		#content
		{
			picture
			{
				padding-right:50px;
			}
			#article-list
			{
				padding-right:0px;
			}
		}
	}
	
	@media(min-width:768px)
	{
		header
		{

		}
		#content
		{
			display: flex;
			picture
			{
				min-width: calc(50% - 32px);
			}
			.article-list
			{
				min-width: calc(50% + 32px);
			}
		}
	}
	@media(max-width:767px)
	{
		#content
		{
			#article-list
			{
				>div
				{
					padding-bottom:100px;
				}
			}
			
		}
	}

	#gallery
	{
		text-align: center;
		padding-top:150px;
		padding-bottom:150px;
		h2
		{
			position: relative;
			margin-bottom:25px;
			&::after
			{
				content: ' ';
				width: 100%;
				height: 1px;
				position: absolute;
				top:50%;
				left:0px;
				background-color: #8DABC5;
			}
			span
			{
				background-color: #fff;
				padding:0 30px;
				color:$main-color;
				font-size: 24px;
				font-weight: 700;
				line-height: 36px; /* 150% */
				letter-spacing: 2.16px;
				position: relative;
				z-index: 1;
			}
		}
		p
		{
			color:$text-color;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px; /* 150% */
			letter-spacing: 1.44px;
			margin-bottom:50px;
		}
		ul
		{
			margin-bottom:50px;
			li
			{
				a
				{
					display: block;
					picture
					{
						display: block;
						width: 100%;
						margin-bottom:50px;
						transition-duration:0.5s;
						img
						{
							display: block;
							width: 100%;
							border-radius: 10px;
						}
						&:hover
						{
							opacity: .5;
						}
					}
					span
					{
						color:$text-color;
						transition-duration:0.5s;
						display: block;

						&:hover
						{
							color:$main-color;
						}
					}
				}
			}
		}
		.more
		{
			display: flex;
			justify-content:center;
			a
			{
				display: flex;
				align-items:center;
				padding:11px 48px;
				border:1px solid $main-color;
				color:#fff;
				background-color: $main-color;
				border-radius: 50px;
				transition-duration:0.5s;
				i
				{
					transition-duration:0.5s;
					margin-left: 5px;
					color:$main-color;
					width:22px;
					height:22px;
					background-color: #fff;
					border-radius: 100%;
					line-height: 22px;
					font-size:12px;
				}
				&:hover
				{
					background-color: #fff;
					color:$main-color;
					i
					{
						background-color: $main-color;
						color:#fff;
					}
				}
			}
		}
		@media(min-width:768px)
		{
			ul
			{
				display: flex;
				li
				{
					margin:0 pxp(1400,40);
					flex:1;
					&:nth-child(3n)
					{
						margin-right: 0px;
					}
					&:nth-child(3n + 1)
					{
						margin-left:0px;
					}
				}
			}
		}
		@media(max-width:767px)
		{
			ul
			{
				li
				{
					margin-bottom:30px;
					a
					{
						picture
						{
							margin-bottom:30px;
						}
					}
				}
			}
		}
	}
}