@charset "UTF-8";

@media (min-width: 900px) {
  .menu__grid.is-zigzag {
    display: flex;
    flex-direction: column;
    
    --zig-w: min(1320px, 100vw - 3rem);
    width: var(--zig-w);
    margin-inline: calc((100% - var(--zig-w)) / 2);
    
    gap: clamp(1.5rem, 2.6vw, 2.5rem);
  }

  .is-zigzag .card {
    display: flex;
    
    flex-direction: row;
    
    align-items: flex-end;
    justify-content: flex-start;
  }

  .is-zigzag .card__photo {
    flex: 0 0 auto;
    width: min(100%, 374px);
  }

  .is-zigzag .card__photo {
    overflow: visible;
    
    position: relative;
  }

  .is-zigzag .card__photo > img:not(.card__ghost) {
    position: relative;
    z-index: 1;
  }

  .is-zigzag .card__ghost {
    display: block;
    position: absolute;
    
    top: auto;
    bottom: calc(100% / 6);
    left: calc(100% / 5 - 100% / 8);
    right: auto;
    width: 170%;
    height: 170%;
    
    max-width: none;
    object-fit: cover;
    object-position: 50% 28%;   
    opacity: .4;
    
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 34%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 34%, transparent 100%);
    z-index: 0;
    border-radius: var(--radius);
  }

  .is-zigzag .card__body {
    position: relative;
    z-index: 1;
    
    flex: 0 1 28rem;
    margin-left: -3rem;
    padding: clamp(1.8rem, 3vw, 2.6rem);
    border-radius: var(--radius);
    background: var(--paper-2);
    box-shadow: 0 10px 30px rgba(43, 40, 35, .07);
  }

  .is-zigzag .card__body h3 { margin-bottom: .6rem; font-size: 1.45rem; }
  .is-zigzag .card__body p { font-size: 1.02rem; }

  .is-zigzag .card:nth-child(even) { flex-direction: row-reverse; }
  
  .is-zigzag .card:nth-child(even) .card__ghost { left: auto; right: calc(100% / 5 - 100% / 8); }
  .is-zigzag .card:nth-child(even) .card__body {
    margin-left: 0;
    margin-right: -3rem;   
  }
}

.card__ghost { display: none; }