/* ==========================================================================
   Emergence Mag - Responsive Adjustments
   ========================================================================== */

/* 1. Very small screens (320px - 414px) */
@media (max-width: 480px) {
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .top-bar-socials {
        display: none !important;
    }

    .carousel-slide h2 {
        font-size: 1.1rem !important;
        line-height: 1.35 !important;
    }

    .carousel-slide p {
        display: none !important;
    }

    #main-carousel {
        height: 18rem !important;
    }

    .article-reading-content {
        font-size: 1rem;
        line-height: 1.7;
    }

    .article-reading-content > p:first-of-type::first-letter {
        font-size: 2.75rem;
    }
}

/* 2. Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    #main-carousel {
        height: 26rem;
    }
}

/* 3. Desktop standard & Large screens (1024px - 1920px) */
@media (min-width: 1024px) {
    #main-carousel {
        height: 30rem;
    }
}