.srave-media-box {
    --srave-horizontal-padding: 1rem;
    --srage-vertical-padding: 0.5rem;

    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    width: 100%;
    margin: 0;
    margin-bottom: 1rem;
}

.srave-media-box.srave--title-top {
    grid-template-areas:
            "title"
            "video"
            "description";
}

.srave-media-box.srave--title-bottom {
    grid-template-areas:
            "video"
            "title"
            "description";
}

.srave-media-video {
    grid-area: video;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: #666;
    height: auto;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin-bottom: var(--srage-vertical-padding);
}

.srave-media-caption {
    grid-area: "title";

}

div.srave-media-description {
    grid-area: description;
    padding: var(--srage-vertical-padding) var(--srave-horizontal-padding);
}

ia-caption h1, .srave-media-caption h2, .srave-media-caption h3, .srave-media-caption h4, .srave-media-caption h5, .srave-media-caption h6, .srave-media-caption div.srave-media-description {
    margin: 0;
    padding: var(--srage-vertical-padding) var(--srave-horizontal-padding);
}