/* --------------------------------------------------
Blog Single
-------------------------------------------------- */
body #wrapper #content h3 { margin: 0 0 17px; }
body #wrapper #content .tag { width: 139px; height: 30px; line-height: 30px; background: #040000; color: #fff; text-align: center; font-size: 5rem; letter-spacing: .05em; margin: 0 auto 30px; }
body #wrapper #content .styles-list { min-width: 285px; width: 76%; margin: 0 auto 30px; display: flex; justify-content: space-between; flex-wrap: wrap; }
body #wrapper #content .styles-list .styles-single { width: 47.4%; margin: 0 0 15px; position: relative; }
body #wrapper #content .styles-list .styles-single .inner { position: relative; padding: 113.7% 0 0; }
body #wrapper #content .styles-list .styles-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 64px; }
  body #wrapper #content .tag { width: 328px; height: 70px; line-height: 70px; font-size: 6.5rem; margin: 0 auto 60px; }
  body #wrapper #content .styles-list { max-width: 90%; width: 1005px; margin: 0 auto 45px; justify-content: flex-start; }
  body #wrapper #content .styles-list .styles-single { width: 23.4%; margin: 0 1.6% 20px 0; }
  body #wrapper #content .styles-list .styles-single:nth-child(4n) { margin: 0 0 20px; }
  body #wrapper #content .styles-list .styles-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 .styles-list .styles-single:hover::after { opacity: 0 !important; pointer-events: none; }
  body #wrapper #content .styles-list.hover .styles-single::after { opacity: .7; pointer-events: auto; } }