/* Base styles (mobile-first approach) */
body {
    font-size: 16px;
    line-height: 1.5;
}

.container {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

/* Small devices (portrait phones, 320px and up) */
@media (min-width: 320px) {
    body {
        font-size: 16px;
    }

    .container {
        max-width: 320px;
    }

    .front-page-banner{
        padding:20px;
    }

    .logo-small {
        font-size: 1px;
        color: transparent;
    }
}

/* Small devices (landscape phones, 480px and up) */
@media (min-width: 480px) {
    body {
        font-size: 17px;
    }

    .container {
        max-width: 450px;
    }

    .front-page-banner {
        padding: 20px;
    }

    .logo-small {
        font-size: 1px;
        color:transparent;
    }
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }

    .container {
        max-width: 720px;
    }

    .sidebar {
        display: block;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        font-size: 18px;
    }

    .container {
        max-width: 960px;
    }

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

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }

    .container {
        max-width: 1140px;
    }

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

/* High resolution devices (retina displays) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Styles for high-resolution displays */
    .logo {
        background-image: url('logo@2x.png');
        background-size: contain;
    }

    .icon {
        background-image: url('icons@2x.png');
        background-size: cover;
    }
}

/* Print styles */
@media print {
    body {
        font-size: 12pt;
        color: #000;
        background: none;
    }

    .no-print {
        display: none;
    }

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