.capabilities {
    display: grid;
    align-items: center;
}

.capabilities__header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    gap: var(--space-lg);
    align-items: end;
}

.capabilities__header > .section-copy {
    max-width: var(--section-copy-wide-max);
    justify-self: end;
}

.capabilities__grid {
    display: grid;
    grid-template-areas:
        "seo seo advertising analytics"
        "seo seo interface analytics"
        "content content social customer"
        "content content integrations integrations"
        "support support integrations integrations";
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(10.5rem, auto);
    gap: var(--capabilities-grid-gap);
    margin-top: var(--capabilities-grid-offset);
}

.capability-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--surface-radius-large);
    background: var(--capability-card-background);
    box-shadow: var(--surface-shadow);
}

.capability-card--seo {
    --capability-card-background: color-mix(in srgb, var(--color-page) 58%, var(--color-turquoise));
    grid-area: seo;
}

.capability-card--advertising {
    --capability-card-background: color-mix(in srgb, var(--color-page) 66%, var(--color-action));
    grid-area: advertising;
}

.capability-card--analytics {
    --capability-card-background: color-mix(in srgb, var(--color-page) 72%, var(--color-orange));
    grid-area: analytics;
}

.capability-card--interface {
    --capability-card-background: color-mix(in srgb, var(--color-page) 76%, var(--color-turquoise));
    grid-area: interface;
}

.capability-card--content {
    --capability-card-background: color-mix(in srgb, var(--color-page) 70%, var(--color-orange));
    grid-area: content;
}

.capability-card--social {
    --capability-card-background: color-mix(in srgb, var(--color-page) 64%, var(--color-action));
    grid-area: social;
}

.capability-card--customer {
    --capability-card-background: color-mix(in srgb, var(--color-page) 72%, var(--color-orange));
    grid-area: customer;
}

.capability-card--integrations {
    --capability-card-background: color-mix(in srgb, var(--color-page) 60%, var(--color-turquoise));
    grid-area: integrations;
}

.capability-card--support {
    --capability-card-background: color-mix(in srgb, var(--color-page) 86%, var(--color-deep-blue));
    grid-area: support;
}

.capability-card .card-title {
    color: var(--color-heading);
}

.capability-card .card-copy {
    margin-top: var(--space-xs);
    color: var(--color-graphite);
}

.capability-card__media {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.capability-card__media-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.capability-card--seo .capability-card__media-image {
    object-position: center 38%;
}

.capability-card--analytics .capability-card__media-image {
    object-position: center 38%;
}

.capability-card__body {
    padding: var(--capabilities-card-padding);
}

.capability-card > .brand-list {
    margin-top: auto;
    padding: 0 var(--capabilities-card-padding) var(--capabilities-card-padding);
}

@media (max-width: 79.9375rem) {
    .capabilities__grid {
        grid-template-areas:
            "seo seo advertising"
            "seo seo interface"
            "analytics content content"
            "analytics content content"
            "social customer integrations"
            "support support integrations";
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 63.9375rem) {
    .capabilities__header {
        grid-template-columns: minmax(0, 1fr);
    }

    .capabilities__header > .section-copy {
        justify-self: start;
    }

    .capabilities__grid {
        grid-template-areas:
            "seo seo"
            "advertising interface"
            "analytics content"
            "analytics content"
            "social customer"
            "integrations integrations"
            "integrations integrations"
            "support support";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.9375rem) {
    .capabilities__grid {
        grid-template-areas:
            "seo"
            "advertising"
            "analytics"
            "interface"
            "content"
            "social"
            "customer"
            "integrations"
            "support";
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }
}