html {
   box-sizing: border-box;
 }

 *,
 *:before,
 *:after {
   box-sizing: border-box;
 }

 body {
   margin: 0;
   padding: 0;
   font-size: 18px;
   font-family: 'Open Sans', system-ui, sans-serif;
   line-height: 1.4em;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Raleway', system-ui, sans-serif;
   line-height: 1em;
   margin: 0 0 16px;
 }

 h1 {
   font-size: 72px;
 }

 h2 {
   font-size: 20px;
   text-transform: uppercase;
   letter-spacing: 0.25em;
 }

 p {
   margin: 0 0 16px;
 }

 a {
   color: rgb(30, 30, 30);
   text-underline-offset: 2px;
   background: rgba(30, 30, 30, 0.0);
 }

 a:hover {
   background-color: rgba(30, 30, 30, 0.05);
 }

 img {
   width: auto;
   height: auto;
   max-height: 100%;
   max-width: 100%;
 }

 button {
   cursor: pointer;
 }

 .container {
   width: 1000px;
   max-width: 100%;
   padding-inline: clamp(24px, 3vw, 80px);
   margin-inline: auto;
 }

 .container.full {
   width: 100%;
 }

 .intro {
   display: grid;
   gap: 40px 80px;
   padding-block: clamp(24px, 8vw, 120px);
 }

 @media screen and (min-width:992px) {
   .intro {
     grid-template-columns: 150px 1fr;
   }
 }

 .image img {
   height: 100px;
 }

 @media screen and (min-width:992px) {
   .image img {
     height: 240px;
   }
 }

 .project-grid {
   text-align: center;
 }

 .project-btn {
   display: inline-block;
   border: 0;
   background: #eee;
   padding: clamp(24px, 5vw, 120px);;
   aspect-ratio: 16 / 10;
   overflow: hidden;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 12px 40px rgba(0, 0, 0, 0.2);
   margin-bottom: clamp(16px, 5vw, 64px);
   max-width: 100%;
   max-height: 90vh;
   margin-inline: auto;
 }

 @media screen and (min-width:992px) {
   .project-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }

 .project-btn img {
   max-height: none;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
 }

 footer {
   padding: 8px 24px;
   text-align: center;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }