/* Axoli Tiles About page (original code for this site). Uses the tokens and components in site.css. */

.ax-about-hero__grid { display: grid; gap: 24px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
@media (min-width: 1024px) { .ax-about-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 72px; } }
.ax-about-hero__grid .ax-h1 { max-width: 12ch; }
.ax-about-hero__media { aspect-ratio: 16 / 8; }
@media (max-width: 767px) { .ax-about-hero__media { aspect-ratio: 4 / 3; } }

/* our work: title and photo held on the left while the text scrolls past */
.ax-about-split { display: grid; gap: 36px; }
@media (min-width: 1024px) {
    .ax-about-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; }
    .ax-about-split__aside { position: sticky; top: calc(var(--ax-header-h) + 32px); align-self: start; }
}
.ax-about-split__media { margin: 32px 0 0; aspect-ratio: 4 / 3; }
.ax-about-split__text { display: grid; gap: 4px; font-size: 1.075rem; color: var(--ax-ink-2); }
@media (min-width: 1024px) { .ax-about-split__text { padding-top: 64px; font-size: 1.15rem; } }
.ax-about-split__text p:first-child { font-size: var(--ax-fs-lead); color: var(--ax-ink); }

.ax-about-colls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(48px, 6vw, 96px); }
@media (min-width: 1024px) { .ax-about-colls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.ax-about-colls__item { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.ax-about-colls__item .ax-media { display: block; aspect-ratio: 4 / 5; border-radius: var(--ax-r-m); }
.ax-about-colls__name { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; letter-spacing: -0.015em; }
.ax-about-colls__name svg { width: 14px; height: 14px; transition: transform 0.35s var(--ax-ease); }
.ax-about-colls__item:hover .ax-about-colls__name { color: var(--ax-accent-ink); }
.ax-about-colls__item:hover .ax-about-colls__name svg { transform: translateX(4px); }

/* our approach */
.ax-about-approach .ax-display { max-width: 12ch; margin-bottom: clamp(36px, 5vw, 72px); }
.ax-about-approach__cols { display: grid; gap: 8px 48px; max-width: 1100px; margin-bottom: 36px; color: var(--ax-on-dark-muted); font-size: 1.05rem; }
@media (min-width: 900px) { .ax-about-approach__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* brand statement */
.ax-about-brand { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .ax-about-brand { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 96px; } }
.ax-about-brand__media { aspect-ratio: 4 / 5; }
.ax-about-brand__text .ax-h2 { margin-bottom: 28px; }
.ax-about-brand__text p { color: var(--ax-ink-2); }

/* three room photos under mission, vision and values */
.ax-about-trio { display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
@media (min-width: 768px) { .ax-about-trio { grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; } }
.ax-about-trio .ax-media { margin: 0; aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .ax-about-trio .ax-media { aspect-ratio: auto; height: clamp(220px, 24vw, 380px); } }