Вёрстка социального блока

Question

Имеется макет в Figma. В макете имеется социальный блок с изображениями. Пытался сверстать его на флексах, гридах, но не особо понимаю, как правильнее это сделать. Нужно, чтобы элементы(изображения) не только находились на одной строке, но и имели разные отступы. Буду благодарен за помощь, подсказки. (самый нижний блок)

Figma: https://www.figma.com/file/ZBJipRSv6H5pgkCgPWjogg/Atelier.?node-id=1%3A2

CodePen: https://codepen.io/Vladislav_Biryukov/pen/OJOxNVM

Html:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Atelier</title>
   <link href="https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>

   <header class="header" id="header">
      <div class="container">
         <div class="nav">
            <span class="logo">Atelier.</span>
            <span class="span__overview">overview</span>
            <ul class="header__ul">
               <li><a href="#">pages</a></li>
               <li><a href="#">portfolio</a></li>
               <li><a href="#">template</a></li>
               <li><a href="#">contact</a></li>
            </ul>
            <a href="#" class="header__button"><button>buy template</button></a>
         </div>
      </div>
   </header>

   <section id="section__info" class="section__info">
      <div class="container">
         <div class="content__info">
            <span class="title__info">WE ARE Atelier Creative Agency</span><br>
            <h1>Unique UI Kit Template for<br> Creative Agencies</h1>
            <a href="#"><button>VIEW LAYOUTS</button></a>
         </div>
      </div>
   </section>

   <section id="basic__layouts" class="basic__layouts">
      <div class="container">
         <div class="content__layouts">
            <div class="title-text__layouts">
               <p class="title__p">Our Core Layouts</p>
               <h1>Template Pages</h1>
            </div>

            <div class="wrapper">
               <div class="item_1 item"><img src="img/template_pages/IMAGE.png" alt="template-img"><span>Landing vr.1</span></div>
               <div class="item_2 item"><img src="img/template_pages/IMAGE-11.png" alt="template-img"><span>Landing vr.2</span></div>
               <div class="item_3 item"><img src="img/template_pages/IMAGE-1.png" alt="template-img"><span>Landing vr.3</span></div>
               <div class="item_4 item"><img src="img/template_pages/IMAGE-16.png" alt="template-img"><span>PORTFOLIO 1</span></div>
               <div class="item_5 item"><img src="img/template_pages/IMAGE-2.png" alt="template-img"><span>PORTFOLIO 1</span></div>
               <div class="item_6 item"><img src="img/template_pages/IMAGE-12.png" alt="template-img"><span>PORTFOLIO 1</span></div>
               <div class="item_7 item"><img src="img/template_pages/IMAGE-3.png" alt="template-img"><span>PORTFOLIO 1</span></div>
               <div class="item_8 item"><img src="img/template_pages/IMAGE-19.png" alt="template-img"><span>Single Project</span></div>
               <div class="item_9 item"><img src="img/template_pages/IMAGE-4.png" alt="template-img"><span>ABOUT COMPANY</span></div>
               <div class="item_10 item"><img src="img/template_pages/IMAGE-13.png" alt="template-img"><span>ABOUT TEAM</span></div>
               <div class="item_11 item"><img src="img/template_pages/IMAGE-5.png" alt="template-img"><span>SINGLE TEAM MEMBER</span></div>
               <div class="item_12 item"><img src="img/template_pages/IMAGE-17.png" alt="template-img"><span>FAQ PAGE</span></div>
               <div class="item_13 item"><img src="img/template_pages/IMAGE-6.png" alt="template-img"><span>CONTACT US</span></div>
               <div class="item_14 item"><img src="img/template_pages/IMAGE-14.png" alt="template-img"><span>BLOG 1</span></div>
               <div class="item_15 item"><img src="img/template_pages/IMAGE-7.png" alt="template-img"><span>BLOG 2</span></div>
               <div class="item_16 item"><img src="img/template_pages/IMAGE-3.png" alt="template-img"><span>BLOG 3</span></div>
               <div class="item_17 item"><img src="img/template_pages/IMAGE-8.png" alt="template-img"><span>Blog Categories</span></div>
               <div class="item_18 item"><img src="img/template_pages/IMAGE-15.png" alt="template-img"><span>Single Blog</span></div>
               <div class="item_19 item"><img src="img/template_pages/IMAGE-9.png" alt="template-img"><span>Pricing</span></div>
               <div class="item_20 item"><img src="img/template_pages/IMAGE-18.png" alt="template-img"><span>Style guide</span></div>
               <div class="item_21 item"><img src="img/template_pages/IMAGE-10.png" alt="template-img"><span>Licenses</span></div>
            </div>
         </div>
      </div>
   <div class="img_bg"></div>
   </section>

   <section id="our__services" class="our__services">
      <div class="container">
         <div class="header__text__our__services">
            <span>Our Core Features</span>
            <h1>Our Services</h1>
         </div>

         <div class="info__block">
            <div class="item__info__block">
               <div class="content__item__info">
                  <img src="img/icons/icon-1.svg" alt="">
                  <h3>UI/UX Design</h3>
                  <p>Suspendisse varius enim in</p>
                  <h6>cursus id rutrum imperdiet. eros elementum<br> tristique.</h6>
               </div>
            </div>
            <div class="item__info__block item__info__block__2">
               <div class="content__item__info">
                  <img src="img/icons/icon-2.svg" alt="">
                  <h3>Web Design</h3>
                  <p>Suspendisse varius enim in</p>
                  <h6>cursus id rutrum imperdiet. eros elementum<br> tristique.</h6>
               </div>
            </div>
            <div class="item__info__block item__info__block__3">
               <div class="content__item__info">
                  <img src="img/icons/icon-3.svg" alt="">
                  <h3>SEO & Marketing</h3>
                  <p>Suspendisse varius enim in</p>
                  <h6>cursus id rutrum imperdiet. eros elementum<br> tristique.</h6>
               </div>
            </div>
         </div>
            
         <div class="social__row">
            <div class="container">
               <hr>
               <br>
               <div class="main__social__block">
                  <div class="social__1 social__item"><img src="https://i.ibb.co/q9dwS10/IMAGE-3.png" alt="social-img"></div>
                  <div class="social__2 social__item"><img src="https://i.ibb.co/RDMfWxD/IMAGE-4.png" alt="social-img"></div>
                  <div class="social__isnta social__item"><img src="https://i.ibb.co/MC1GZW6/Vector-1.png" alt="instagram"></div>
                  <div class="social__3 social__item"><img src="https://i.ibb.co/xLFvMF8/IMAGE-1.png" alt="social-img"></div>
                  <div class="social__4 social__item"><img src="https://i.ibb.co/JzMYfQm/IMAGE-2.png" alt="social-img"></div>
               </div>
               <br>
               <hr>
            </div>
         </div>

      </div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
   </section>

