:root { --n-maxwidth: 320px; --n-white: #FFFFFF; --n-primary: #02BD4F; --n-secondary: #008437; } .newsletter-box { max-width: var(--n-maxwidth); margin: 0 auto; padding: 20px; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 1.5; color: var(--n-white); background: var(--n-primary); background: linear-gradient(45deg, var(--n-secondary) 0%, var(--n-primary) 100%); display: grid; text-align: center; gap: 20px; } .newsletter-box__header { display: grid; gap: 10px; padding: 0 0 20px 0; border-bottom: solid 1px rgba(255, 255, 255, .12); } .newsletter-box__icon { width: 80px; height: 80px; display: block; margin: 0 auto; img, svg { width: 100%; height: 100%; object-fit: cover; display: block; } svg { fill: var(--n-white); } } .newsletter-box__title { width: 100%; font-size: 40px; line-height: 56px; font-weight: 500; text-transform: uppercase; } .newsletter-box__subtitle { width: 100%; font-size: 20px; line-height: 28px; font-weight: 500; } .newsletter-box__button { width: 100%; height: 50px; color: var(--n-white); border: 2px solid var(--n-white); font-size: 16px; line-height: 1.5; cursor: pointer; display: grid; place-content: center; text-decoration: none; background-color: rgba(255,255,255,0); transition: background-color, color .3s ease-in-out; } .newsletter-box__button:hover, .newsletter-box__button:focus, .newsletter-box__button:focus-within{ color:var(--n-secondary); background-color: rgba(255,255,255,1); }