@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"); body { font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: "Space Grotesk", system-ui, sans-serif; } .blocks { display: flex; /*gap: 20px;*/ padding-top: 5.78vw; /* hor spacing from line to heading top */ background-image: url("https://abanbytes.eu/upload/hero_bg_plain.svg"); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; } /* Gap between block 1 and 2 */ .block:nth-child(1) { margin-right: 11.3vw; /* margin-top */ margin-left: 12.85vw; } /* Gap between block 2 and 3 */ .block:nth-child(2) { margin-right: 6.01vw; margin-top: 10.16vw; } .block:nth-child(3) { /* margin-right */ margin-top: 5.26vw; margin-right: 13.05vw; } .block { flex: 1; height: 200px; /*background: #e5e7eb; border: 1px solid #ccc;*/ display: flex; /*align-items: center; justify-content: center;*/ flex-direction: column; } .block h2 { margin-top: 0px; margin-bottom: 0.5rem; font-size: 1.5rem; } .block ul { margin-top: 0; padding-left: 1.25rem; } /* Small screens */ @media (max-width: 960px) { .blocks { flex-direction: column; padding-top: 18.17vw; margin-top: 2.25vw; margin-bottom: 2.25vw; } .block { width: min(100%, 15em); padding-left: 5.72vw; } .block:nth-child(1), .block:nth-child(2), .block:nth-child(3) { margin-top: 0; margin-bottom: 2.25vw; /* horizontal centering blocks */ margin-left: auto; margin-right: auto; } .block:nth-child(1) { margin-top: } }