</body>
</html>

CSS:

*{
   padding: 0;
   margin: 0;
   border: 0;
}
*,*:before,*:after{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body {
   height: 100%;
   width: 100%;
   font-size: 100%;
   line-height: 1;
   font-size: 14px;
   -ms-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}

input,button,textarea{font-family: inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

h1,h2,h3,h4,h5,h6{font-size: inherit; font-weight: 400;}



html {
   font-family: 'Old Standard TT', serif;
   font-weight: 400;
}

:root {
   --orange: #FFAE2B;
   --black: #181511;
   --white: #fff;
   --gray: #ACA592;
}

.container {
   max-width: 1200px;
   margin: 0 auto;
}

.header {
   height: 80px;
   background-color: var(--black);
}

.nav {
   display: flex;
   align-items: center;
   height: 80px;
}

.logo {
   font-size: 22px;
   color: var(--orange);
}

.span__overview {
   font-size: 11px;
   color: var(--orange);
   margin-left: 42px;
   text-transform: uppercase;
}

.header__ul {
   display: flex;
   margin-left: 28px;
}

.header__ul li a {
   color: var(--gray);
   font-size: 11px;
   margin-right: 40px;
   text-transform: uppercase;
}

.header__button {
   margin-left: auto;
}

.header__button button {
   color: var(--orange);
   background-color: var(--black);
   text-transform: uppercase;
   font-size: 11px;
   border: 1px solid var(--orange);
   padding: 15px 25px 15px 25px;
}



.section__info {
   background-image: url('../img/img_bg_info.png');
   background-position: center top;
   background-size: 100% auto;
   background-repeat: no-repeat;
   aspect-ratio: 1440 / 602; /* width img / height img */
 }

.section__info div.container {
   text-align: center;
}

.content__info {
   padding-top:  10%;
}

.title__info {
   font-size: 12px;
   color: var(--orange);
   text-transform: uppercase;
   letter-spacing: 2px;
}

.content__info h1 {
   padding-top: 15px;
   font-size: 70px;
   color: var(--white);
   letter-spacing: 1px;
   line-height: 80px;
}


.content__info button {
   margin-top: 30px;
   font-size: 11px;
   text-transform: uppercase;
   color: var(--black);
   background-color: var(--orange);
   padding: 14px 24px 14px 24px;
}

/* SECTION basic_layouts (основные макеты) */

.basic__layouts, .our__services {
   background-color: var(--black);
}

.content__layouts {
   padding: 120px 0px 121px 0px;
}

.title-text__layouts {
   text-align: center;
}

.title-text__layouts .title__p {
   font-size: 12px;
   color: var(--gray);
   text-transform: uppercase;
   letter-spacing: 2px;
}

.title-text__layouts h1 {
   margin-top: 15px;
   font-size: 60px;
   color: var(--orange);
}

.wrapper {
   margin-top: 60px;
   display: grid;
   justify-content: space-between;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   gap: 20px 20px;
}

.item {
   border: 1px solid #4B4136;
   text-align: center;
   padding: 25px 20px 41px 20px;
}

.item span {
   color: var(--white);
   text-transform: uppercase;
   font-size: 13px;
   letter-spacing: 2px;
}

.img_bg {
   background-image: url('../img/img_bg.png');
   background-position: center top;
   background-size: 100% auto;
   background-repeat: no-repeat;
   aspect-ratio: 1440 / 462; /* width img / height img */
}

/* SECTION our__services */

.header__text__our__services {
   padding-top: 158px;
   text-align: center;
}

.header__text__our__services span {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: #ACA592;
}

.header__text__our__services h1 {
   color: var(--orange);
   font-size: 60px;
   padding-top: 14px;
}

.info__block {
   margin-top: 5.8%;
   display: flex;
   justify-content: center;
}

.item__info__block {
   border: 1px solid#4B4136;
   width: 100%;
}

.content__item__info {
   margin: 15.8% 15.8% 15.8% 15.8%;
}

.content__item__info h3 {
   font-size: 29px;
   color: var(--orange);
   padding-top: 9.3%;
}

.content__item__info p {
   padding-top: 5.5%;
   font-size: 15px;
   color: var(--gray);
}

.content__item__info h6 {
   font-size: 11px;
   color: var(--gray);
   line-height: 26px;
   padding-top: 3.5%;
}

.item__info__block.item__info__block__2 {
   position: relative;
   top: 3px;
}

.item__info__block.item__info__block__3 {
   position: relative;
   top: 14px;
}

hr {
   height: 1px; 
   background-color: #4B4136;
}

.social__row {
   margin-top: 125px;
}

.main__social__block {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    grid-auto-flow: column;
}

Answer 1

Вроде бы, на флексах все хорошо получается. Что именно вы имеете в виду под разными отступами? Вообще выглядит, как плохо проработанный макет.

html {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #181511;
}

.social {
  width: 1200px;
  display: flex;
  justify-content: center;
  column-gap: 1px;
  padding: 21px 0;
}

.social__image {
  width: 217px;
  height: 240px;
  object-fit: cover;
}

.social__image-item {
  position: relative;
}

.social__image-item::before {
  content: '';
  display: block;
  position: absolute;
  top: -33px;
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  background-image: url(https://i.ibb.co/MC1GZW6/Vector-1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.social__text {
  padding: 41px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background-image: url(https://i.ibb.co/MC1GZW6/Vector-1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 200px;
}

.social__title {
  margin: 0;
  text-align: center;
  font-family: Old Standard TT;
  font-style: normal;
  font-weight: normal;
  font-size: 40px;
  line-height: 1.25;
  color: #FFAE2B;
}

.social__button {
  width: 122px;
  height: 50px;
  background: #FFAE2B;
  font-family: Old Standard TT;
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 2;
  text-transform: uppercase;
  color: #181511;
  border: 0;
}

<div class="social">
  
  <div class="social__image-item">
    <img class="social__image" src="https://i.ibb.co/q9dwS10/IMAGE-3.png" alt="Крыша здания">
  </div>
  
  <div class="social__image-item">
    <img class="social__image" src="https://i.ibb.co/q9dwS10/IMAGE-3.png" alt="Крыша здания">
  </div>
  
  <div class="social__text">
    <h2 class="social__title">Follow me on</h2>
    <button class="social__button">Instagram</button>
  </div>
  
  <div class="social__image-item">
    <img class="social__image" src="https://i.ibb.co/q9dwS10/IMAGE-3.png" alt="Крыша здания">
  </div>
  
  <div class="social__image-item">
    <img class="social__image" src="https://i.ibb.co/q9dwS10/IMAGE-3.png" alt="Крыша здания">
  </div>
</div>

БЛОГ НА HUSL

Вёрстка социального блока

Ответы (1 шт):