.mwp-connection-methods {
    margin-top: 32px;
    min-width: 0;
}

.mwp-connection-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.mwp-connection-card {
    background: var(--mwp-section-surface, var(--mwp-surface, var(--mwp-surface-color)));
    border: 1px solid var(--mwp-section-border, var(--mwp-border, var(--mwp-border-color)));
    color: var(--mwp-section-text, var(--mwp-text, var(--mwp-text-color)));
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mwp-connection-media {
    aspect-ratio: 16/9;
    display: block;
    object-fit: cover;
    width: 100%;
}

.mwp-connection-card-body {
    padding: 24px;
}

.mwp-connection-card h3 {
    font-size: 1.35rem;
    margin: 8px 0;
}

.mwp-connection-card p,
.mwp-connection-card .mwp-pricing-rich {
    color: var(--mwp-section-muted, var(--mwp-muted, var(--mwp-muted-text-color)));
    line-height: 1.55;
}

.mwp-connection-badge {
    color: var(--mwp-section-accent, var(--mwp-accent, var(--mwp-accent-color)));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mwp-connection-icon {
    color: var(--mwp-section-accent, var(--mwp-accent, var(--mwp-accent-color)));
    font-size: 1.4rem;
    margin-left: 8px;
}

.mwp-connection-price {
    color: var(--mwp-section-accent, var(--mwp-accent, var(--mwp-accent-color)));
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.mwp-connection-card dl {
    border-top: 1px solid var(--mwp-section-border, var(--mwp-border, var(--mwp-border-color)));
    margin: 16px 0 0;
    padding-top: 10px;
}

.mwp-connection-card dl div {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 4px 0;
}

.mwp-connection-card dt {
    color: var(--mwp-section-muted, var(--mwp-muted, var(--mwp-muted-text-color)));
    font-weight: 400;
}

.mwp-connection-card dd {
    font-weight: 600;
    margin: 0;
    text-align: right;
}

.mwp-connection-placement,
.mwp-connection-main {
    min-width: 0;
}

.mwp-connection-placement--side {
    align-items: start;
    display: grid;
    gap: clamp(24px, 4vw, 48px);
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.mwp-connection-placement--side > .mwp-connection-methods {
    margin-top: 0;
}

.mwp-connection-placement--top {
    margin-bottom: clamp(24px, 4vw, 48px);
}

.mwp-connection-placement--top .mwp-connection-methods,
.mwp-connection-placement--default .mwp-connection-methods,
.mwp-connection-placement--bottom .mwp-connection-methods,
.mwp-connection-placement--full_width .mwp-connection-methods {
    margin-top: 0;
}

.mwp-connection-placement--default,
.mwp-connection-placement--bottom,
.mwp-connection-placement--full_width {
    margin-top: clamp(24px, 4vw, 48px);
    width: 100%;
}

.mwp-connection-methods--compact_cards .mwp-connection-grid {
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.mwp-connection-methods--compact_cards .mwp-connection-card-body {
    padding: 16px 18px;
}

.mwp-connection-methods--compact_cards .mwp-connection-media,
.mwp-connection-methods--compact_cards .mwp-pricing-rich {
    display: none;
}

.mwp-connection-methods--compact_cards .mwp-connection-card h3 {
    font-size: 1.08rem;
    margin: 5px 0;
}

.mwp-connection-methods--compact_cards .mwp-connection-price {
    font-size: .96rem;
    margin-bottom: 8px;
}

.mwp-connection-methods--compact_cards .mwp-connection-card p {
    font-size: .9rem;
    margin: 0 0 8px;
}

.mwp-connection-methods--compact_cards .mwp-connection-card dl {
    font-size: .82rem;
    margin-top: 10px;
    padding-top: 7px;
}

.mwp-connection-placement--side .mwp-connection-methods--compact_cards .mwp-connection-grid {
    grid-template-columns: 1fr;
}

.mwp-connection-methods--list .mwp-connection-grid {
    grid-template-columns: 1fr;
}

.mwp-connection-methods--list .mwp-connection-card {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
}

.mwp-connection-methods--list .mwp-connection-card--no-media {
    grid-template-columns: 1fr;
}

.mwp-connection-methods--list .mwp-connection-media {
    aspect-ratio: auto;
    height: 100%;
}

.mwp-connection-methods--comparison .mwp-connection-grid {
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.mwp-connection-methods--comparison .mwp-connection-card {
    border-top: 3px solid var(--mwp-section-accent, var(--mwp-accent, var(--mwp-accent-color)));
}

.mwp-learn-section-layout.has-pricing > .mwp-connection-methods {
    grid-column: 1/-1;
}

.mwp-section .mwp-connection-placement--side .mwp-connection-main .mwp-row {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    .mwp-connection-placement--side {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .mwp-connection-grid,
    .mwp-connection-methods--compact_cards .mwp-connection-grid,
    .mwp-connection-methods--comparison .mwp-connection-grid {
        grid-template-columns: 1fr;
    }

    .mwp-connection-methods--list .mwp-connection-card {
        grid-template-columns: 1fr;
    }

    .mwp-connection-methods--list .mwp-connection-media {
        aspect-ratio: 16/9;
        height: auto;
    }
}