:root {
    --ig-canvas: #ffffff;
    --ig-soft: #f1f4f7;
    --ig-ink-deep: #0a1317;
    --ig-ink: #1c1e21;
    --ig-steel: #5d6c7b;
    --ig-hairline: #dee3e9;
    --ig-cobalt: #0064e0;
    --ig-font: "Optimistic VF", Montserrat, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
    background: var(--ig-canvas);
    color: var(--ig-ink);
    font-family: var(--ig-font);
}

.ig-hero {
    max-width: 1120px;
    margin: 56px auto 20px;
    padding: 0 24px;
}

.ig-kicker {
    margin: 0 0 8px;
    color: var(--ig-steel);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.ig-hero h1 {
    max-width: 820px;
    margin: 0;
    color: var(--ig-ink-deep);
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0;
}

.ig-hero p:not(.ig-kicker) {
    max-width: 760px;
    margin: 18px 0 0;
    color: var(--ig-steel);
    font-size: 18px;
    line-height: 1.45;
}

.ig-grid {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 24px 64px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.ig-card {
    display: grid;
    gap: 12px;
    color: var(--ig-ink-deep);
    text-decoration: none;
    font-weight: 700;
}

.ig-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--ig-hairline);
    border-radius: 16px;
    background: var(--ig-soft);
}

.ig-card:hover img,
.ig-card:focus img {
    border-color: var(--ig-cobalt);
}

.ig-card span {
    font-size: 15px;
    line-height: 1.25;
}