.archive-shape { position: relative; width: 100vw; min-height: var(--archive-shape-height)dvh; min-height: calc(var(--archive-shape-height) * 1dvh); background: calc(var(--archive-shape-height) * 1vh); background-position: center; background-repeat: no-repeat; background-size: cover; background-image: var(--archive-shape-image); padding-top: 100px; display: flex; z-index: 0; opacity: 1; align-items: end; justify-content: center; } .archive-shape .overlay { position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, var(--archive-background)); } .archive-h { color: var(--archive-title); text-transform: uppercase; z-index: 99; } .archive-main {  position: relative; box-sizing: border-box;  width: 100%; background: var(--archive-background); } .archive-main-block { position: relative; max-width: 1200px;  padding: 10px 10px 10px 10px;  box-sizing: border-box;  width: 100%; margin: auto; } .archive-list { position: relative; display: grid;  grid-template-columns: repeat(auto-fill, minmax(calc(var(--archive-block-width) * 1px), 1fr));  gap: 20px;  width: 100%; } .archive-item { position: relative; background-position: center; background-repeat: no-repeat; height: 100%; padding-bottom: 100%;  overflow: hidden; display: flex; justify-content: center; align-items: center; cursor: pointer; gap: 0px; opacity: 1;  transition: background-image 0.5s ease-in-out, background-size 0.5s ease-in-out; border-style: var(--archive-block-border-style); border-color: var(--archive-block-border); border-width: var(--archive-block-border-width); border-radius: var(--archive-block-border-radius); } .full-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0;  transition: opacity 0.5s ease-in-out;  } .full-image-overlay.loaded { opacity: 1;  } .archive-item .item-title { position: relative; color: var(--archive-block-text); text-align: center; z-index: 2; background-color: var(--archive-block-title); padding: 10px; margin: 0; font-size: var(--archive-block-size);  width: 100%;  display: inline-block;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archive-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--background-color),1);  z-index: 1;  } .archive-item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3;  text-decoration: none;  } @media (max-width: 768px) { .archive-item { flex-basis: 100%;  padding-bottom: 100%;  } } @keyframes fadeInBg { from { opacity: 0; } to { opacity: var(--end-opacity, 1); } } .gb-no-posts-message { display: block; } #isopentime { visibility: hidden; } #isopentime.activ { visibility: visible; } #isopentime div { display: flex; transition: all 500ms ease-in-out; opacity: 0.70; white-space: nowrap; } #isopentime div.activ { display: flex; transform: scale(1.05); opacity: 1; } #isopentime p { padding: 0; margin: 0; }