@import url('./common.css');

#foodproject {
 .content{
  .project-list{
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: 1rem;
   @media screen and (min-width: 769px) {
    grid-template-columns: repeat(2, 1fr);
      gap: 3rem;
   }
   li{
    display: grid;
    grid-template-columns:30% 70%;
    
    .date{
     display: block;
     font-size: clamp(14px, 0.19vw + 13.3px, 16px);
     font-weight: 400;
     line-height: 1.8;
     margin-bottom: calc(10 / 1440 * 100%);
    }
    img{
      width: 100%;
      height: auto;
    }
    .project-list--text{
      padding-left: 2rem;
      h3{
        margin-bottom: .5rem;
      }
    }
   }
  }
  .project-visit{
    display: grid;
      grid-template-columns: repeat(1, 1fr);
   gap: 1rem;
    @media screen and (min-width: 769px) {
      grid-template-columns: repeat(2, 1fr);
         gap: 3rem;
    }
 
    .date{
      display: block;
      padding: .5rem 0;
    }
    .img{
       display: grid;
    grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
      img{
        width: 100%;
      }
    }
  }
  .back{
    background:var(--white);
    max-width:375px;
    text-align: center;
    margin: 0 auto;
    display: table;
  }
 }
          }