@media (max-width: 767px) {

    :root {
        --radius-mid: 1rem;
        --radius-large: 1rem;
    }
    

    .wrapper {
        width: auto;
        margin-inline: 18px;
    }

    /* grid  */
    .start-1 { grid-column-start: 1; }
    .start-2 { grid-column-start: 1; }
    .start-3 { grid-column-start: 1; }
    .start-4 { grid-column-start: 1; }
    .start-5 { grid-column-start: 1; }
    .start-6 { grid-column-start: 1; }
    .span-1  { grid-column-end: span 6; }
    .span-2  { grid-column-end: span 6; }
    .span-3  { grid-column-end: span 6; }
    .span-4  { grid-column-end: span 6; }
    .span-5  { grid-column-end: span 6; }
    .span-6  { grid-column-end: span 6; }

    .mobile-start-1 { grid-column-start: 1; }
    .mobile-start-2 { grid-column-start: 2; }
    .mobile-start-3 { grid-column-start: 3; }
    .mobile-start-4 { grid-column-start: 4; }
    .mobile-start-5 { grid-column-start: 5; }
    .mobile-start-6 { grid-column-start: 6; }
    .mobile-span-1  { grid-column-end: span 1; }
    .mobile-span-2  { grid-column-end: span 2; }
    .mobile-span-3  { grid-column-end: span 3; }
    .mobile-span-4  { grid-column-end: span 4; }
    .mobile-span-5  { grid-column-end: span 5; }
    .mobile-span-6  { grid-column-end: span 6; }

    .spacer-7   { height: 4rem;     grid-column: 1 / span 6; } 
    .spacer-8   { height: 6rem;     grid-column: 1 / span 6; }
    .spacer-10  { height: 10rem;    grid-column: 1 / span 6; } 

    .mobile-spacer-0  { display: block; height: 0px;    grid-column: 1 / span 6; }
    .mobile-spacer-1  { display: block; height: 0.5rem;    grid-column: 1 / span 6; }
    .mobile-spacer-2  { display: block; height: 1rem;    grid-column: 1 / span 6; }
    .mobile-spacer-3  { display: block; height: 1.5rem;    grid-column: 1 / span 6; }
    .mobile-spacer-4  { display: block; height: 2rem;    grid-column: 1 / span 6; }
    .mobile-spacer-5  { display: block; height: 3rem;    grid-column: 1 / span 6; }
    .mobile-spacer-6  { display: block; height: 4rem;    grid-column: 1 / span 6; }
    .mobile-spacer-7  { display: block; height: 6rem;    grid-column: 1 / span 6; }
    .mobile-spacer-8  { display: block; height: 9rem;    grid-column: 1 / span 6; }
    .mobile-spacer-9  { display: block; height: 15rem;    grid-column: 1 / span 6; }
    .mobile-spacer-10 { display: block; height: 21rem;   grid-column: 1 / span 6; }
    
    /* text styles */
    p {
        font-size: 1rem;
        line-height: 1.7rem;

        padding-right: 0;
    }
    
    h1 {
        font-size: 3rem; /* 48px */
        line-height: 3.6rem;
    }
    
    h2 {
        /* font-size: 2.5rem; 
        line-height: 3rem; */
        font-size: 1.75rem; /* 28px */
        line-height: 2.3rem;

    
        margin-bottom: 1rem;
        
    }
    
    h3 {
        font-size: 1.375rem; /* 22px */
        line-height: 2.1rem;
    
        margin-bottom: 2rem;
    }
    
    h4 {
        font-family: 'MDIO', monospace;
        font-style: normal;
        font-size: 1.5rem; /* 40px */
        line-height: 2.5rem;
    }

    /* header -------------------*/
    header{
        font-size: 0.875rem;
        padding: 1rem 0 1rem 0;
    }

    #logo {
        font-size: 0.875rem;
    }

    /* projects  -------------------------------*/

    .project-information {
        flex-direction: column;
        margin-top: 2rem;
       
    }

    .project-title-block-1, .project-title-block-2 {
        width: 100%;
    }

    .project-title-block-1 {
        margin-bottom: 2rem;
    }

    .project-title-block-2 p {
        font-size: 0.875rem;
        line-height: 1.3rem;
    }

    .project-keywords {
        margin-top: 1rem;
    }

    .project-title {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .project-subtitle {
        width: 100%;
    }
    
    /* .project-summary h2 {
        font-size: 1.8rem;
        line-height: 2.3rem;

    } */

    .project-question-image {
        margin-right: 0px;
        /* width: 100%;
        height */
    }

    .project-question {
        padding: 0 1rem 0 1rem;
    }

    .image-grid {
        grid-template-columns: 1fr; /* 1 column for mobile */
      }

    /* coffee display -------- */

    #recipe-table tr th {
        font-size: 0.875rem;
    }
    
    #recipe-table td {
        font-size: 0.875rem;
    }

    table tr th {
        padding-bottom: 1rem;
    }

    table tr td {
        padding: 1rem 0 1rem 0;
    }

    .padding-to-image-right {
        padding-right: 0;
    }

}