/* --- GLOBAL RESET --- 
   This ensures pseudo-elements don't show up unless a breakpoint is hit 
*/
[class*="border-left-fade-"], [class*="border-right-fade-"], 
[class*="border-top-fade-"], [class*="border-bottom-fade-"] {
    position: relative;
}

/* --- SM: Mobile and Up (576px+) --- */
@media (min-width: 576px) {
    .border-left-fade-sm::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4), transparent); }
    .border-right-fade-sm::after { content: ""; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4), transparent); }
    .border-top-fade-sm::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.4), transparent); }
    .border-bottom-fade-sm::after { content: ""; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.4), transparent); }
}

/* --- MD: Tablet and Up (768px+) --- */
@media (min-width: 768px) {
    .border-left-fade-md::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4), transparent); }
    .border-right-fade-md::after { content: ""; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4), transparent); }
    .border-top-fade-md::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.4), transparent); }
    .border-bottom-fade-md::after { content: ""; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.4), transparent); }
}

/* --- LG: Desktop and Up (992px+) --- */
@media (min-width: 992px) {
    .border-left-fade-lg::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4), transparent); }
    .border-right-fade-lg::after { content: ""; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4), transparent); }
    .border-top-fade-lg::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.4), transparent); }
    .border-bottom-fade-lg::after { content: ""; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.4), transparent); }
}

/* --- SM: Mobile and Up (576px+) --- */
@media (min-width: 576px) {
    body.dark-mode .border-left-fade-sm::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4), transparent); }
    body.dark-mode .border-right-fade-sm::after { content: ""; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4), transparent); }
    body.dark-mode .border-top-fade-sm::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); }
    body.dark-mode .border-bottom-fade-sm::after { content: ""; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); }
}

/* --- MD: Tablet and Up (768px+) --- */
@media (min-width: 768px) {
    body.dark-mode .border-left-fade-md::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4), transparent); }
    body.dark-mode .border-right-fade-md::after { content: ""; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4), transparent); }
    body.dark-mode .border-top-fade-md::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); }
    body.dark-mode .border-bottom-fade-md::after { content: ""; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); }
}

/* --- LG: Desktop and Up (992px+) --- */
@media (min-width: 992px) {
    body.dark-mode .border-left-fade-lg::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4), transparent); }
    body.dark-mode .border-right-fade-lg::after { content: ""; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4), transparent); }
    body.dark-mode .border-top-fade-lg::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); }
    body.dark-mode .border-bottom-fade-lg::after { content: ""; position: absolute; bottom: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); }
}