html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } img { max-width: 100%; } body { margin: 0; padding-top: 60px; padding-bottom: 20px; } ul { margin: 0; } a { color: #FF563C; text-decoration: none; font-family: "Poppins"; } .wrapper { max-width: 375px; width: calc(100% - var(5px)); margin: 0 auto; } .heading1 { font-family: "Poppins"; font-weight: 600; /*semi-bold*/ font-size: 3rem; /*48px*/ color: #394596; /*Bleu AGECEM*/ text-align: center; } .heading2 { font-family: "Poppins"; font-weight: 300; /*light*/ font-size: 1rem; /*16px*/ color: #394596; /*Bleu AGECEM*/ text-align: center; } @media screen and (min-width: 768px) { .wrapper { max-width: 768px; width: calc(100% - var(15px)); } .heading1 { font-size: 4rem; /*64px*/ } .heading2 { font-size: 1.5rem; /*24px*/ } } @media screen and (min-width: 1140px) { .wrapper { max-width: 1140px; width: calc(100% - var(30px)); } }