Сергей delphinpro

img{
    width:100%;
+   height: 100%;
+   object-fit: cover;
}

.img{
    width:700px;
    margin:auto;
    display: grid;
-   grid-template-columns: repeat(3, 1fr);
+   grid-template-columns: 2fr 3fr;
    grid-row-gap: 10px;
    grid-column-gap:20px;
}

.img div:nth-child(2){
-   grid-column-start: 2;
-   grid-column-end: 4;
-   grid-row-start: 1;
-   grid-row-end:3;
+   grid-row: span 2;
}

<div class="person">
  <img class="person__photo" src="">
  <div class="person__wrapper">
    <div class="person__name">Имя фамилия</div>
    <div class="person__position">Должность</div>
  </div>
</div>

.person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.person__photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
}
.person__wrapper {
  display: grid;
  gap: 0.25rem;
}
.person__name {}
.person__position {}

размер отступа между кнопками, должен зависеть не только от ширина браузера, но и от размеров самих кнопок

.block {
  --btn-width: 10vw;
  --gap: 1.25vw;
  background: red;
  padding: var(--gap);
  display: inline-flex;
  box-sizing: border-box;
  gap: var(--gap);
}


button {
    width: var(--btn-width);
    height: var(--btn-width);
    margin: 0;
    flex-shrink: 0;
}

a b b a
a b b a
a b b a
a b b a
c c d d

2fr 1fr 1fr 2fr

.avatar {
	position: relative;
	width: 150px;
	height: 150px;
-	border-radius: 50%;
-	overflow: hidden;
+	clip-path: circle(50%);
}

.mytable:not(#table_1):not(#table_2) {
  /* Таблица с классом .mytable, но не имеющая идентификаторов #table_1 и #table_2 */
}

.mytable:not([id]) {
  /* Таблица с классом .mytable, но не имеющая никаких идентификаторов */
}

.table-striped {

}