/* theme_moebel_extension's uikit.css redefines .embed-responsive-4by3 to
   padding-bottom:120% (portrait) instead of Bootstrap's real 4:3 (75%). Don't
   fight that cascade - neutralize the whole height:0/padding-bottom hack for
   just this box and size .o_wslides_catalog_trigger directly via aspect-ratio
   instead (also drives the box on the channel-page grid, where there was no
   embed-responsive wrapper to begin with). */
.o_wslides_catalog_embed_box {
    height: auto !important;
    padding-bottom: 0 !important;
}

.o_wslides_catalog_trigger {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    overflow: hidden;
    background: #ffffff;
}

.o_wslides_catalog_trigger img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.o_wslides_catalog_trigger_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 24px;
    transition: background 0.15s ease-in-out;
}

.o_wslides_catalog_trigger_icon i {
    position: relative;
    top: 0;
}

.o_wslides_catalog_trigger:hover .o_wslides_catalog_trigger_icon {
    background: rgba(0, 0, 0, 0.75);
}