una/modules/boonex/stories/template/css/main.css

/**-- Story styles ---*/
.bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-unit-showcase .bx-base-text-unit-cnt {
    max-width: 10rem;
}

/*-- Story: phone --*/
.bx-media-phone .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
   width:calc(50%);
}
.bx-media-phone2 .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
   width:calc(33.3%);
}

/*-- Story: tablet --*/
.bx-media-tablet .bx-layout-column-thin .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
    width:calc(100%);
}
.bx-media-tablet .bx-layout-column-half .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase,
.bx-media-tablet .bx-layout-column-wide .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase,
.bx-media-tablet .bx-layout-column-fullwidth .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
   width: calc(25%);
}
.bx-media-tablet2 .bx-layout-column-thin .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
    width: calc(50%);
}
.bx-media-tablet2 .bx-layout-column-fullwidth .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
   width: calc(20%);
}

/*-- Story: desktop --*/
.bx-media-desktop .bx-layout-column-thin .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
    width:calc(50%);
}
.bx-media-desktop .bx-layout-column-half .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
    width:calc(25%);
}
.bx-media-desktop .bx-layout-column-wide .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
    width:calc(20%);
}
.bx-media-desktop .bx-layout-column-fullwidth  .bx-base-unit-showcase-wrapper.bx-stories-wrapper .bx-base-text-unit-showcase {
    width:calc(16.66%);
}

/**-- Media styles in a story ---*/
.bx-stories-medias-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    /* makes all items on a row equal height */
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    /* wrap onto the next line rather than stretching or shrinking */
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    /* tells flexbox to start items from the left */
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    plex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.bx-stories-medias-wrapper .bx-stories-media-wrapper {
    -webkit-box-flex: 0;

    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;

    max-width: 100%;
}

.bx-stories-media-wrapper .bx-stories-unit-size {
    width: 100%;
    height: auto;
    min-height: 10rem;
    object-fit: cover;
}
	
/* MEDIA: phone2 */

.bx-media-phone2 .bx-layout-column-half .bx-stories-medias-wrapper .bx-stories-media-wrapper,
.bx-media-phone2 .bx-layout-column-thin .bx-stories-medias-wrapper .bx-stories-media-wrapper {
    -webkit-flex: 0 0 49.8%;
    -ms-flex: 0 0 49.8%;
    flex: 0 0 49.8%;
    
    max-width: 49.8%;
}

/* MEDIA: tablet2 */

.bx-media-tablet2 #sys_search_results .bx-stories-medias-wrapper .bx-stories-media-wrapper,
.bx-media-tablet2 .bx-layout-column-wide .bx-stories-medias-wrapper .bx-stories-media-wrapper,
.bx-media-tablet2 .bx-layout-column-fullwidth .bx-stories-medias-wrapper .bx-stories-media-wrapper {
    -webkit-flex: 0 0 49.8%;
    -ms-flex: 0 0 49.8%;
    flex: 0 0 49.8%;
    
    max-width: 49.8%;
}

.bx-media-tablet2 .bx-layout-column-wide .bx-stories-medias-wrapper .bx-stories-media-wrapper .bx-stories-unit-size {
    width: 100%;
    height: auto;
}

.bx-media-tablet2 #sys_search_results .bx-stories-medias-wrapper .bx-stories-media-wrapper .bx-stories-unit-size,
.bx-media-tablet2 .bx-layout-column-fullwidth .bx-stories-medias-wrapper .bx-stories-media-wrapper .bx-stories-unit-size {
    height: 18.0rem;
}

/* MEDIA: desktop */

.bx-media-desktop .bx-layout-column-wide .bx-stories-medias-wrapper .bx-stories-media-wrapper {
    -webkit-flex: 0 0 49.8%;
    -ms-flex: 0 0 49.8%;
    flex: 0 0 49.8%;
    
    max-width: 49.8%;
}

.bx-media-desktop .bx-layout-column-wide .bx-stories-medias-wrapper .bx-stories-media-wrapper .bx-stories-unit-size {
    width: 100%;
    height: auto;
}
    
.bx-media-desktop #sys_search_results .bx-stories-medias-wrapper .bx-stories-media-wrapper,
.bx-media-desktop .bx-layout-column-fullwidth .bx-stories-medias-wrapper .bx-stories-media-wrapper {
    -webkit-flex: 0 0 33.25%;
    -ms-flex: 0 0 33.25%;
    flex: 0 0 33.25%;
    
    max-width: 33.25%;
}

.bx-media-desktop #sys_search_results .bx-stories-medias-wrapper .bx-stories-media-wrapper .bx-stories-unit-size,
.bx-media-desktop .bx-layout-column-half .bx-stories-medias-wrapper .bx-stories-media-wrapper .bx-stories-unit-size,
.bx-media-desktop .bx-layout-column-fullwidth .bx-stories-medias-wrapper .bx-stories-media-wrapper .bx-stories-unit-size {
    height: 18.0rem;
}

.bx-search-result-block .bx-base-text-unit-gallery-wrapper {
	display: block;
}
.bx-search-result-block.bx-base-text-unit-gallery-wrapper .bx-base-text-unit.bx-base-text-unit-gallery {
	display: inline-block;
}
.bx-search-result-block.bx-stories-media .bx-search-result-content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    margin: -0.5rem;
}

.bx-stories-media-thumb {
    position: relative;    
}
.bx-stories-media-thumb a {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.bx-stories-media-play {
    position: absolute;

    width: 3rem;
    height: 3rem;

    background-color: rgba(255, 255, 255, 0.3);

    text-align: center;
    line-height: 3rem;
    font-size: 1.5rem;
}
.bx-stories-media-duration {
    position: absolute;
    right: 10px;
    bottom: 10px;

    background-color: rgba(255, 255, 255, 0.9);
}
.bx-stories-media-caption {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.bx-stories-media-actions {
    text-align: center;
}
.bx-base-text-unit-ext .bx-stories-unit-text-cont {
    text-align: left;
}
.bx-stories-unit-images {
    white-space:nowrap;
    width:100%;
    overflow: hidden;
}
.bx-stories-unit-image {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;

    margin-right: 0.125rem;
}
.bx-stories-unit-image,
.bx-stories-unit-image img {
    height: 11.25rem;
}
.bx-base-text-unit-gallery .bx-stories-unit-images-cont {
    padding: 0;
}
.bx-base-text-unit-gallery .bx-stories-unit-text-cont {
    line-height: 150%;
}
.bx-base-text-unit-gallery .bx-stories-unit-text-cont .bx-base-text-unit-title {
    text-align: left;
}
.bx-stories-unit-author-icon {
    position: absolute;
    top: 0;
}
.bx-stories-unit-author-name {
    position: absolute;
    bottom: 0;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

.bx-stories-media-file {
    text-align: center;    
}

.bx-stories-media-file img,
.bx-stories-media-file video {
    max-width:100%;
}

.bx-stories-media-title {
    position:relative;
    padding-right:6rem;
}

.bx-stories-media-title h1, 
.bx-stories-media-title h2, 
.bx-stories-media-title p {
    margin:0;
}

.bx-stories-media-controls {
    position:absolute;
    top:0;
    right:0;
}

/*--- Play popup ---*/
.bx-stories-play {
    width: 20rem;
}

.bx-stories-p-list .bx-stories-pl-media {
    display: none;
}
.bx-stories-p-list .bx-stories-pl-media:first-child {
    display: flex;
}
.bx-stories-pl-media {
    max-width: 18rem;
}