/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container query */

.embed {
    container-type: inline-size;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* wrapper: */

.embed__wrapper {
    border-radius: var(--box-border-radius-sm);
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* sample: */

div#sample-embed {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00aeef99;
    font-family: "Cachet";
    font-size: 40px;
    font-weight: 600;
    color: var(--white);
}

@media (max-width: 992px) {
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* sample: */

    div#sample-embed {
        height: 300px;
    }
}