@media (max-width: 767px) {
    .wrapper {
        width: auto;
        margin-inline: 18px;
    }

    /* by default resetting everything to start-1 span-6 */
    .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; }

    .mobile-spacer-0  { display: block; height: 0px;                     grid-column: 1 / span 6; }
    .mobile-spacer-1  { display: block; height: 1vw; min-height: 8px;    grid-column: 1 / span 6; }
    .mobile-spacer-2  { display: block; height: 2vw; min-height: 16px;   grid-column: 1 / span 6; }
    .mobile-spacer-3  { display: block; height: 3vw; min-height: 24px;   grid-column: 1 / span 6; }
    .mobile-spacer-4  { display: block; height: 4vw; min-height: 32px;   grid-column: 1 / span 6; }
    .mobile-spacer-5  { display: block; height: 5vw; min-height: 40px;   grid-column: 1 / span 6; }
    .mobile-spacer-6  { display: block; height: 6vw; min-height: 48px;   grid-column: 1 / span 6; }
    .mobile-spacer-7  { display: block; height: 7vw; min-height: 56px;   grid-column: 1 / span 6; }
    .mobile-spacer-8  { display: block; height: 8vw; min-height: 64px;   grid-column: 1 / span 6; }
    .mobile-spacer-10 { display: block; height: 10vw; min-height: 80px;  grid-column: 1 / span 6; }

    /* resetting everything to 1 column */
    .columns-1, .columns-2, .columns-3 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    }

    .columns-2 p, .columns-3 p {
    padding-right: 0px;
    }

    .content-block {
        padding: 60px 0 60px 0;
    }

    h1 {
        font-size: 48px;
        line-height: 52px;
    }

    h2 {
        font-size: 32px;
        line-height: 42px; /* 127.5% */
        margin: 0;
    }

    h3 {
        font-size: 20px;
        margin-bottom: 24px;
    }

    h4 {
        font-size: 19px;
    }

    p {
        font-size: 19px;
        line-height: 28px;

        padding-right: 0;
    }

    /* navigation */
    #navigation {
    display: none;
    }




    /*  facts */

    .fact-heading {
        margin-bottom: 6px;
    }

    .project-fact p {
        margin: 0px
    }

    /* partners logo wall */

    .partner-tile {
        background-color: var(--c90);
        border-radius: 16px;
        margin-bottom: 24px;
    }

    /* megatrends */

    .megatrend-container {
        width: 100%;
        aspect-ratio: 1 / 1;
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .megatrend-container img {
        width: 100%;
    }

    .megatrend-item {
        padding-right: 0;
    }

    /* research fields */

    #research-fields-container {
        gap: 64px 32px;
    }



    #research-fields-container {
        flex-direction: column;
    }

    .research-field-content {
        display: block;
        flex-direction: row;
    }

    .research-field-col-1, .research-field-col-2 {
        width: 100%;
        padding: 16px 0px 40px 0;
    }

    .research-field-col-1 {
        border: none;
    }

    .research-field-section {
        padding-bottom: 80px;
        padding-top: 0px;
    }

    .project-partners-wrapper {
        flex-direction: column;
    }

    .project-partners-col-1{
        padding-right: 0;
    }

    .project-partners-col-2{
        padding-left: 0;
    }


    #landing-container {
        display: flex;
        flex-wrap: wrap;
        width: 100vw;
        height: 80vh;
        min-height: 0px;
        max-height: 1400px;
        border-bottom: 1px solid var(--c20);
        margin-top: 90px;
    }

    #landing-left {
        width: 100vw;
        height: 40vh;
        border-right: 0px solid var(--c20);
    }

    #landing-left-container {
        width: 100%;
        height: 100%;
        padding-left: 18px;
        padding-top: 18px;
        border-bottom: 1px solid var(--c20);
    }

    #landing-right {
        width: 100vw;
        height: 40vh;
        margin: 8px;
    }

    #landing-right-container {
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        /* border: 1px solid red; */
        margin: auto;
        /* margin-left:auto; */
        /* background-color: var(--sapphier); */
    }

    #svg {
        width: 100%;
        height: 100%;
    }

    #landing-left-container2 {
        display: none;
    }

    .claim {
        font-size: 9.4vw;
        line-height: 10.8vw;
    }

    .partner-tile {
        display: flex;
        background-color: var(--c90);
        border-radius: 16px;
        margin-bottom: 16px;
        text-align: center;
        vertical-align: middle;
        height: 200px;
        justify-content: center;
        align-items: center;
    }

    .partner-tile img {
        width: 80vw;
        max-width: 480px;
        /* border: 1px solid red; */
    }

    /* .partner-tile {
        background-color: var(--c90);
        border-radius: 16px;
        margin-bottom: 16px;
        text-align: center;
    }

    .partner-tile img {
        width: 70%;
    } */

    #legal-container {
        width: 100%;
    }

    #funding-container-bottom {
        display: none;
    }

    /* project partners */

    .project-partner-tile {
        padding: 24px;
    }

    .research-field-cover-image {
        overflow: hidden;
    }

    .research-field-cover-image img{
        width: 250%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);

    }

}