/* === COMPONENTS CSS === */

@import url('./components/lightbox.css');
@import url('./components/code-blocks.css');
@import url('./components/interactive.css');
@import url('./components/cards.css');
@import url('./components/blog.css');

@import url('./shared/animations.css');
@import url('./shared/common-components.css');

.component-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.component-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
    
    .show-desktop {
        display: block !important;
    }
}