/* --------------------------------------------------
Collection
-------------------------------------------------- */
body #wrapper #content h3 { margin: 0 0 25px; }
body #wrapper #content .collection-list { min-width: 235px; width: 62.6%; margin: 0 auto; }
body #wrapper #content .collection-list .collection-single { position: relative; margin: 0 0 15px; }
body #wrapper #content .collection-list .collection-single .imagearea { padding: 110% 0 0; position: relative; }
body #wrapper #content .collection-list .collection-single h4 { font-size: 7.2rem; letter-spacing: .05em; color: #fff; position: absolute; top: 50%; left: 0; right: 0; text-align: center; transform: translate(0, -50%); }
body #wrapper #content .collection-list .collection-single a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; }

@media screen and (min-width: 768px) { body #wrapper #content h3 { margin: 0 0 90px; }
  body #wrapper #content .collection-list { max-width: 90%; width: 1000px; display: flex; justify-content: space-between; flex-wrap: wrap; }
  body #wrapper #content .collection-list .collection-single { width: 47%; margin: 0 0 55px; }
  body #wrapper #content .collection-list .collection-single::after { display: block; content: ""; background: #fff; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: opacity .7s ease 0s; }
  body #wrapper #content .collection-list .collection-single:hover::after { opacity: 0 !important; pointer-events: none; }
  body #wrapper #content .collection-list.hover .collection-single::after { opacity: .7; pointer-events: auto; } }