/* Responsive layer for the mockup designs. The designs are drawn at a fixed 1440 px with inline styles (from the design canvas), so this sheet works with !important and attribute selectors: full width, fluid type, and grids that collapse on tablets and phones. */ html, body.mk { margin: 0; } body.mk > div { width: 100% !important; height: auto !important; overflow: hidden; } .mk .mk-ph { background-size: cover; background-position: center; } /* The design styles sit inside , after this sheet, so photos need the extra .mk to win over the striped placeholder background. */ .mk form input { min-width: 0; } .mk img, .mk svg { max-width: 100%; } @media (max-width: 1200px) { .mk header, .mk section, .mk footer { padding-left: 40px !important; padding-right: 40px !important; } .mk h1 { font-size: clamp(44px, 8.2vw, 116px) !important; line-height: 1 !important; } .mk h2 { font-size: clamp(32px, 5.6vw, 72px) !important; line-height: 1.05 !important; } .mk [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .mk [style*="2fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .mk header nav { display: none !important; } .mk [style*="white-space: nowrap"] { flex-wrap: wrap !important; white-space: normal !important; row-gap: 6px !important; } } @media (max-width: 900px) { .mk form[style*="border-radius: 999px"] { flex-wrap: wrap !important; border-radius: 24px !important; } .mk form[style*="border-radius: 999px"] > label { flex-basis: 100% !important; padding-left: 12px !important; } .mk form[style*="border-radius: 999px"] > button { flex: 1 1 100% !important; height: 50px !important; } } @media (max-width: 900px) { /* three cards in a row are too narrow on tablets: stack them, centred */ .mk [style*="repeat(3, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; max-width: 560px; margin-left: auto !important; margin-right: auto !important; width: 100%; } .mk footer { flex-wrap: wrap !important; row-gap: 24px !important; } .mk footer > * { flex: 1 1 200px; min-width: 0; } .mk section [style*="display: flex"][style*="gap: 28px"]:not([style*="flex-direction: column"]) { flex-wrap: wrap !important; row-gap: 8px !important; column-gap: 20px !important; } .mk section [style*="display: flex"][style*="gap: 28px"]:not([style*="flex-direction: column"]) > * { white-space: nowrap; } /* header buttons stay on one line */ .mk header a[style*="999px"] { white-space: nowrap; flex: none; } .mk footer [style*="display: flex"] { flex-wrap: wrap !important; row-gap: 10px !important; } .mk footer span, .mk footer a { overflow-wrap: anywhere; } } @media (max-width: 700px) { .mk header, .mk section, .mk footer { padding-left: 20px !important; padding-right: 20px !important; } .mk section { padding-top: 56px !important; padding-bottom: 56px !important; } .mk header { padding-top: 16px !important; padding-bottom: 16px !important; gap: 12px !important; } .mk h1 { font-size: clamp(40px, 12vw, 64px) !important; } .mk h2 { font-size: clamp(30px, 9vw, 44px) !important; } .mk h3 { font-size: clamp(20px, 6vw, 28px) !important; } .mk p { font-size: 16px !important; } .mk [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } .mk [style*="span 2"] { grid-column: auto !important; grid-row: auto !important; } .mk [style*="display: flex"][style*="justify-content: space-between"]:not(header) { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } .mk [style*="display: flex"][style*="gap: 16px"] { flex-wrap: wrap !important; } .mk div.mk-ph { height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3; } body.mk header > a[style*="999px"]:last-child { white-space: nowrap !important; max-width: none !important; padding: 10px 16px !important; font-size: 14px !important; } .mk section.mk-ph { min-height: 520px; } .mk [style*="grid-row: span 2"] { min-height: 260px; } .mk header > a:last-child { padding: 10px 14px !important; font-size: 12px !important; height: auto !important; white-space: normal !important; flex-shrink: 1 !important; max-width: 46%; text-align: center; } .mk header > a:first-child { min-width: 0; } .mk [style*="margin: 0 -24px"] { margin: 0 !important; } .mk [style*="padding: 100px 200px"] { padding-left: 20px !important; padding-right: 20px !important; } } /* Before/after compare (Hockenheim): always two halves side by side with the divider in the middle; only the height shrinks. */ body.mk [style*="height: 620px"][style*="repeat(2, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } @media (max-width: 900px) { body.mk [style*="height: 620px"][style*="repeat(2, minmax(0, 1fr))"] { height: 420px !important; } } @media (max-width: 700px) { body.mk [style*="height: 620px"][style*="repeat(2, minmax(0, 1fr))"] { height: 280px !important; } body.mk [style*="height: 620px"] > div.mk-ph { aspect-ratio: auto !important; height: 100% !important; padding: 12px !important; } body.mk [style*="height: 620px"] > div.mk-ph > span { top: 12px !important; font-size: 12px !important; padding: 5px 9px !important; } body.mk [style*="height: 620px"] > div.mk-ph:first-child > span { left: 12px !important; } body.mk [style*="height: 620px"] > div.mk-ph:nth-child(2) > span { right: 12px !important; } body.mk [style*="height: 620px"] > button { width: 44px !important; height: 44px !important; margin: -22px 0 0 -22px !important; } }