.device-components-downloads{display:flex;align-items:center;justify-content:center}.device-components .part-info{display:grid;grid-template-columns:250px auto;gap:2rem;margin-bottom:2rem;height:4rem}.device-components .part-info .title{line-height:1.2em;font-family:Shapiro;font-size:var(--font-medium);text-transform:uppercase}.device-components .part-info .description{font-size:var(--font-base)}.device-components .panels{display:grid;grid-template-columns:3fr 1fr;transition:grid-template-columns ease-out 600ms}.device-components .panels .panel{flex:1;display:grid;grid-template-rows:70vh auto;gap:1rem;cursor:pointer}.device-components .panels .panel .content{display:flex;justify-content:center;align-items:center;position:relative;height:70vh;place-self:center}.device-components .panels .panel .content .wireframe{position:absolute;width:100%;height:100%;top:0;left:0;opacity:.35;transition:opacity ease-out 200ms}.device-components .panels .panel .content .wireframe>picture img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.device-components .panels .panel .content .image-details{display:block;transition:opacity ease-out 600ms;opacity:0;padding:0 1rem}.device-components .panels .panel .content .image-details .details{opacity:0}.device-components .panels .panel .content .image-details>picture img{height:70vh;-o-object-fit:contain;object-fit:contain}.device-components .panels .panel>.title{font-family:Shapiro;color:var(--color-border);text-transform:uppercase;padding-bottom:1rem;position:relative;text-align:center;transition:color ease-out 600ms}.device-components .panels .panel>.title:after{transition:background-color ease-out 600ms;position:absolute;content:"";width:100%;background-color:var(--color-border);height:2px;bottom:0;left:0}.device-components .panels .panel.active{cursor:revert}.device-components .panels .panel.active .content .image-details{opacity:1}.device-components .panels .panel.active .content .image-details .details{transition:opacity ease-out 600ms 500ms;opacity:1}.device-components .panels .panel.active .content .wireframe{opacity:0}.device-components .panels .panel.active>.title{color:var(--section-accent)}.device-components .panels .panel.active>.title:after{background-color:var(--section-accent);height:.25rem}@media(max-width: 450px){.device-components-downloads{flex-direction:column}.device-components .panels{grid-template-columns:1fr 0 !important;position:relative}.device-components .panels .panel{grid-row:1;grid-column:2;padding-top:2rem}.device-components .panels .panel.active{grid-column:1}.device-components .panels .panel.active .content{opacity:1}.device-components .panels .panel .content{opacity:0}.device-components .panels .panel:nth-child(2)>.title{left:50%}.device-components .panels .panel>.title{position:absolute;width:50%;left:0;top:0}.device-components .panels .panel>.title:after{top:-5px;bottom:auto}}.image-details{position:relative;--hoverable-color: rgba(29, 70, 157, 0.50)}.image-details .details{top:0;left:0;position:absolute;width:100%;height:100%}.image-details .details .detail{--hover-size: 15rem;z-index:10;position:absolute;cursor:pointer;height:2.2rem;width:2.2rem;transform:translateX(-1.1rem) translateY(-1.1rem);overflow:visible}.image-details .details .detail .title,.image-details .details .detail .description{-webkit-backdrop-filter:blur(0.8rem);backdrop-filter:blur(0.8rem);position:absolute;background-color:rgba(0,0,0,.43);text-align:center;color:rgba(0,0,0,0);overflow:hidden;left:-2rem;width:calc(4rem + var(--hover-size));display:grid;grid-template-rows:0fr}.image-details .details .detail .title>*,.image-details .details .detail .description>*{overflow:hidden}.image-details .details .detail .title{border-radius:.5rem .5rem 0 0;text-transform:uppercase;font-weight:bold;font-size:var(--font-medium);font-family:"Shapiro";border-bottom:none;bottom:calc(.5*var(--hover-size))}.image-details .details .detail .description{border-radius:0 0 .5rem .5rem;font-size:.9rem;border-top:none;text-align:left;top:calc(.5*var(--hover-size))}.image-details .details .detail .image{position:absolute;opacity:0;top:0;left:0}.image-details .details .detail .image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;transform-origin:center}.image-details .details .detail:before{content:"";display:block;height:2.2rem;width:2.2rem;background-color:var(--hoverable-color);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:50%}.image-details .details .detail:after{top:calc(50% - .4rem);left:calc(50% - .4rem);position:absolute;content:"";display:block;height:.8rem;width:.8rem;background-color:#fff;border-radius:50%}.image-details .details .detail.hover{border-radius:0;z-index:15;height:var(--hover-size);width:var(--hover-size);transform:translateX(calc(-0.5 * var(--hover-size))) translateY(calc(-0.5 * var(--hover-size)))}.image-details .details .detail.hover .title,.image-details .details .detail.hover .description{transition:color ease-in 300ms 400ms,grid-template-rows ease-in 300ms 200ms;padding:1rem;grid-template-rows:1fr;color:#fff;border:1px solid rgba(0,0,0,.1)}.image-details .details .detail.hover .title{padding-bottom:calc(1rem + .5*var(--hover-size));border-bottom:none}.image-details .details .detail.hover .description{padding-top:calc(1rem + .5*var(--hover-size));border-top:none}.image-details .details .detail.hover .image{z-index:1;border-radius:50%;border:1px solid #fff;opacity:1;width:var(--hover-size);height:var(--hover-size);box-shadow:0 0 25px rgba(0,0,0,.5);overflow:hidden}.image-details .details .detail.hover .image img{transform:scale(1.2);transition:opacity ease-in 300ms -170ms,transform ease-in-out 600ms 150ms}.image-details .details .detail.hover:before{display:none}.image-details .details .detail.hover:after{display:none}.onyx-accent{--section-accent: #fff}.onyx-accent .image-details{--hoverable-color: rgba(200, 200, 200, 0.50)}.styx-accent{--section-accent: #fff}.styx-accent .image-details{--hoverable-color: rgba(200, 200, 200, 0.50)}@media(max-width: 450px){.image-details .details .detail.hover{left:50% !important;top:42% !important}}.download-link{transition:background-color ease-in 200ms;width:14rem;display:flex;justify-content:center;cursor:pointer;font-weight:bold;border-radius:.25rem;padding:.75rem 1rem;display:flex;gap:1rem;color:var(--section-txt);text-decoration:none}.download-link:hover{background-color:hsla(0,0%,100%,.06)}.download-link>*{display:block;display:flex;align-items:center}.download-link span{opacity:.5}.download-link img{width:1rem}
