#content
{
  padding-top:88px;
  padding-bottom:88px;
  h2
  {
    font-size: 24px;
    line-height: 35px; /* 145.833% */
    letter-spacing: 0.96px;
    margin-bottom: 24px;
  }
  p
  {
    margin-bottom: 24px;
  }
}

article
{
  padding-bottom:98px;
  .article-list
	{
		article
		{
      border:1px solid $main-color;
			background-color: #fff;
			
			margin-bottom:8px;
			picture
			{
				display: block;
				margin-bottom:32px;
				img
				{
					max-width: 100%;
					margin:0 auto;
					display: block;
				}
			}
			h3
			{
        text-align: center;
				font-size: 24px;
				line-height: 36px; /* 150% */
				letter-spacing: 0.96px;
				margin-bottom: 16px;
				a
				{
					color:$text-color;
					transition-duration:.5s;
					&:hover
					{
						color:$main-color;
					}
				}
			}

		}
	}
  @media(min-width:768px)
  {
    .article-list
		{
			display: flex;
			flex-wrap: wrap;
			article
			{
				padding:56px;
				margin:0 4px 8px 4px;
				width: calc((100% - 16px) / 3);
				background:#fff;
				&:nth-child(3n)
				{
					margin-right: 0;
				}
				&:nth-child(3n + 1)
				{
					margin-left: 0;
				}
			}
		}
  }
  @media(max-width:767px)
  {
    .article-list
		{
			article
			{
				padding:32px 16px;
			}
		}
  }
}