@media all {
    #promo_intro ul.promotion_list { margin-top:var(--spacing-2L); gap:var(--spacing-1L); }
    #promo_intro ul.promotion_list li { position:relative; height:40vh; background-color:var(--color-red); background-size:cover; background-repeat:no-repeat; border-radius:var(--spacing-1S); }
    #promo_intro ul.promotion_list li:after { content: ""; position: absolute; top:0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 20%, black 100%); pointer-events: none; opacity:.9; border-radius:var(--spacing-1S); z-index: 1; }

    #promo_intro ul.promotion_list li a { position:absolute; top:0px; right:0px; left:0px; bottom:0px; border-radius:var(--spacing-1S); z-index:4; }
    #promo_intro ul.promotion_list li:hover .body  p.view,
    #promo_intro ul.promotion_list li:focus .body  p.view { text-decoration:none; }

    #promo_intro ul.promotion_list li .body { position:absolute; width:80%; bottom:var(--spacing-2L); left:var(--spacing-1L); z-index:2; }

    #promo_intro ul.promotion_list li .body p { margin:0px; color:var(--color-white); filter: drop-shadow(0px 0px 5px var(--color-black)); }
    #promo_intro ul.promotion_list li .body p.name { font-size:var(--font-size-1L); font-weight:var(--font-weight-bold); }
    #promo_intro ul.promotion_list li .body p.description { font-size:var(--font-size-1S); }
    #promo_intro ul.promotion_list li .body p.view { margin-top:var(--spacing-1S); font-weight:var(--font-weight-boldest); text-transform:uppercase; text-decoration:underline; letter-spacing:1.4px;}
}

@media (max-width:1600px) {

}

@media (max-width:1400px) {
    
}

@media (max-width:1200px) {

}

@media (max-width:1000px) {
    #promo_intro ul.promotion_list li .body p.name { font-size:var(--font-size-3L); }
    #promo_intro ul.promotion_list li .body p.description { font-size:var(--font-size-1L); }
}

@media (max-width:700px) {
    #promo_intro ul.promotion_list { grid-template-columns:1fr; }
    #promo_intro ul.promotion_list li .body { padding-left:var(--spacing-2L); }
}

@media (max-width:600px) {

}