/* * ============================================================ * BUSINESS — OVER ONS * ============================================================ */ @media screen and (min-width: 969px) { body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-intro { padding: 80px 0 !important; background: #ffffff !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-intro-grid { display: grid !important; grid-template-columns: .8fr 1.2fr !important; gap: 72px !important; align-items: start !important; } /* * Story = zakelijke split. */ body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-story { padding: 0 0 90px !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-story-grid { display: grid !important; grid-template-columns: .95fr 1.05fr !important; gap: 0 !important; min-height: 460px !important; border: 1px solid var(--pb-business-line) !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-story-image { min-height: 460px !important; border-radius: 0 !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-story-content { display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 58px 64px !important; background: var(--pb-business-soft) !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-points { margin-top: 24px !important; padding-top: 22px !important; border-top: 1px solid var(--pb-business-line) !important; } /* * Waarden als 3 corporate kolommen. */ body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-values { padding: 82px 0 !important; background: var(--pb-business-dark) !important; color: #ffffff !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-values-head { max-width: 720px !important; margin: 0 0 46px !important; text-align: left !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-values-head h2, body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-values-head p { color: inherit !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-values-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 0 !important; border-top: 1px solid rgba(255,255,255,.14) !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-value { padding: 38px 34px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-value h3, body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-value p { color: #ffffff !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-value + .vokk-about-value { border-left: 1px solid rgba(255,255,255,.14) !important; } /* * Experience compact en zakelijk. */ body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-experience { padding: 90px 0 !important; background: #ffffff !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-experience-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; min-height: 450px !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-experience-content { display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 55px 65px 55px 0 !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-experience-image { min-height: 450px !important; border-radius: 0 !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-stats { margin-top: 30px !important; padding-top: 25px !important; border-top: 3px solid var(--vokk-primary) !important; } } /* * ============================================================ * BUSINESS OVER ONS — STORY SPLIT HARD FIX * ============================================================ * * Alleen desktop / tablet-landscape. * Doel: * 50% foto + 50% tekst * Geen lege derde kolom. * ============================================================ */ @media screen and (min-width: 969px) { body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-story-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: 1fr !important; width: 100% !important; max-width: none !important; gap: 0 !important; align-items: stretch !important; overflow: hidden !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-story-image { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 460px !important; margin: 0 !important; border-radius: 0 !important; justify-self: stretch !important; align-self: stretch !important; } body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-story-content { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 58px 64px !important; box-sizing: border-box !important; justify-self: stretch !important; align-self: stretch !important; background: var(--pb-business-soft) !important; } /* * Oude breedte/max-width regels binnen deze split uitschakelen. */ body.pb-layout-pack-business.pb-template-page-over-ons .vokk-about-story-content > * { max-width: none !important; } }