#h1-tag { border-radius: 5px; } main > article > header > h1:nth-of-type(1) { direction: ltr; padding: 0; color: #3b4e65; background: rgb(200, 215, 208); font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 700; line-height: 2; word-spacing: 0; margin: 0 0 15px 0; text-align: center; } p:nth-of-type(1) > img { width: 684px; height: 383px; border: 0 solid #000; border-radius: 15px; padding: 0; margin: 0; line-height:1.7; } p:nth-of-type(1) { padding: 0; margin: 0px 0px 15px 0px; text-align: justify; } main > article > p:nth-of-type(2) { direction: ltr; display: block; padding: 0; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; word-spacing: 0; margin: 0; text-align: center; } .benefit-list { list-style: none; padding: 0; margin: 20px 0; } .benefit-list li { margin-bottom: 12px; padding-left: 25px; position: relative; color: #4b5563; } .benefit-list li::before { content: "✓"; position: absolute; left: 0; color: #10b981; font-weight: bold; } @media only screen and (min-width: 320px) and (max-width: 767px) { main > article * { box-sizing: border-box; } p { display: block !important; font-size: 16px !important; } p > img { width: 100% !important; height: auto !important; border: 0; padding: 0 !important; margin: 0 auto !important; float: unset !important; } iframe { width: 100%; height: auto; } body > header:first-of-type { border-radius: 20px 20px 0px 0px !important; /* See note of next class, which is a must for this one */ } /* Since we put upper rounded corners on the header, if we have a "body" background color, then the part outside of the rounded corners will show it. We must match it to meet our website background color, and for that, the following addon to the is a must: */ body { background: linear-gradient(to bottom, #ffffff 80px, transparent 80px); /* 80px is your header height. The first 80px will be white (#ffffff) and the rest will take the other "background-color" that was already defined, which is what we want and that does not prevent the user from changing it without causing problems) */ background-repeat: no-repeat; background-attachment: fixed; /* Ensures the gradient stays pinned to the top */ } } @media only screen and (min-width: 768px) and (max-width: 989px) { main > article * { box-sizing: border-box; } p { display: block !important; font-size: 16px !important; } p > img { width: 100% !important; height: auto !important; border: 1px solid #000; padding: 0 !important; margin: 0 auto !important; float: unset !important; } iframe { width: 100%; height: auto; } body > header:first-of-type { border-radius: unset !important; } } .highlight-text { background-color: #ffeb3b; padding: 0 5px; border-radius: 4px; font-weight: 600; color: #333; }