.gas-demo {
    margin: 2rem 0;
    padding: 1.1rem;
    border: 1px solid var(--pst-color-border, #bcc8d6);
    border-radius: 6px;
    background: var(--pst-color-surface, #f5f7fa);
}
.gas-demo-heading > span {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--pst-color-text-muted, #596678);
}
.gas-demo .gas-demo-title {
    margin: 0.4rem 0 1rem;
    font-size: 1.2rem;
}
.gas-demo-poster img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.gas-demo figcaption {
    padding: 0.8rem 0;
    font-size: 0.9rem;
    text-align: left;
}
.gas-demo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.25rem 0;
}
.gas-demo-actions button {
    border: 1px solid #269880;
    background: #123f3b;
    color: #fff;
    padding: 0.5rem 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}
.gas-demo-actions button:focus-visible {
    outline: 3px solid #51d2b7;
    outline-offset: 3px;
}
.gas-demo-actions a {
    font-size: 0.85rem;
}
.gas-demo-note {
    font-size: 0.7rem;
    color: var(--pst-color-text-muted, #596678);
    margin: 0.7rem 0 0;
}
.gas-demo-frame {
    width: 100%;
    height: 900px;
    border: 0;
    border-radius: 4px;
    background: #080f1a;
}
@media (max-width: 700px) {
    .gas-demo {
        padding: 0.7rem;
    }
    .gas-demo-frame {
        height: 1100px;
    }
}