@media all and (max-width: 770px) {
    :root {
        --column-count: 2;
        --row-size-m: 2rem;
        --scroll-width: calc(100vw * -18.926388888);
    }
    body {
        padding-inline: 1rem;
        }
    h1 {
        font-size: 1.9rem;
        line-height: 2.3rem;
        top: 1px;
    }
    h2,
    h3 {
        font-size: 1.7rem;
        line-height: 2rem;
    }
    h4 {
        font-size: 1.6rem;
        line-height: 1.8rem;
    }
    ol {
        font-size: 1.3rem;
    }
    article {
        grid-template-rows: repeat(3, var(--row-size)) [HeaderImage] 1fr repeat(2, var(--row-size)) [ContentStart] auto [ContentEnd] var(--row-size) [LeftContentStart] auto [LeftContentEnd] var(--row-size) [BottomContentStart] auto [BottomContentEnd] var(--row-size) [FooterStart] auto [FooterEnd] repeat(2, var(--row-size));
    }
    header {
        height: 6rem;
        grid-template-columns: auto 6rem;
    }
    #contentleft {
        grid-row: LeftContentStart;
    }
    #contentright {
        grid-row: ContentStart;
    }
    .text.resistance {
        grid-row: 1;
    }
    .gallery.resistance {
        grid-row: 2;
    }
    .text.metamorphoses {
        grid-row: 3;
    }
    .gallery.metamorphoses {
        grid-row: 4;
    }
    .text.forcedmarch {
        grid-row: 5;
    }
    .gallery.forcedmarch {
        grid-row: 6;
    }
    .text.romaholocaust {
        grid-row: 7;
    }
    .gallery.romaholocaust {
        grid-row: 8;
    }
    [data-part="1965--aldozatok"] #videoplayer {
        grid-row: 9;
    }
    .lang span {
        line-height: 1.3rem;
    }
    #headerimage {
        height: 100vw;
    }
    footer {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(10, var(--row-size-m));
    }
    #partners {
        grid-row: 5 / 5;
    }
    #partnerlogos {
        grid-row: 6 / 6;
        gap: 0.5rem;
    }
    #organizerlogos {
        gap: 0.5rem;
    }
    #organizerlogos a:nth-of-type(2) img {
        height: 25px;
    }
    #credits {
        grid-row: 8 / 8;
    }
    #copy {
        grid-row: 10 / 10;
    }
    .logos img {
        height: 30px;
    }
    .nav_wrapper .level2 {
        margin-left: 4rem;
    }
    nav.fullwidth {
        width: 100vw;
    }
    .text {
        line-height: 1.4rem;
    }
    .text p {
        font-size: 1.3rem;
    }
    #credits span,
    #copy span {
        font-size: 0.9rem;
    }
    .nav_wrapper {
        line-height: 2rem;
    }
    .nav_wrapper div {
        background-size: 1.5rem;
        background-position-y: 7px;
    }
    .nav_wrapper a,
    .nav_wrapper span {
        font-size: 1.8rem;
        line-height: 2rem;
        padding-left: 2rem;
    }
    .galleryitem [data-glightbox] {
        pointer-events: none;
    }
    [data-part="404"] {
        font-size: 2rem;
    }
}

@media all and (min-width: 770px) {
    :root {
        --column-count: 4;
        --scroll-width: calc(((100vw - 7.5rem) / 2.3) * -18.926388888);
    }
    body {
        padding-inline: 1.5rem;
    }
    h1 {
        font-size: 3rem;
        line-height: 3.3rem;
    }
    h2,
    h3 {
        font-size: 2.1rem;
        line-height: 2.4rem;
    }
    h4 {
        font-size: 1.8rem;
        line-height: 2rem;
    }
    ol {
        font-size: 1.4rem;
    }
    article {
        grid-template-rows: repeat(3, var(--row-size)) [HeaderImage] 1fr repeat(3, var(--row-size)) [ContentStart] auto [ContentEnd] var(--row-size) [BottomContentStart] auto [BottomContentEnd] var(--row-size) [FooterStart] auto [FooterEnd] repeat(2, var(--row-size));
        column-gap: var(--gap);
    }
    header {
        height: 8rem;
        grid-template-columns: repeat(var(--column-count), minmax(var(--column-size), 1fr));
    }
    #contentleft,
    #contentright {
        grid-row: ContentStart;
    }
    .text.resistance,
    .gallery.resistance {
        grid-row: 1;
    }
    .text.metamorphoses,
    .gallery.metamorphoses {
        grid-row: 2;
    }
    .text.forcedmarch,
    .gallery.forcedmarch {
        grid-row: 3;
    }
    .text.romaholocaust,
    .gallery.romaholocaust {
        grid-row: 4;
    }
    [data-part="1965--aldozatok"] #videoplayer {
        grid-row: 5;
    }
    .lang span {
        line-height: 1.5rem;
    }
    #headerimage {
        height: calc((100vw - 7.5rem) / 2.3);
    }
    footer {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: var(--row-size);
        column-gap: var(--gap);
    }
    #organizers {
        grid-column: 1 / span 2;
    }
    #organizerlogos {
        grid-column: 1 / span 2;
        gap: 2rem;
    }
    #partners {
        grid-column: 3 / span 2;
        grid-row: 2 / 2;
    }
    #partnerlogos {
        grid-column: 3 / span 2;
        grid-row: 3 / 3;
        gap: 2rem;
    }
    #partnerlogos {
        grid-column: 3 / span 2;
        grid-row: 3 / 3;
    }
    #credits {
        grid-column: 1 / span 2;
        grid-row: 5;
    }
    #copy {
        grid-column: 3 / span 2;
        grid-row: 5;
    }
    .logos img {
        height: 50px;
    }
    .menuopen {
        width: calc(100% - 16px);
        margin-right: 16px;
    }
    .nav_wrapper {
        line-height: 2rem;
    }
    .nav_wrapper div {
        background-size: 2.5rem;
        background-position-y: center;
    }
    .nav_wrapper .level2 {
        margin-left: 6rem;
    }
    nav.fullwidth {
        width: 101dvw;
    }
    .nav_wrapper a,
    .nav_wrapper span {
        font-size: 3rem;
        line-height: 3rem;
        padding-left: 3.5rem;
    }
    .text p {
        font-size: 1.4rem;
    }
    .gallerysubtitle--m {
        display: none;
        height: 0;
        visibility: hidden;
    }
    .glightbox-cm .gslide-desc {
        font-size: 1rem;
    }
    [data-part="404"] {
        font-size: 3rem;
    }
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    .menuopen {
        left: 0;
    }
  }