/* Proportions for the five capability links on the Astana homepage only. */
#astana-capabilities .astana-capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
    border: 0;
    background: transparent;
}

#astana-capabilities a.astana-capability-card {
    --capability-title-size: clamp(20px, 1.75vw, 24px);
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) 20px;
    grid-template-rows: auto;
    align-items: center;
    align-content: center;
    gap: 16px;
    min-width: 0;
    min-height: 128px;
    padding: 16px;
    border: 1px solid var(--astana-line, #b8b8b0);
    background: transparent;
    color: var(--astana-text, #484640);
    text-align: left;
    text-decoration: none;
}

#astana-capabilities a.astana-capability-card:nth-child(n) { grid-column: auto; }

#astana-capabilities a.astana-capability-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

#astana-capabilities a.astana-capability-card::after { content: none; }

#astana-capabilities a.astana-capability-card img {
    display: block;
    width: 148px;
    height: 96px;
    max-width: 100%;
    margin: 0;
    justify-self: start;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: normal;
    filter: none;
    opacity: 1;
}

body.astana-signal-home #astana-capabilities a.astana-capability-card h3 {
    min-width: 0;
    max-width: none;
    margin: 0;
    color: inherit;
    /* Existing typography forces all headings with !important. */
    font-size: var(--capability-title-size) !important;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-wrap: balance;
    align-self: center;
    justify-self: start;
    text-align: left;
}

#astana-capabilities .astana-capability-arrow {
    align-self: center;
    color: var(--astana-text, #484640);
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    line-height: 1;
}

#astana-capabilities a.astana-capability-card:is(:hover, :focus-visible) {
    background: #fff;
    color: var(--astana-text, #484640);
}

#astana-capabilities a.astana-capability-card:is(:hover, :focus-visible) h3 {
    color: inherit;
    text-decoration-color: var(--astana-orange, #ff6a00);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

#astana-capabilities a.astana-capability-card:focus-visible {
    outline: 2px solid var(--astana-text, #484640);
    outline-offset: 3px;
}

@media (max-width: 899.98px) {
    #astana-capabilities .astana-capability-grid { grid-template-columns: 1fr; gap: 12px; }
    #astana-capabilities a.astana-capability-card { --capability-title-size: 22px; grid-template-columns: 136px minmax(0, 1fr) 20px; min-height: 112px; padding: 12px 16px; }
    #astana-capabilities a.astana-capability-card img { width: 136px; height: 88px; }
}

@media (max-width: 599.98px) {
    #astana-capabilities a.astana-capability-card { --capability-title-size: 18px; grid-template-columns: 104px minmax(0, 1fr) 18px; gap: 12px; min-height: 104px; padding: 12px; }
    #astana-capabilities a.astana-capability-card img { width: 104px; height: 68px; }
    #astana-capabilities .astana-capability-arrow { font-size: 22px !important; }
}

@media (max-width: 359.98px) {
    #astana-capabilities a.astana-capability-card { grid-template-columns: 88px minmax(0, 1fr) 18px; gap: 10px; padding: 10px; }
    #astana-capabilities a.astana-capability-card img { width: 88px; height: 58px; }
}