.vf-case-study { background: var(--vf-white); padding: 28px 20px 56px; box-sizing: border-box; } .vf-case-study__inner { max-width: 1080px; margin: 0 auto; } .vf-case-study__hero { margin-bottom: 28px; border-bottom: 4px solid var(--vf-black); padding-bottom: 16px; } .vf-case-study__eyebrow { margin: 0 0 10px 0; font-family: "Cousine", monospace; font-size: 12px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vf-blue); } .vf-case-study__title { margin: 0 0 12px 0; font-family: "Instrument Serif", serif; font-size: clamp(42px, 6vw, 72px); line-height: 0.92; font-weight: 400; color: var(--vf-black); } .vf-case-study__dek { margin: 0; max-width: 780px; font-family: "Cousine", monospace; font-size: 17px; line-height: 1.55; color: var(--vf-black); } .vf-case-study__media { margin: 0 0 20px 0; border: 4px solid var(--vf-black); background: var(--vf-yellow); overflow: hidden; } .vf-case-study__media img { display: block; width: 100%; height: auto; } .vf-case-study__embed { margin: 0 0 28px 0; padding: 12px; border: 4px solid var(--vf-black); background: var(--vf-yellow); box-sizing: border-box; } .vf-case-study__embed iframe { display: block; width: 100%; max-width: 100%; } .vf-case-study__section { margin-bottom: 24px; max-width: 820px; } .vf-case-study__label { margin: 0 0 8px 0; font-family: "Cousine", monospace; font-size: 12px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vf-red); } .vf-case-study__section p { margin: 0 0 12px 0; font-family: "Cousine", monospace; font-size: 16px; line-height: 1.7; color: var(--vf-black); } .vf-case-study__section p:last-child { margin-bottom: 0; } .vf-case-study__list { margin: 0; padding-left: 24px; font-family: "Cousine", monospace; } .vf-case-study__list li { margin-bottom: 8px; font-size: 16px; line-height: 1.6; color: var(--vf-black); } .vf-case-study__list li:last-child { margin-bottom: 0; } .vf-case-study__footer { margin-top: 32px; padding: 20px; border: 4px solid var(--vf-black); background: var(--vf-yellow); max-width: 820px; } .vf-case-study__footer-text { margin: 0 0 14px 0; font-family: "Cousine", monospace; font-size: 16px; line-height: 1.5; color: var(--vf-black); } .vf-case-study__button { display: inline-block; padding: 14px 18px; border: 3px solid var(--vf-black); background: var(--vf-blue); box-shadow: 5px 5px 0 var(--vf-black); font-family: "Cousine", monospace; font-size: 14px; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none !important; color: var(--vf-white) !important; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .vf-case-study__button:hover, .vf-case-study__button:focus { background: var(--vf-red); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--vf-black); } @media screen and (max-width: 767px) { .vf-case-study { padding: 20px 14px 44px; } .vf-case-study__inner { max-width: 100%; } .vf-case-study__hero { margin-bottom: 20px; padding-bottom: 14px; } .vf-case-study__title { font-size: clamp(34px, 13vw, 52px); } .vf-case-study__dek, .vf-case-study__section p, .vf-case-study__list li, .vf-case-study__footer-text { font-size: 15px; } .vf-case-study__media { margin-bottom: 16px; } .vf-case-study__embed { margin-bottom: 22px; padding: 10px; } .vf-case-study__section { margin-bottom: 20px; } .vf-case-study__footer { margin-top: 26px; padding: 16px; } .vf-case-study__button { width: 100%; text-align: center; box-sizing: border-box; } }