/* ===================================================================
 * LopwonSquare Main Stylesheet
 * Template Ver. 1.0.0
 * 11-04-2022
 * -----------------------------------------------------------------*/

 html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }  html, body { font-family: "Arial","Microsoft JhengHei",Apple LiGothic Medium,sans-serif; margin: 0; padding: 0; font-size: 62.5%; font-weight: normal; line-height: 1.2; word-wrap: break-word; box-sizing: border-box; background-color: var(--color-black); }  a { font-size: 2em; color: var(--color-a); text-decoration: none; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }  a:hover { color: var(--color-white); outline-width: 0; }  :root { --color-black : #000000; --color-1 : #121212; --color-2 : #232323; --color-a : #aaaaaa; --color-white : #ffffff; }  article { display: flex; flex-wrap: wrap; }  header, footer, .Lopwon_Square-item { position: relative; margin: 0.25rem; width: calc(16.66667% - 0.5rem); background-color: var(--color-1); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }  header:hover, footer:hover, .Lopwon_Square-item:hover { background-color: var(--color-2); }  .Lopwon_Square-title, .Lopwon_Square-blog, .Lopwon_Square-by { position: absolute; top: 0; left: 0; padding: 0.5rem; width: calc(100% - 1rem); text-align: center; }  .Lopwon_Square-title { display: flex; justify-content: center; align-items: center; height: calc(100% - 1rem); font-size: 3em; color: var(--color-white); }  .Lopwon_Square-blog { top: 33.33333%; }  .Lopwon_Square-by { top: calc(100% - 3rem); }  header:before, footer:before, .Lopwon_Square-photos { position: relative; padding-top: calc(100% * 1/1); width: 100%; height: 0; }  header:before, footer:before { display: block; content: ''; }  .Lopwon_Square-photos img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; overflow: hidden; }  .Lopwon_Square-description { display: flex; position: absolute; top: 0; left: 0; padding: 0.5rem; width: calc(100% - 1rem); height: calc(100% - 1rem); font-size: 2em; color: var(--color-white); align-items: center; justify-content: center; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; overflow: hidden; opacity: 0; z-index: 1; }  .Lopwon_Square-description:after { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(0 0 0 / 75%); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 0; z-index: -1; }  .Lopwon_Square-item:hover .Lopwon_Square-description, .Lopwon_Square-item:hover .Lopwon_Square-description:after { opacity: 1; }  @media screen and (max-width: 960px) {  header, footer, .Lopwon_Square-item { width: calc(20% - 0.5rem);  }  @media screen and (max-width: 800px) {  header, footer, .Lopwon_Square-item { width: calc(25% - 0.5rem);  }  }  @media screen and (max-width: 640px) {  header, footer, .Lopwon_Square-item { width: calc(33.33333% - 0.5rem);  }  }  @media screen and (max-width: 480px) {  header, footer, .Lopwon_Square-item { width: calc(50% - 0.5rem);  }  }