Какой display задать, чтобы получилась вот такая колонка?

Question

r_r_r_r_r @r_r_r_r_r

CSS

Какой display задать, чтобы получилась вот такая колонка?

Всех приветствую , пытался подобрать свойства display (flex, grid) по итогу не те колонки выстраиваются как на втором фото.
Подскажите пожалуйста свойства

spoiler

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 
body {
  margin: 0;
  font-family: "Roboto", serif;
  background-color: #1c1c1c;
  color: #fff;
 
   
}

a {
color: #fff;
text-decoration: none;
}

p{
  margin: 0;
}

p + p {
  margin-top: 15px;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

img {
  max-width: 100%;
}

h1,h2,h3,h4,h5,h6 {
font-weight: 500;
margin: 0;
}

.container {
box-sizing: border-box;


max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding: 0 15px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;

 font-weight: 500;
 font-size: 16px;
 text-transform: uppercase;

 width: 165px;
 height: 50px;

 background: #f6762c;
 border-radius: 5px;
 transition: opacity 0.3s;
}


.btn:hover {
  opacity: 0.8;
}



.header {
padding: 25px 0;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.header__logo {

}


.header__nav {

}



.header__list {
 display: flex;
 gap: 30px;
}

.header__nav a {
  font-size: 14px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.header__nav a.active {
  opacity: 1;
}

.header__nav a:hover {
  opacity: 0.9;

}


.main {

}


.welcome {
  min-height: 100vh;
  margin-top: -100px;
  padding: 240px 0;

  background-image: url("./images/welcome-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

}
.welcome__text {
width: 550px;
}

.welcome__subtitle {
margin-bottom: 7px;

font-size: 14px;
letter-spacing: 0.1em;
}

.welcome__title {
  font-size: 58px;
}

.welcome__desc {
margin: 40px 0;

font-size: 18px;
opacity: 0.7;
}

.btn {


}

.food-list {
 padding: 100px 0;

}


.food-list .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.food-list_card {
  width: 260px;

  overflow: hidden;

  text-align: center;

  background: #312f30;
  border-radius: 10px;
}
.food-list_img {
  width: 100%;
  height: 175px;
  object-fit: cover;
}

.food-list__text-wrapper {

  padding: 30px 20px;

}

.food-list__title {
 margin-bottom: 20px;
font-size: 20px;
}
.food-list__desc {
 font-size: 16px;
 opacity: 0.7;
}

.order {
background: #312f30;
padding: 60px 0;
}

 .order .container {
 display: flex;
 justify-content: space-between;
 align-items: center;

 padding-right: 200px;


}

.order__img {
max-width: 470px;
}

.order__text {
max-width: 360px;
}

.order__title {
  font-size: 44px;
  margin-bottom: 25px;
}

.order__desc {
margin-bottom: 15px;
opacity: 0.7;
}

.order__price {
font-weight: 500;
font-size: 20px;
letter-spacing: 0.1em;
color:#f6762c;
}

.order__price--old {
font-size: 16px;
text-decoration-line: line-through;
opacity: 0.5;
}

.order__price + .order__price {
margin-left: 3px;
}

 .order .btn {
  margin-top: 10px;

}
 
.product {
  padding: 150px 0;
}


.product .container {
 display: grid; 
 grid-template-columns: 1fr 1fr;
 gap: 30px;

}


.product_card {
box-sizing: border-box;
width: 555px;
min-height: 300px;

padding: 60px 25px 60px 290px;
}

.product_card:nth-child(even) {
padding-left: 30px;
padding-right: 290px;

}
.product_title {
  margin-bottom: 20px;
  font-size: 30px;
}
.product_desc {
margin-bottom: 10px;
opacity: 0.7;
}
.product__price {
font-weight: 500;
letter-spacing: 0.1em;
color:#f6762c;
}

.product__price + .product__price {
  margin-left: 5px;

}


.product__price--old {
text-decoration-line: line-through;
opacity: 0.5;
}
.btn {
width: 140px;
height: 40px;
font-size: 12px;
}
.product .btn {
margin-top: 10px;
}

.card-queen {
  background-image: url("./images/product-1.jpg");
}

.card-hut {
  background-image: url("./images/product-2.jpg");
}

.card-king {
  background-image: url("./images/product-3.jpg");
}

.card-papa {
  background-image: url("./images/product-4.jpg");
}


.feedback {
padding-bottom: 200px;
}

.feedback .container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 880px;

}

.feedback__img {

}

.feedback__text {
 margin: 0;
 width: 370px;
 text-align: center;
 
 
 
 display:flex;
 flex-direction: column;
}

.feedback__text::before {
  content:url("./images/icons/quote.svg")
}

.feedback__desc {
opacity: 0.7;
margin: 30px 0;

}

.feedback__author {
 font-weight: 500;
 font-size: 24px;
}

.feedback_subauthor {
font-weight: 500;
font-size: 12px;
opacity: 0.7;
display: block;
}


.download {
padding: 60px 0;
 background: #312f30;

}
.download .container {
display: flex;
justify-content: space-around;
align-items: center;

}
.download__title {
font-weight: 500;
font-size: 40px;

}
.btn {
}


.footer {
padding: 120px 0;
}

.footer a {
  font-size: 12px;
  opacity: 0.8;
}

.footer .container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas: "contacts nav socials";
}

.footer__contacts {

}

.footer__logo {

}

.footer__link {

}

.footer__link-mail {

}

.footer__link-web {

}

.footer__nav {

}

.footer__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr)

 
}

.footer__list-title {


}


.footer .footer__title {

font-weight: 500;
font-size: 16px;
opacity: 1;


}