.landing-technology-hero{min-height:calc(100vh - var(--header-height));padding-top:150px;display:grid;grid-template-columns:2fr 1fr;background:#000;color:#fff}.landing-technology-hero>*{border-top:1px solid #565656;padding:2rem;position:relative;--gradient-color: rgba(255, 0, 0, 0.2);--opacity: 0;--transition: opacity 250ms ease-in-out;color:#fff;text-decoration:none}.landing-technology-hero>*:first-child{border-right:1px solid #565656}.landing-technology-hero>*{display:grid;place-items:center}.landing-technology-hero>* .icon{opacity:var(--opacity);transition:var(--transition);z-index:5;position:absolute;top:50px;right:50px}.landing-technology-hero>*>.background{opacity:var(--opacity);transition:var(--transition);position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.landing-technology-hero>*>.background img{-webkit-mask-image:linear-gradient(to bottom, transparent, black 80%);mask-image:linear-gradient(to bottom, transparent, black 80%);filter:grayscale(1);opacity:.15;position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.landing-technology-hero>* .header{z-index:5;text-transform:uppercase;text-align:center;max-width:575px;display:grid;gap:10px}.landing-technology-hero>* .header .supertitle{font-size:14px;letter-spacing:2.8px}.landing-technology-hero>* .header .title{font-family:Shapiro;font-size:clamp(20px,3vw,40px);font-weight:335;text-transform:uppercase;line-height:1.1em}.landing-technology-hero>*:before{opacity:var(--opacity);transition:var(--transition);content:"";position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;background:linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--gradient-color))}.landing-technology-hero>*:hover{--opacity: 1}.landing-technology-hero .spc{--gradient-color: hsla(266,75%,50%, 0.5)}.landing-technology-hero .microfluidics{--gradient-color: hsla(221, 75%, 50%, 0.5)}.landing-technology-hero .microfluidics>.background img{-o-object-fit:cover;object-fit:cover;-o-object-position:bottom;object-position:bottom}@media(max-width: 768px){.landing-technology-hero{padding-top:0;grid-template-columns:1fr;overflow:hidden;grid-template-rows:3fr 2fr}.landing-technology-hero>*{overflow:hidden;border:none;--opacity: 1}.landing-technology-hero>*:first-child{border:none}.landing-technology-hero>* .header .title{font-size:clamp(18px,5.8vw,40px)}.landing-technology-hero>* .icon{display:none}}