.mourning-ribbon {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    pointer-events: none;
}

.mourning-ribbon img {
    width: 100%;
    height: auto;
    display: block;
}

/* ซ้าย / ขวา */
.mourning-ribbon.left { left: 20px; }
.mourning-ribbon.right { right: 20px; }

/* ขนาด */
.mourning-ribbon.size-small { width: 60px; }
.mourning-ribbon.size-medium { width: 100px; }
.mourning-ribbon.size-large { width: 140px; }

@media (max-width: 768px) {
    .mourning-ribbon.size-small { width: 40px; }
    .mourning-ribbon.size-medium { width: 70px; }
    .mourning-ribbon.size-large { width: 100px; }
    .mourning-ribbon { top: 55%; transform: translateY(-35%); }
}

.black-ribbon {  
    position: fixed;
    z-index: 9999;
    width: 40px;
}
@media only all and (min-width: 768px) {  
    .black-ribbon {    
        width: auto;
    }
}

.b-left { 
    left: 0; 
}
.b-right { 
    right: 0; 
}
.b-top { 
    top: 0; 
}
.b-bottom { 
    bottom: 0; 
}