body{background-repeat:no-repeat;background-size:cover;background-position:50%}.technology-container{display:grid;grid-template-columns:1fr;padding-block:var(--spacing-300) var(--spacing-600);grid-gap:var(--spacing-300);gap:var(--spacing-300);grid-row:2/3}.technology-container>:not(.technology-img){padding-inline:var(--spacing-500)}.introduction{color:var(--clr-base-100);letter-spacing:2.4px}.introduction span{opacity:.25;font-weight:700;-webkit-margin-end:var(--spacing-300);margin-inline-end:var(--spacing-300)}.technology-select{font-size:18px;font-family:var(--font-bellefair-serif);grid-row:3/4;-webkit-margin-after:var(--spacing-300);margin-block-end:var(--spacing-300)}.technology-select button{display:inline-block;inline-size:40px;aspect-ratio:1/1;border-radius:100vw;background-color:transparent;color:var(--clr-base-100);border:1px solid hsla(0,0%,100%,.25);position:relative}.technology-select>*+*{-webkit-margin-start:var(--spacing-200);margin-inline-start:var(--spacing-200)}.technology-select button.active{background-color:var(--clr-base-100);color:var(--clr-primary-900);border:none}.technology-select button:not(.active):hover{border:1px solid #fff;transition:border .2s;cursor:pointer}.technology-info{display:grid;grid-row:4/5;grid-template-columns:subgrid}.technology-img{grid-row:2/3;position:relative}.technology-container img{inline-size:100%;object-fit:cover}.technology-details{display:grid;grid-gap:var(--spacing-200);gap:var(--spacing-200)}.technology-details>p{line-height:1.8}.technology-details span{font-size:18px;color:hsla(0,0%,100%,.5)}.technology-details h2,.technology-details span{font-family:var(--font-bellefair-serif);text-transform:uppercase}.technology-details h2{font-size:24px;color:var(--clr-base-100);-webkit-margin-before:var(--spacing-200);margin-block-start:var(--spacing-200)}@media (min-width:676px){.technology-container{padding:var(--spacing-500) 0;grid-column:1/-1;grid-row:2/3;grid-template-columns:40px 1fr 40px;grid-template-rows:5rem repeat(3,min-content)}.introduction{grid-column:1/span 2;justify-self:start;font-size:20px}.technology-img{grid-column:1/-1;grid-row:2/3}.technology-select{grid-row:3/4;grid-column:2/3}.technology-select button{font-size:24px;inline-size:56px}.technology-details{grid-row:4/5;grid-column:2/3;font-size:16px}.technology-details span{font-size:24px}.technology-details h2{font-size:40px}.technology-details p{inline-size:min(55ch,100%);margin-inline:auto}}@media (min-width:1092px){.technology-container{grid-template-columns:136px min-content 1fr 1fr;grid-template-rows:min-content 1fr 100px;align-items:center;text-align:start;-webkit-padding-end:0;padding-inline-end:0}.introduction{grid-column:2/span 2;justify-self:start;font-size:28px;letter-spacing:var(--spacing-50)}.technology-select{grid-row:2/3;grid-column:2/3}.technology-select>*+*{-webkit-margin-start:initial;margin-inline-start:0;-webkit-margin-before:var(--spacing-400);margin-block-start:var(--spacing-400)}.technology-select button{font-size:32px;inline-size:80px}.technology-details{grid-row:2/3;grid-column:3/4;font-size:18px}.technology-details span{font-size:32px}.technology-details h2{font-size:56px}.technology-details p{margin-inline:0}.technology-img{grid-row:2/3;grid-column:4/6}}