.os-community { padding: 115px var(--os-pad); color: #11110f; background: #f4f1e8; }
.os-community__heading { margin-bottom: 48px; display: grid; grid-template-columns: 1fr auto; align-items: end; }
.os-community__heading .os-eyebrow { grid-column: 1 / -1; }
.os-community__heading h2 { margin: 0; font-size: clamp(48px, 6vw, 92px); font-weight: 900; line-height: .84; letter-spacing: -.07em; }
.os-community__heading > a { padding-bottom: 5px; border-bottom: 1px solid; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.os-community__grid { display: grid; grid-template-columns: 1.05fr .78fr 1.05fr; grid-template-rows: 330px 290px; gap: 14px; }
.os-community__card { overflow: hidden; position: relative; display: grid; place-items: center; background: var(--card-bg); }
.os-community__card img { width: 115%; max-height: 86%; position: relative; z-index: 1; object-fit: contain; filter: drop-shadow(0 18px 12px rgba(0,0,0,.24)); transform: rotate(-8deg); }
.os-community__card > span { position: absolute; z-index: 2; left: 14px; bottom: 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.os-community__card--one { grid-row: 1 / 3; }
.os-community__card--one img { transform: rotate(-42deg) scale(1.18); }
.os-community__card--three { grid-column: 2 / 4; }
.os-community__card--three img { width: 73%; transform: rotate(7deg); }
.os-community blockquote { margin: 0; padding: 36px; display: flex; flex-direction: column; justify-content: center; color: #fff; background: #1647ff; }
.os-community blockquote > div { color: #d8ff3e; font-size: 14px; letter-spacing: .1em; }
.os-community blockquote p { margin: 24px 0 28px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(20px, 2vw, 30px); line-height: 1.2; }
.os-community cite { font-size: 12px; font-style: normal; font-weight: 800; text-transform: uppercase; }
@media (max-width: 700px) { .os-community__heading { grid-template-columns: 1fr; gap: 24px; } .os-community__heading > a { justify-self: start; } .os-community__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 320px 270px 280px; } .os-community__card--one { grid-row: auto; } .os-community blockquote { grid-column: 1 / 3; grid-row: 2; } .os-community__card--three { grid-column: 1 / 3; } .os-community__card--three img { width: 100%; } }