:root {
  --item-gutter: 5px;
}

.l-wrapper{padding-top: 0;}
.page-title{padding-bottom: 0;}

/* ============================================================
classic-index
============================================================ */
.collection{
	margin: 0 calc(var(--item-gutter) / 2 * -1);
}

.collection-item{
	flex: 0 0 50%;
	padding: 0 calc(var(--item-gutter) / 2);
}

.collection-item a{width: 100%;display: inline-block;}

.collection-item:nth-child(2) ~ .collection-item{
	margin-top: 1em;
}

.collection-item-inner{
	position: relative;
}

.collection-item-img{
	position: relative;
	background-color: #fff;
}

.collection-item-img::before{
	display: block;
	content: '';
	padding-top: 181%;
}

.collection-item-title{
	margin-top: 0.5em;
	color: #fff;
	text-align: center;
	font-size: 1.35rem;
	font-family: var(--font-family-tit);
	letter-spacing: 0;
}

@media (min-width: 992px){
  .card-img::before{padding-top: 31%;}
  .collection-item{flex: 0 0 25%;}
  .collection-item-img::before{display: none;}
  .collection-item-img{height: calc(100vh - var(--header-h) - 4.5rem);}
  .collection-item-title{font-size: 2rem;}
  .collection-item:nth-child(2) ~ .collection-item{margin-top: 0;}
  
} 

@media (min-width: 1200px){
  .btn-back{transition: 0.3s;}
  .btn-back:hover{opacity: 0.6;}
}


@media (hover: hover) {
  .collection-item .collection-item-img{opacity: 0.6;transition: 0.5s;}
  .collection-item.active .collection-item-img{opacity: 1;}
}


.card-img{box-shadow: 10px 10px 20px rgba(0,5,27,0.8);}