/* ============================================
   RESPONSIVE STYLES
   Maharat Al-Muhandis Website
   ============================================ */

/* ========== MOBILE FIRST APPROACH ========== */

/* Base styles are for mobile (320px+) */

/* ========== SMALL DEVICES (640px and up) ========== */
@media (min-width: 640px) {
    .container {
        padding: 0 var(--space-8);
    }

    h1 {
        font-size: var(--text-6xl);
    }

    h2 {
        font-size: var(--text-5xl);
    }

    .section {
        padding: var(--space-24) 0;
    }
}

/* ========== MEDIUM DEVICES (768px and up) ========== */
@media (min-width: 768px) {
    .navbar__container {
        padding: var(--space-4) var(--space-8);
    }

    .grid-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .flex-md-row {
        flex-direction: row;
    }

    .text-md-left {
        text-align: left;
    }
}

/* ========== LARGE DEVICES (1024px and up) ========== */
@media (min-width: 1024px) {
    h1 {
        font-size: var(--text-7xl);
    }

    .section-lg {
        padding: var(--space-32) 0;
    }

    .grid-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========== EXTRA LARGE DEVICES (1280px and up) ========== */
@media (min-width: 1280px) {
    .container {
        padding: 0 var(--space-12);
    }
}

/* ========== PRINT STYLES ========== */
@media print {

    .navbar,
    .footer,
    .btn {
        display: none;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    a {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }
}