body{
margin:0;
padding:0;
font-family:sans-serif;
}

.layout__item1{
    --n: 12;
    --margin: 32px;
    --gap: 32px;
    --good-reading-width: 70ch;
    --fonts-heading: brandon-grotesque, "Helvetica Neue", Helvetica, arial, sans-serif;
    --fonts-base: Gotham, "Helvetica Neue", Helvetica, arial, sans-serif;
    --truncate-lines: 4;
    font-family: var(--fonts-base);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    --current-line-height: 24px;
    letter-spacing: 0;
    color: #2f2f2f;
    box-sizing: inherit;
    margin: auto;
    width: calc((calc((min(100vw,1280px) - (((var(--n) - 1) * var(--gap)) + (2 * var(--margin)))) / var(--n)) * 12) + (var(--gap) * 11));
    max-width: 100%;
}

.layout__item2{
    --n: 12;
    --margin: 32px;
    --gap: 32px;
    --good-reading-width: 60ch;
    --fonts-heading: brandon-grotesque, "Helvetica Neue", Helvetica, arial, sans-serif;
    --fonts-base: Gotham, "Helvetica Neue", Helvetica, arial, sans-serif;
    --truncate-lines: 4;
    font-family: var(--fonts-base);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    --current-line-height: 24px;
    letter-spacing: 0;
    color: #2f2f2f;
    box-sizing: inherit;
    margin: auto;
    width: calc((calc((min(100vw,1280px) - (((var(--n) - 1) * var(--gap)) + (2 * var(--margin)))) / var(--n)) * 12) + (var(--gap) * 11));
    max-width: 100%;
}

.block{
    display: flex;
    flex-flow: column nowrap;
    gap: 16px;
    box-shadow: 10px 5px 5px #0000007a;
}

.item{
    border-radius: 4px;
    border: 2px solid #1d10103b;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.image1{
    font-weight: 600;
    text-decoration: none;
    color: #1769c2;
    line-height: 5px;
    width: 510px;
    padding-top:40px;
    padding-bottom:40px;

}

.image2{
    font-weight: 600;
    text-decoration: none;
    color: #1769c2;
    line-height: 10px;
    width: 600px;
     padding-top:40px;
    padding-bottom:40px;
    padding-right:40px;
}

.image-1{
    font-weight: 600;
    color: #1769c2;
    line-height: 0;
    width:90%;
    aspect-ratio: var(--aspect-ratio, initial);
    object-fit: cover;
    border-radius: unset;
    --aspect-ratio: 16/9;
}

.text{
    display: flex;
    flex-flow: column nowrap;
    width:60% ;
    padding: 0px;
    gap: 16px;
    position:relative;
}

.text2{
    display: flex;
    flex-flow: column nowrap;
    width:40% ;
    padding: 0px;
    gap: 16px;
}

.title{
    font-family: var(--fonts-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    display: block;
    font-size: 26px;
    line-height: 32px;
    --current-line-height: 32px;
    padding-top:33px;
}
.title2{
    font-family: var(--fonts-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    display: block;
    font-size: 26px;
    line-height: 32px;
    --current-line-height: 32px;
    padding-top:33px;
     margin-left:30px;
}
.description{
    display: block;
    max-height: 242px;
    max-width: var(--good-reading-width);
    overflow: auto;
}
.description2{
    display: block;
    max-height: 242px;
    max-width:var(--good-reading-width);
    overflow: auto;
    margin-left:30px;
    margin-bottom:35px;
}
.img-right{
display:flex;
}






.food-style0{
    font-family: var(--fonts-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    display: block;
    font-size: 26px;
    line-height: 20px;
    --current-line-height: 32px;
    text-align:center;

}


.food-style{
margin:0 auto 0;
padding:0;
width:1200px;
display:flex;
height:180px;
padding-left:10px;
}

.food-style-ul-li{
list-style:none;
}

.food-style-ul-li .imageBox{
width:300px;
height:285px;
box_sizing:border-box;
padding:0 10px;
}

.food-style-ul-li .imageBox figure{
position:relative;
margin:0;
padding:0;
overflow:hidden;
}
.food-style-ul-li .imageBox figure:before,
.food-style-ul-li .imageBox figure:after{
content:'';
position:absolute;
top:0;
height:100%;
width:50%;
background:black;
transition:.5s;
}

.food-style-ul-li .imageBox figure:before{
left:-50%;
}

.food-style-ul-li .imageBox:hover figure:before{
left:0;
}
.food-style-ul-li .imageBox figure:after{
right:-50%;
}

.food-style-ul-li .imageBox:hover figure:after{
right:0;
}




.food-style-ul-li .imageBox figure img{
width:100%;
height:200px;;
}

.food-style-ul-li .imageBox figure figcaption{
position:absolute;
top:20px;
left:20px;
bottom:20px;
right:20px;
background:#FFFFFF;
text-align:left;
padding:20px;
opacity:0;
transition:.5s;
transform:translateY(20px);
z-index:1;
}

.food-style-ul-li .imageBox:hover figure figcaption{
opacity:1;
transform:translateY(0);
}

.food-style-ul-li .imageBox figure figcaption h1{
margin:0;
padding:0;
font-size:22px;
}

.food-style-ul-li .imageBox figure figcaption p{
margin:10px 0 0;
padding:0;
font-size:16px;
}
.food-style-ul-li .imageBox figure figcaption a{
display:inline-block;
padding:10px 20px;
background:black;
color:#fff;
margin-top:20px;
text-decoration:none;
}

.image2 li{
    list-style-type: none;
}