.panel {
    position: relative;

    min-height: 100vh;
    display: flex;
    align-items: center;

    padding: 118px 0 90px;

    overflow: hidden;
}

.panel-alt {
    background: var(--background-alt);
}

.panel-inner {
    width: min(calc(100% - 40px), var(--content-width));
    margin-inline: auto;
}

.hero-grid,
.product-grid,
.live-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
}

.card-grid,
.feature-grid,
.metric-grid,
.audience-grid,
.steps {
    display: grid;
    gap: 18px;
}

.card-grid-four {
    grid-template-columns: repeat(4, 1fr);
}

.card-grid-three {
    grid-template-columns: repeat(3, 1fr);
}

.feature-grid {
    grid-template-columns: repeat(3, 1fr);
}

.metric-grid {
    grid-template-columns: repeat(3, 1fr);
}

.audience-grid {
    grid-template-columns: repeat(4, 1fr);
}

.steps {
    grid-template-columns: repeat(4, 1fr);
}