@media (max-width: 720px) {
  :root {
    --GRID_COLS: 5;
    --GRID_MARGIN: calc(15 * 0.0625rem);
    --GRID_GUTTER: calc(10 * 0.0625rem);
  }
  #main-grid .col:last-child {
    display: none;
  }
  #main {
    padding: var(--GRID_MARGIN);
  }
  *.mobile {
    display: block;
  }
  #head .left > .line.large, #head .right > .line.large {
    display: none;
  }
  #head .left > .line.small, #head .right > .line.small {
    display: none;
  }
  #head h1 {
    padding-left: 0;
    min-width: unset;
    flex-wrap: wrap;
    line-height: 0.9;
    transform: scale(3);
  }
  #head h1 .break {
    flex-basis: 100%;
    height: 0;
  }
  #head h2 {
    margin-right: 0;
    white-space: nowrap;
    padding-top: 0.7em;
  }
  #head .instagram {
    display: none;
  }
  #center {
    margin-top: var(--26);
    margin-bottom: var(--GRID_MARGIN);
    line-height: 1.25;
    overflow: visible;
    padding-left: calc(var(--COLUMN_WIDTH) * 2 + var(--GRID_GUTTER) * 2);
    opacity: 0;
  }
  #center .mask {
    transform: none !important;
  }
  picture {
    position: relative;
    order: 0;
    top: unset;
    left: 100vw;
    width: calc(var(--COLUMN_WIDTH) * 4 + var(--GRID_GUTTER) * 3 + var(--GRID_MARGIN));
    height: unset;
    z-index: unset;
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 0;
    margin-bottom: var(--26);
  }
  #foot {
    order: 1;
    padding-bottom: var(--30);
  }
  #foot .e-mail {
    margin-bottom: 0;
    left: -100vw;
  }
  #foot .line {
    width: calc(var(--GRID_MARGIN) + var(--COLUMN_WIDTH));
    bottom: calc(var(--3) + var(--30));
    left: -100vw;
  }
  .bottom {
    display: flex;
    align-items: center;
    order: 2;
    width: var(--COLUMN_WIDTH);
    margin-left: calc(var(--COLUMN_WIDTH) * 4 + var(--GRID_GUTTER) * 4);
    padding-bottom: var(--GRID_MARGIN);
    opacity: 0;
  }
  .bottom .line.small {
    flex-grow: 1;
  }
  .bottom .instagram {
    margin-left: var(--GRID_GUTTER);
  }
  .bottom .instagram svg {
    display: block;
    width: var(--12);
    height: auto;
  }
  body.transin #head h1 {
    transform: scale(1.1666666667);
    transition: transform 1050ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.transin #head .right {
    transform: translateX(0);
  }
  body.transin2 #center {
    opacity: 1;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.transin2 picture {
    left: calc(var(--COLUMN_WIDTH) * 1 + var(--GRID_GUTTER) * 1);
    transition: left 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.transin2 #foot h3,
  body.transin2 #foot .phone {
    opacity: 1;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
  }
  body.transin2 #foot .e-mail {
    opacity: 1;
    left: 0;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), left 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.transin2 #foot .line {
    left: calc(var(--GRID_MARGIN) * -1);
    transition: left 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.transin2 .bottom {
    opacity: 1;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}