/* FERRIES & AIRPORTS PAGES */

        .grid-container {
        display: grid;
        grid-template-columns: 200px 1fr;
        height: 100vh;
        }
        .sidebar {
        background-color: #f8f8f8;
        color: rgb(60, 60, 60);
        padding: 20px;
        position: sticky;
        top: 0px;
        }
        .sidebar a {
        display: block;
        color: rgb(60, 60, 60);
        text-decoration: none;
        padding: 10px;
        }
        .content-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 01px;
        padding: 0px;
        overflow-y: auto;
        height: auto;
        }
        .content-box {
        background-color: #f8f8f8;
        padding: 0px;
        }
        .row-2-span-2,
        .row-3-span-2,
        .row-5-span-2,
        .row-6-span-2,
        .row-8-span-2,
        .row-9-span-2,
        .row-12-span-2,
        .row-15-span-2,
        .row-18-span-2,
        .row-21-span-2 {
        grid-column: span 2;
        padding: 1fr;
        }

        @media (max-width: 768px) {
        .grid-container {
            display: block;
            height: auto;
            clear: both;
        }
        .grid-container::after {
            content: "";
            display: block;
            clear: both;
        }
        .sidebar {
            padding: 10px;
        }
        }
        
/* SIDEBAR NAVIGATION ICONS */
        .sidebar ul li {
            list-style-type: none;
            padding-left: 25px;
            position: relative;
        }
        .sidebar ul li::before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            color: #2baab1;
        }
        .sidebar ul li.ferry-icon::before {
            content: "\f21a";
        }
        .sidebar ul li.plane-icon::before {
            content: "\f072";
        }