:root{--hgrid-gap: 2px;--image-ratio: 1/1}.hgrid{display:flex;flex-direction:column;gap:var(--hgrid-gap);margin:2rem 0}.hgrid-line{position:relative;width:100%}.hgrid-line:before{content:"";display:block;padding-bottom:100%}.hgrid-line-1:before{padding-bottom:100%}.hgrid-line-2:before{padding-bottom:50%}.hgrid-line-3:before{padding-bottom:33.33333333333333333333333%;padding-bottom:calc(calc(100% - calc(var(--hgrid-gap)*2))/3)}.hgrid-line-4:before{padding-bottom:25%}.hgrid-group{display:flex;gap:var(--hgrid-gap);position:absolute;inset:0}.hgrid-item{flex-grow:1;flex:1;display:flex;align-items:center;justify-content:center;background-color:#e0e0e0;position:relative;width:100%}.hgrid-item:before{content:"";display:block;padding-bottom:100%}.hgrid .hgrid-line{font-size:1em}.hgrid .hgrid-line.hgrid-line-1 .hgrid-item{font-size:3em}.hgrid .hgrid-line.hgrid-line-2 .hgrid-item{font-size:1.5em}.hgrid .hgrid-line.hgrid-line-3 .hgrid-item{font-size:1em}.hgrid .hgrid-line.hgrid-line-4 .hgrid-item{font-size:.75em}.hgrid-split{display:flex;flex-direction:column;background-color:transparent;position:absolute;top:0;left:0;height:100%;width:100%;transition:all .25s;text-decoration:none}.hgrid-split:hover{opacity:.95;transition:all .25s}.hgrid-split .hgrid-item-head,.hgrid-split .hgrid-item-body{flex:1}.hgrid-split .hgrid-item-head{background-color:#f5f5f5;position:relative;overflow:hidden}.hgrid-split .hgrid-item-body{overflow:hidden;border-top:none;display:flex;flex-direction:column;justify-content:center;padding:1.5rem;transition:background-color .3s ease}.hgrid-split:hover .hgrid-item-body{background-color:#ffffffe6!important}.hgrid-split:hover .hgrid-item-body .hgrid-item-body-tag,.hgrid-split:hover .hgrid-item-body .hgrid-item-body-author,.hgrid-split:hover .hgrid-item-body .hgrid-item-body-title,.hgrid-split:hover .hgrid-item-body .hgrid-item-body-abstract{color:#333!important}.image-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.image-container img{width:100%;height:100%;object-fit:cover;object-position:center;aspect-ratio:var(--image-ratio);transition:all .25s}.hgrid-split:hover .image-container img{transform:scale(1.05);opacity:.9;transition:all .25s}.hgrid-split .hgrid-item-body .hgrid-item-body-tag{font-family:var(--font-alt);font-size:.75em;text-transform:uppercase;margin-bottom:1em;color:#ffffffe6;letter-spacing:.05em;font-weight:600;transition:color .3s ease}.hgrid-split .hgrid-item-body .hgrid-item-body-author{font-style:italic;font-size:1.3em;line-height:1.2;margin-bottom:.35em;color:#fffffff2;font-weight:500;transition:color .3s ease}.hgrid-split .hgrid-item-body .hgrid-item-body-title{font-size:1.7em;line-height:1.2;margin-bottom:.5em;font-weight:700;color:#fff;font-family:var(--font-heading-primary);transition:color .3s ease}.hgrid-split .hgrid-item-body .hgrid-item-body-abstract{font-size:1em;font-style:italic;line-height:1.3;opacity:.9;color:#ffffffd9;font-family:var(--font-body);transition:color .3s ease}.contrappunti-page{margin:0 auto;padding:2rem 1rem;max-width:1400px}.page-header{text-align:center;margin-bottom:3rem;padding:0 1rem}.page-title{font-family:var(--font-heading-primary);font-size:clamp(2rem,5vw,2.5rem);font-weight:300;color:var(--color-accent);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;line-height:1.1}.page-description{font-family:var(--font-heading-secondary);font-size:1rem;font-weight:400;line-height:1.5;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1.5rem;max-width:500px;margin-left:auto;margin-right:auto}.page-rule{height:1px;border:none;margin:0 auto;flex:1;max-width:100px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent)}.no-posts{text-align:center;padding:2rem;color:#7f8c8d;font-style:italic;background:#f8f9fa;border-radius:8px;border:1px dashed #ddd;margin-top:1rem}@media (max-width: 1300px){.hgrid .hgrid-line{font-size:1em}}@media (max-width: 1200px){.hgrid .hgrid-line{font-size:.9em}.hgrid-split .hgrid-item-body{padding:1.25rem}}@media (max-width: 1100px){.hgrid .hgrid-line{font-size:.8em}.hgrid-split .hgrid-item-body{padding:1rem}.hgrid-split .hgrid-item-body-title{font-size:1.5em}}@media (max-width: 1050px){.hgrid .hgrid-line{font-size:.75em}}@media (max-width: 1000px){.hgrid .hgrid-line{font-size:.7em}.hgrid-split .hgrid-item-body-abstract{font-size:.9em}}@media (max-width: 900px){.hgrid .hgrid-line{font-size:.65em}.hgrid-split .hgrid-item-body{padding:.75rem}.hgrid-split .hgrid-item-body-title{font-size:1.3em}.hgrid-split .hgrid-item-body-author{font-size:1.1em}}@media (max-width: 821px){.hgrid{margin-top:.69rem}.hgrid .hgrid-line{font-size:.6em}.contrappunti-page{padding:1rem}.page-header{margin-bottom:2rem}}@media (max-width: 600px){.hgrid-line:before{padding-bottom:0!important;display:none}.hgrid-group{position:relative;flex-direction:column;height:auto;gap:1px}.hgrid-item{height:400px;margin-bottom:2px}.hgrid-item:before{display:none}.hgrid-split{position:relative;height:400px}.hgrid-split .hgrid-item-head,.hgrid-split .hgrid-item-body{flex:0 0 50%}.hgrid-split .hgrid-item-body-title{font-size:1.5em}}@media (max-width: 480px){.hgrid-item,.hgrid-split{height:350px}.hgrid-split .hgrid-item-body-title{font-size:1.3em}.hgrid-split .hgrid-item-body-author{font-size:1em}.hgrid-split .hgrid-item-body-abstract{font-size:.85em;line-height:1.2}}
