@media (max-width: 600px) {

    h1 {font-size: 2rem;}
    h2 {font-size: 1.25rem; line-height: 1.6;}
    h3 {font-size: .5rem;} 
    .intro p {font-size: 1rem;}

    .page {padding-top: 1rem;}
    .page-container {padding: 20px;}
    .page-container.top {padding-bottom: 0;}
    .section-container {margin: 3rem 0;} 
    
    .grid-bar {flex-direction: column;}
    .grid-bar-item {width: 100%;}
    .grid-bar-item.center, .footer .grid-bar-item.right {justify-content: center;}
    .grid-bar-item.right {justify-content: flex-end;}
    .top .grid-bar-item.left {display: none;}
    .top .grid-bar-item.center {justify-content: space-between;}
    .footer-nav {justify-content: center; padding: 1.25rem 0 0 0 ;}
    .grid-bar-item.right .footer-nav {padding: .5rem 0 0 0 ;}
    
    .grid-bar.top {gap: 1rem; margin: 0 0 2rem 0;}
    .grid-bar.footer {margin-top: 0;}

    .nav-button {font-size: 1.2rem;}

    .col {gap: 3rem;}
    .col.nogap {gap: 0rem}
    .col-2{flex-direction: column;}
    .col-2-item {width: 100%;}
    .oFir {order: 1;}
    .oSec {order: 2;}
    .oThi {order: 3;}

    .cv-item {margin-left: 0;}   
    .cv-item-year {min-width: 7rem;}
    .cv-item-details {margin-left: .5rem;}  

    .filter .reset {font-size: 1rem;}
    
    #darkmode-toggle {width: 25px;height: 25px;}

    #mDisable {display: none;}

    .grid {grid-template-columns: repeat(1, 1fr);}
    .tile.double, .tile.tripel {grid-column: span 1; padding-top: 100%;}
    .tile.tripel .overlay .title {font-size: 1rem; font-variation-settings: 'wght' 600, 'wdth' 7, 'ital' 0;}
    .overlay {opacity: 1; background: rgba(0, 0, 0, 0.3);}

    .popup-container .content {padding: 20px 20px 75px 20px;}
    .popup h2 {font-size: 1.5rem; margin-bottom: 1.5rem;}
    .additional-images {grid-template-columns: repeat(1, 1fr); gap: 1.5rem;}
    
}

@media (max-width: 768px) {
    /* .grid {grid-template-columns: repeat(2, 1fr);} */
}