@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; max-width: 100%; overflow-x: hidden; } body { font-family: 'Lato', sans-serif; background: #FFFFFF; color: #14384f; padding: 60px 20px; } .wrap { width: 100%; max-width: 900px; margin: 0 auto; } .kicker { text-align: center; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: #7CCDFF; margin-bottom: 12px; } h1 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 40px; text-align: center; letter-spacing: 2px; color: #14384f; text-transform: uppercase; width: 100%; word-break: keep-all; overflow-wrap: normal; white-space: normal; hyphens: none; } .divider { width: 60px; height: 2px; background: #7CCDFF; margin: 24px auto 56px; } .event { display: flex; justify-content: space-between; align-items: baseline; padding: 24px 0; border-bottom: 1px solid #e5e5e5; width: 100%; } .event:last-of-type { border-bottom: none; } .event-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 500; color: #14384f; word-break: keep-all; overflow-wrap: normal; } .event-day { font-size: 13px; color: #6b6b6b; margin-top: 4px; } .event-time { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #7CCDFF; white-space: nowrap; padding-left: 20px; } @media (max-width: 480px) { body { padding: 40px 16px; } h1 { font-size: 24px; letter-spacing: 1px; } .event { flex-wrap: wrap; } .event-name, .event-time { font-size: 19px; } }