@import"https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{padding:40px;background-color:#f5f5f5;font-family:Poppins,sans-serif}.container{padding:clamp(20px,5vw,40px);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100vh}.header{text-align:center;padding-bottom:20px}.header .top{font-weight:200;white-space:nowrap;font-size:clamp(18px,6vw,36px)}.header h1{font-weight:600;color:#4c4e61;white-space:nowrap;font-size:clamp(18px,6vw,36px);padding-bottom:10px}.header p{font-size:15px;line-height:1.6;color:#697077;font-weight:400}.grid-container{display:flex;flex-direction:column;gap:30px;width:100%}.grid-container h2{font-size:22px;padding-top:24px;padding-bottom:8px;padding-left:26px;color:#4c4e61}.grid-container p{font-size:15px;padding-left:26px;padding-right:40px;line-height:1.6;color:#697077}.grid-container img{display:block;margin-left:auto;padding:30px}.cyan,.red,.orange,.blue{background-color:#fff;border-radius:8px;box-shadow:0 10px 20px #d0e0f1;transition:transform .3s ease}.cyan:hover,.red:hover,.orange:hover,.blue:hover{transform:translateY(-4px)}.cyan{border-top:5px solid hsl(180,62%,55%)}.red{border-top:5px solid hsl(0,78%,62%)}.blue{border-top:5px solid hsl(212,86%,64%)}.orange{border-top:5px solid hsl(34,97%,64%)}.attribution{margin-top:30px;font-size:13px;text-align:center;color:#a3a5ae}.attribution a{color:#549ef2;font-weight:600;transition:color .3s ease;text-decoration:none}.attribution a:hover{color:#4c4e61}@media(min-width:768px){body{padding-top:0}.container{padding:20px;min-height:100vh}.header{max-width:540px;margin-bottom:50px}.grid-container{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:750px;margin:0 auto}}@media(min-width:1024px){body{padding-top:0}.container{padding:20px;min-height:100vh}.header{max-width:500px;margin:0 auto 25px}.grid-container{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1110px;margin:0 auto}.grid-container h2{padding-top:15px;padding-bottom:5px}.cyan{grid-column:1;grid-row:2/4}.red{grid-column:2;grid-row:1/3}.orange{grid-column:2;grid-row:3/5}.blue{grid-column:3;grid-row:2/4}}