#root-page{--_padding: var(--size-8);>header{color:var(--aprikot-on);background:url("../../img/mesh-gradient.DFTLYFA2.webp") no-repeat center/cover;padding-top:var(--size-10);padding-bottom:var(--size-5);>h1{margin-top:var(--size-12);padding-inline:var(--_padding);font-size:var(--font-size-10);font-weight:var(--font-medium)}>p{font-size:var(--font-size-2);padding-inline:var(--_padding)}}>section#hero{color:var(--mono-black);margin-top:var(--size-5);padding-inline:var(--_padding);>h2{line-height:1.1;font-size:var(--font-size-8);font-weight:var(--font-medium);margin-bottom:var(--size-6)}>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));column-gap:var(--size-4);>div{display:flex;flex-direction:column;row-gap:var(--size-3);>p{max-width:20ch;line-height:1.1;font-size:var(--font-size-4)}>a{--_bg-color: var(--mono-black);--_color: var(--mono-black-on);display:inline-flex;max-width:fit-content;transition:all .2s ease;cursor:pointer;border-radius:var(--rounded);background-color:var(--_bg-color);padding-inline:var(--size--1);padding-block:var(--size--2);color:var(--_color);font-family:var(--font-semimono);text-transform:uppercase;&:hover{--_bg-color: var(--aprikot);--_color: var(--aprikot-on)}}}>img{object-fit:cover;border-radius:var(--rounded)}}}>section#services{scroll-margin-top:var(--size-10);color:var(--mono-black);margin-top:var(--size-5);padding-inline:var(--_padding);>h2{font-size:var(--font-size-8);font-weight:var(--font-medium);margin-bottom:var(--size-6)}>div{display:grid;row-gap:var(--size-8);>article{display:flex;align-items:center;column-gap:var(--size-10);&:nth-of-type(2){margin-inline:auto}&:nth-of-type(3){margin-left:var(--size-3)}>div{max-width:30ch;line-height:1.1;>hgroup{margin-bottom:var(--size-2);h3{font-size:var(--font-size-4)}>p{font-size:var(--font-size-3);color:var(--mono-black-30)}}}>img{--_width: 400px;width:var(--_width);height:var(--_width);object-fit:cover;border-radius:var(--rounded)}}}}}@media(max-width:768px){#root-page{>section#hero{>div{grid-template-columns:1fr;row-gap:var(--size-6);>div{row-gap:var(--size-2);>p{max-width:100%}}>img{width:100%;height:auto}}}>section#services{>div{display:flex;flex-direction:column;row-gap:var(--size-10);>article{flex-direction:column;row-gap:var(--size-6);&:nth-of-type(2){margin-inline:0}&:nth-of-type(3){margin-left:0}div{min-width:100%}>img{width:100%;max-height:200px}}}}}}