/* ============================================================ MITHYLL DAVE / ABOUT PAGE / about.css / v2.2 Loads only on page-about.php via the functions.php snippet. Everything is scoped under .mdabout so nothing leaks into GeneratePress or other templates. ============================================================ */ /* ------------------------------------------------------------ GENERATEPRESS CONTAINER RESET The page is full bleed. Also set GeneratePress > Page settings to Content layout "Full Width" and Sidebar layout "No Sidebars". ------------------------------------------------------------ */ .page-template-page-about .site-content, .page-template-page-about #content, .page-template-page-about .content-area, .page-template-page-about .site-main, .page-template-page-about .entry-content{ padding:0 !important; margin:0 !important; max-width:100% !important; width:100% !important; } .page-template-page-about .entry-header, .page-template-page-about .page-header, .page-template-page-about .entry-title{ display:none !important; } /* ============================================================ TOKENS ============================================================ */ .mdabout{ --navy:#0D1B2A; --navy-deep:#08131F; --gold:#B8972E; --gold-hi:#D4AF5A; --gold-lit:#EDD9A3; --cream:#F7F4EE; --paper:#F6F5F4; --teal:#1B3A4B; --teal-lit:#3E7C94; --ink:#141413; --display:"Cormorant Garamond", Georgia, serif; --body:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --gut:clamp(20px, 5vw, 80px); --maxw:1320px; font-family:var(--body); font-size:18px; line-height:1.75; color:var(--ink); background:var(--paper); overflow-x:hidden; -webkit-font-smoothing:antialiased; } .mdabout *,.mdabout *::before,.mdabout *::after{box-sizing:border-box;} .mdabout img{max-width:100%;display:block;} .mdabout h1,.mdabout h2,.mdabout h3,.mdabout h4{ font-family:var(--display); font-weight:600;line-height:1.06;letter-spacing:-0.01em;margin:0; } .mdabout p{margin:0 0 1.25em;} .mdabout p:last-child{margin-bottom:0;} .mdabout section{padding-left:0;padding-right:0;} .mdabout .md-wrap{ width:100%;max-width:var(--maxw);margin:0 auto; padding-left:var(--gut);padding-right:var(--gut); } .mdabout .md-eyebrow{ font-family:var(--body);font-size:12px;font-weight:700; letter-spacing:0.38em;text-transform:uppercase; color:var(--gold);margin:0 0 22px;display:block; } .mdabout .md-rule{width:56px;height:2px;background:var(--gold);border:0;margin:0 0 28px;} .mdabout .md-h2{font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:20ch;} .mdabout .md-h2--teal{color:var(--teal);} .mdabout .md-h2--white{color:#fff;} .mdabout .md-lede{max-width:53ch;margin-top:20px;} .mdabout .md-lede--light{color:rgba(247,244,238,.76);} .mdabout .md-lede--dark{color:rgba(20,20,19,.72);} /* Reveal base. If GSAP fails, .js is removed from and all of this reverts to visible. Content is never gated on JS. */ .js .mdabout .md-rev{opacity:0;transform:translateY(38px);} .js .mdabout .md-rev-l{opacity:0;transform:translateX(-64px);} .js .mdabout .md-rev-r{opacity:0;transform:translateX(64px);} .js .mdabout .md-clip{clip-path:inset(0 0 100% 0);} @media (prefers-reduced-motion: reduce){ .js .mdabout .md-rev, .js .mdabout .md-rev-l, .js .mdabout .md-rev-r{opacity:1;transform:none;} .js .mdabout .md-clip{clip-path:none;} .mdabout .md-marquee__track{animation:none !important;} } /* ============================================================ BUTTONS ============================================================ */ .mdabout .md-btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--body);font-size:15px;font-weight:700; letter-spacing:0.06em;text-transform:uppercase; padding:19px 34px;border-radius:2px;text-decoration:none; border:1.5px solid transparent;cursor:pointer; transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease; will-change:transform; } .mdabout .md-btn--gold{background:var(--gold);color:var(--navy);} .mdabout .md-btn--gold:hover{background:var(--gold-hi);box-shadow:0 18px 44px rgba(184,151,46,.34);} .mdabout .md-btn--ghost{background:transparent;color:var(--cream);border-color:rgba(247,244,238,.4);} .mdabout .md-btn--ghost:hover{border-color:var(--gold-hi);color:var(--gold-hi);} .mdabout .md-btn:focus-visible, .mdabout .md-vid:focus-visible, .mdabout .md-shot:focus-visible{outline:3px solid var(--gold-hi);outline-offset:4px;} /* ============================================================ 1 / HERO Generous top padding plus min-height rather than a locked viewport height. On short screens the section grows instead of pushing the H1 off the top edge. ============================================================ */ .mdabout .md-hero{ position:relative;min-height:100svh; display:flex;align-items:flex-end; background:var(--navy);overflow:hidden; padding:clamp(150px,22vh,230px) 0 clamp(52px,8vh,96px); } .mdabout .md-hero__bg{position:absolute;inset:-14% 0 -14% 0;z-index:0;will-change:transform;} .mdabout .md-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%;} .mdabout .md-hero__scrim{ position:absolute;inset:0;z-index:1; background: linear-gradient(180deg, rgba(13,27,42,.74) 0%, rgba(13,27,42,.44) 32%, rgba(13,27,42,.9) 76%, var(--navy) 100%), radial-gradient(75% 60% at 18% 78%, rgba(184,151,46,.20) 0%, rgba(184,151,46,0) 70%); } .mdabout .md-hero__inner{position:relative;z-index:2;width:100%;} .mdabout .md-hero h1{ font-size:clamp(2.6rem, 7.4vw, 6.4rem); color:#fff;max-width:17ch;margin:0 0 34px; } .mdabout .md-hero h1 em{font-style:italic;font-weight:400;color:var(--gold-hi);display:block;} .mdabout .md-line{display:block;overflow:hidden;padding-bottom:.04em;} .mdabout .md-line > span{display:block;} .mdabout .md-hero__gov{ font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.6rem); font-style:italic;color:rgba(247,244,238,.92); max-width:34ch;margin:0 0 40px; border-left:2px solid var(--gold);padding-left:22px; } .mdabout .md-hero__meta{ font-size:14px;letter-spacing:.16em;text-transform:uppercase; color:rgba(247,244,238,.68);font-weight:500; } /* ============================================================ 2 / CREDENTIAL BAND ============================================================ */ .mdabout .md-stats{background:var(--cream);padding:clamp(64px,9vw,110px) 0;} .mdabout .md-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);} .mdabout .md-stat__n{ font-family:var(--display);font-weight:600; font-size:clamp(2.6rem,5.4vw,4.6rem); color:var(--teal);line-height:1;display:block;font-variant-numeric:tabular-nums; } .mdabout .md-stat__l{ display:block;margin-top:14px;font-size:13px;letter-spacing:.2em; text-transform:uppercase;color:rgba(20,20,19,.62);font-weight:500;line-height:1.5; } .mdabout .md-stats__note{ margin-top:clamp(38px,5vw,60px);padding-top:26px; border-top:1px solid rgba(20,20,19,.12); font-size:16px;color:rgba(20,20,19,.72);max-width:80ch; } /* ============================================================ 3 / LOGO MARQUEE (single large row) ============================================================ */ .mdabout .md-marquee{background:var(--navy);padding:clamp(56px,7vw,90px) 0;overflow:hidden;} .mdabout .md-marquee__head{ text-align:center;margin:0 0 46px;font-size:12px;letter-spacing:.38em; text-transform:uppercase;color:var(--gold);font-weight:700; } .mdabout .md-marquee__row{display:flex;width:max-content;} .mdabout .md-marquee__track{ display:flex;align-items:center;flex:0 0 auto; animation:md-scroll 62s linear infinite; } .mdabout .md-marquee__track img{ height:74px;width:auto;min-width:60px;margin:0 56px; background:#fff;border-radius:6px;padding:8px 16px; opacity:1; transition:opacity .3s ease,transform .3s ease; } .mdabout .md-marquee__row:hover .md-marquee__track{animation-play-state:paused;} .mdabout .md-marquee__track img:hover{opacity:1;transform:scale(1.06);} @keyframes md-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}} /* ============================================================ 4 / PINNED FOUR-ACT NARRATIVE ============================================================ */ .mdabout .md-acts{background:var(--navy-deep);color:var(--cream);position:relative;} .mdabout .md-acts__stage{min-height:100svh;display:flex;align-items:center;padding:clamp(70px,9vh,110px) 0;} .mdabout .md-acts__grid{ display:grid;grid-template-columns:0.82fr 1.18fr; gap:clamp(36px,6vw,90px);align-items:center;width:100%; } .mdabout .md-flask{position:relative;} .mdabout .md-flask svg{width:100%;height:auto;max-width:420px;margin:0 auto;display:block;overflow:visible;} .mdabout .md-acts__col{position:relative;min-height:clamp(470px,58vh,580px);} .mdabout .md-act{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;} .js .mdabout .md-act{opacity:0;visibility:hidden;} .js .mdabout .md-act.is-live{opacity:1;visibility:visible;} .mdabout .md-act h2{font-size:clamp(2rem,4.2vw,3.4rem);color:#fff;margin:0 0 26px;max-width:19ch;} .mdabout .md-act p{font-size:17.5px;line-height:1.85;color:rgba(247,244,238,.86);max-width:56ch;} .mdabout .md-act__place{ font-size:12px;letter-spacing:.28em;text-transform:uppercase; color:rgba(247,244,238,.5);margin-bottom:20px; } .mdabout .md-act__q{ position:relative; font-family:var(--display);font-style:italic;font-weight:500; font-size:clamp(1.45rem,2.7vw,2.15rem); line-height:1.42;letter-spacing:-0.005em;color:var(--gold-lit); background:linear-gradient(90deg, rgba(184,151,46,.16) 0%, rgba(184,151,46,.03) 100%); border-left:3px solid var(--gold-hi); padding:22px 26px 22px 28px;margin:6px 0 28px; max-width:46ch;border-radius:0 3px 3px 0; } .mdabout .md-dots{ position:absolute;left:clamp(12px,2.2vw,34px);top:50%; transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:20px; } .mdabout .md-dot{ width:9px;height:9px;border-radius:50%;background:rgba(247,244,238,.24); transition:background .4s ease,transform .4s ease; } .mdabout .md-dot.is-live{background:var(--gold-hi);transform:scale(1.75);} .mdabout .md-acts.no-pin .md-acts__col{min-height:0;} .mdabout .md-acts.no-pin .md-act{position:relative;opacity:1;visibility:visible;margin-bottom:64px;} .mdabout .md-acts.no-pin .md-act:last-child{margin-bottom:0;} .mdabout .md-acts.no-pin .md-dots{display:none;} /* ============================================================ 5 / IN THE ROOM (uncropped mosaic) ============================================================ */ .mdabout .md-gallery{background:var(--paper);padding:clamp(78px,11vw,130px) 0;} .mdabout .md-gallery__grid{ column-count:3;column-gap:clamp(12px,1.4vw,20px); margin-top:clamp(40px,5vw,64px); } .mdabout .md-shot{ break-inside:avoid;-webkit-column-break-inside:avoid; margin:0 0 clamp(12px,1.4vw,20px); position:relative;overflow:hidden;background:#e6e2da; display:block;border-radius:2px; } .mdabout .md-shot img{width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1);} .mdabout .md-shot:hover img{transform:scale(1.04);} .mdabout .md-shot figcaption{ position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px; background:linear-gradient(180deg,rgba(13,27,42,0),rgba(13,27,42,.92)); color:var(--cream);font-size:12.5px;letter-spacing:.12em; text-transform:uppercase;font-weight:500;line-height:1.5; opacity:0;transform:translateY(12px); transition:opacity .4s ease,transform .4s ease; } .mdabout .md-shot:hover figcaption, .mdabout .md-shot:focus-visible figcaption{opacity:1;transform:translateY(0);} /* ============================================================ 6 / BELIEFS ============================================================ */ .mdabout .md-beliefs{background:var(--teal);color:var(--cream);padding:clamp(78px,11vw,130px) 0;} .mdabout .md-beliefs .md-h2{max-width:16ch;} .mdabout .md-beliefs__grid{ display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,26px);margin-top:clamp(40px,5vw,62px); } .mdabout .md-belief{ background:rgba(255,255,255,.06);border:1px solid rgba(212,175,90,.22); border-radius:3px;padding:clamp(28px,3.4vw,42px); transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease; } .mdabout .md-belief:hover{ transform:translateY(-10px);box-shadow:0 28px 60px rgba(0,0,0,.34); border-color:rgba(212,175,90,.6); } .mdabout .md-belief h3{ font-size:clamp(1.4rem,2.5vw,1.95rem);font-style:italic; color:var(--gold-lit);margin:0 0 16px;line-height:1.34; } .mdabout .md-belief p{font-size:16.5px;color:rgba(247,244,238,.82);margin:0;} /* ============================================================ 7 / HUMAN LAYER ============================================================ */ .mdabout .md-human{background:var(--cream);padding:clamp(78px,11vw,130px) 0;overflow:hidden;} .mdabout .md-human__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;} .mdabout .md-human .md-h2{margin-bottom:26px;} .mdabout .md-human p{color:rgba(20,20,19,.8);} .mdabout .md-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;} .mdabout .md-tag{ font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500; color:var(--teal);border:1px solid rgba(27,58,75,.28);padding:8px 15px;border-radius:100px; } .mdabout .md-human__photos{column-count:2;column-gap:clamp(10px,1.4vw,18px);} .mdabout .md-human__photos figure{ break-inside:avoid;-webkit-column-break-inside:avoid; margin:0 0 clamp(10px,1.4vw,18px); } .mdabout .md-human__photos img{width:100%;height:auto;border-radius:2px;} .mdabout .md-human__photos figcaption{ font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:rgba(20,20,19,.52);padding-top:9px; } /* ============================================================ 8 / BOOKS ============================================================ */ .mdabout .md-books{background:var(--navy);color:var(--cream);padding:clamp(78px,11vw,130px) 0;} .mdabout .md-books__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);margin-top:clamp(44px,5vw,68px);} .mdabout .md-book{display:grid;grid-template-columns:155px 1fr;gap:clamp(20px,2.6vw,34px);align-items:start;} .mdabout .md-book__cover img{width:100%;border-radius:2px;box-shadow:0 26px 60px rgba(0,0,0,.5);transform:rotate(-2.5deg);} .mdabout .md-book:nth-child(2) .md-book__cover img{transform:rotate(2.5deg);} .mdabout .md-book h3{font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--gold-hi);margin:0 0 14px;} .mdabout .md-book p{font-size:16.5px;color:rgba(247,244,238,.8);margin-bottom:22px;} .mdabout .md-book__links{display:flex;flex-wrap:wrap;gap:10px;} .mdabout .md-book__links a{ font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; text-decoration:none;padding:13px 20px;border-radius:2px; transition:background .3s ease,color .3s ease,border-color .3s ease; } .mdabout .md-book__links a:first-child{background:var(--gold);color:var(--navy);} .mdabout .md-book__links a:first-child:hover{background:var(--gold-hi);} .mdabout .md-book__links a:last-child{border:1.5px solid rgba(247,244,238,.36);color:var(--cream);} .mdabout .md-book__links a:last-child:hover{border-color:var(--gold-hi);color:var(--gold-hi);} /* ============================================================ 9 / TIMELINE ============================================================ */ .mdabout .md-time{background:var(--paper);padding:clamp(78px,11vw,130px) 0;} .mdabout .md-time__list{position:relative;margin:clamp(48px,5vw,74px) 0 0;padding:0;list-style:none;} .mdabout .md-time__list::before{ content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px; background:rgba(27,58,75,.14); } .mdabout .md-time__fill{ position:absolute;left:0;top:6px;width:2px;height:calc(100% - 12px); background:linear-gradient(180deg,var(--gold-hi),var(--gold),var(--teal)); transform-origin:top center;transform:scaleY(0); box-shadow:0 0 14px rgba(212,175,90,.5); } .mdabout .md-time__item{position:relative;padding:0 0 clamp(34px,4vw,52px) clamp(34px,4vw,52px);} .mdabout .md-time__node{ position:absolute;left:-6px;top:12px;width:14px;height:14px;border-radius:50%; background:var(--paper);border:2px solid var(--gold); } .mdabout .md-time__item--key .md-time__node{ width:20px;height:20px;left:-9px;top:9px; background:var(--gold-hi);border-color:var(--gold-hi); } .mdabout .md-time__node.is-lit{box-shadow:0 0 0 7px rgba(212,175,90,.22);} .mdabout .md-time__y{ font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem); color:var(--teal);font-weight:600;line-height:1; display:block;margin-bottom:10px;overflow:hidden; } .mdabout .md-time__y span{display:inline-block;} .mdabout .md-time__item--key .md-time__y{color:var(--gold);} .mdabout .md-time__item p{font-size:17px;color:rgba(20,20,19,.78);max-width:60ch;margin:0;} /* ============================================================ 10 / PROOF WALL Dark ground on purpose. The logos are rendered as white silhouettes with brightness(0) invert(1), which gives the same result whatever colour the source PNG is. On the old light background any light-on-transparent mark vanished. To show native brand colours instead: change the background to #fff and delete the filter line below. ============================================================ */ .mdabout .md-proof{background:var(--navy);color:var(--cream);padding:clamp(78px,11vw,130px) 0;} .mdabout .md-wall{margin-top:clamp(44px,5vw,70px);} .mdabout .md-wall__group{margin-bottom:clamp(38px,4.4vw,60px);} .mdabout .md-wall__group:last-child{margin-bottom:0;} .mdabout .md-wall__label{ font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold); font-weight:700;margin:0 0 26px;padding-bottom:14px; border-bottom:1px solid rgba(247,244,238,.14); } .mdabout .md-wall__row{ display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:clamp(22px,2.6vw,40px);align-items:center; } .mdabout .md-wall__row img{ height:64px;width:auto;min-width:60px;max-width:100%;margin:0 auto; background:#fff;border-radius:6px;padding:8px 14px; opacity:1;transition:opacity .35s ease,transform .35s ease; } .mdabout .md-wall__row img:hover{opacity:1;transform:scale(1.06);} /* ============================================================ 11 / VIDEO TESTIMONIALS ============================================================ */ .mdabout .md-vids{background:var(--teal);color:var(--cream);padding:clamp(78px,11vw,130px) 0;} .mdabout .md-vids__grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,30px);margin-top:clamp(44px,5vw,66px); } .mdabout .md-vid{ border:0;padding:0;margin:0;background:var(--navy);text-align:left; cursor:pointer;font-family:inherit;color:inherit;display:block;width:100%; border-radius:4px;overflow:hidden;position:relative; transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease; } .mdabout .md-vid:hover{transform:translateY(-10px);box-shadow:0 30px 62px rgba(0,0,0,.42);} .mdabout .md-vid__thumb{position:relative;aspect-ratio:4/5;overflow:hidden;display:block;background:var(--navy);} .mdabout .md-vid__thumb img{ width:100%;height:100%;object-fit:cover;object-position:center 32%; transition:transform .7s cubic-bezier(.2,.7,.2,1); } .mdabout .md-vid:hover .md-vid__thumb img{transform:scale(1.05);} .mdabout .md-vid__veil{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(13,27,42,.5) 0%,rgba(13,27,42,.05) 34%,rgba(13,27,42,.72) 68%,rgba(8,19,31,.96) 100%); } .mdabout .md-vid__prog{ position:absolute;top:16px;left:16px;z-index:2; font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700; color:var(--navy);background:var(--gold);padding:7px 12px;border-radius:100px; max-width:calc(100% - 32px);line-height:1.3; } .mdabout .md-vid__play{ position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:2; width:62px;height:62px;border-radius:50%; background:rgba(212,175,90,.94);color:var(--navy); display:flex;align-items:center;justify-content:center; font-size:20px;padding-left:4px; transition:transform .35s ease,background .35s ease; } .mdabout .md-vid:hover .md-vid__play{transform:translate(-50%,-50%) scale(1.14);background:var(--gold-hi);} .mdabout .md-vid__id{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px 24px;} .mdabout .md-vid__name{ font-family:var(--display);font-size:1.65rem;font-weight:600; color:#fff;display:block;line-height:1.18; } .mdabout .md-vid__city{ font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-hi);display:block;margin-top:8px;font-weight:500; } .mdabout .md-vid__watch{ font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:rgba(247,244,238,.6);display:block;margin-top:12px;font-weight:500; } .mdabout .md-vid iframe{width:100%;aspect-ratio:9/12;border:0;display:block;} /* ============================================================ 12 / CLOSING CTA ============================================================ */ .mdabout .md-cta{ background:var(--navy);color:var(--cream); padding:clamp(88px,13vw,150px) 0;text-align:center;position:relative;overflow:hidden; } .mdabout .md-cta::after{ content:"";position:absolute;left:50%;top:50%;width:1100px;height:1100px; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(184,151,46,.16) 0%,rgba(184,151,46,0) 62%); pointer-events:none; } .mdabout .md-cta__inner{position:relative;z-index:2;} .mdabout .md-cta h2{font-size:clamp(2.4rem,6vw,5rem);color:#fff;max-width:15ch;margin:0 auto 26px;} .mdabout .md-cta p{font-size:19px;color:rgba(247,244,238,.78);max-width:56ch;margin:0 auto 44px;} .mdabout .md-cta__btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;} .mdabout .md-cta__mail{margin-top:40px;font-size:15px;color:rgba(247,244,238,.55);} .mdabout .md-cta__mail a{color:var(--gold-hi);text-decoration:none;} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .mdabout .md-books__grid{grid-template-columns:1fr;} .mdabout .md-vids__grid{grid-template-columns:repeat(2,1fr);} .mdabout .md-gallery__grid{column-count:2;} } @media (max-width:860px){ .mdabout{font-size:17px;} .mdabout .md-hero{min-height:auto;padding:clamp(120px,18vh,170px) 0 clamp(56px,8vh,84px);} .mdabout .md-hero h1{font-size:clamp(2.3rem,10vw,3.6rem);max-width:100%;} .mdabout .md-stats__grid{grid-template-columns:repeat(2,1fr);gap:34px 20px;} .mdabout .md-marquee__track img{height:48px;margin:0 32px;} .mdabout .md-acts__grid{grid-template-columns:1fr;} .mdabout .md-flask{max-width:230px;margin:0 auto 44px;} .mdabout .md-act__q{font-size:1.3rem;padding:18px 20px;} .mdabout .md-beliefs__grid{grid-template-columns:1fr;} .mdabout .md-human__grid{grid-template-columns:1fr;} .mdabout .md-book{grid-template-columns:125px 1fr;} .mdabout .md-wall__row{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));} .mdabout .md-wall__row img{height:46px;} .mdabout .md-shot figcaption{opacity:1;transform:none;} .mdabout .md-cta__btns{flex-direction:column;align-items:stretch;} .mdabout .md-btn{justify-content:center;} } @media (max-width:560px){ .mdabout .md-stats__grid{grid-template-columns:1fr;} .mdabout .md-gallery__grid{column-count:1;} .mdabout .md-human__photos{column-count:1;} .mdabout .md-book{grid-template-columns:1fr;} .mdabout .md-book__cover{max-width:170px;} .mdabout .md-vids__grid{grid-template-columns:1fr;} }