Make all the image same height and remove white background on images

.photo img {
	width: 15%;
	aspect-ratio:3/2; /* Make all images fit but now they are stretched */
	object-fit: contain;   /* Make all images fit well, no more strecth */
	mix-blend-mode: color-burn; /* Remove white background on ex; logoes */
}

Font size

Clamp documentation

font-size: clamp(1.5rem, 2.5vw, 4rem);

Flex

<div class="flex-container">
	<div>01</div>
	<div>02</div>
	<div>03</div>
	<div>04</div>
	<div>05</div>
	<div>06</div>
	<div>07</div>
	<div>08</div>
	<div>09</div>
	<div>10</div>
</div>

.flex-container {
  background-color: purple;
  color: white;
  display: flex;
  flex-wrap: wrap;

  > div {
    background-color: green;
    font-size: 4rem;
    text-align: center;
    margin: 0.5rem;
    padding: 1rem;
  }
}

image.png

CSS grid

display: grid; this alone do nothing, we need to tell grid how many rows and columns we want to define.

grid-template-rows and grid-template-columns define the sizes of the explicit rows and columns, and the number of them depends on how many sizes you specify

The span keyword tells a grid item to extend across a given number of tracks starting from its current position. It’s convenient, but the drawback is that if you change the grid container’s track definitions, the item may shift to a different place.

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px 100px 100px 100px;
  grid-template-columns: 100px 100px 100px 100px 100px 100px;
}

.item-one {
  background-color: red;
  grid-row: 1 / 3;
  grid-column: 1 / 5;
}

.item-two {
  background-color: blue;
  grid-row: span 2;
  grid-column: span 2;
}

.item-three {
  background-color: yellow;
  grid-area: 3 / 1 / -1 / -1;
}

<body>
	<div class="grid-container">
		<div class="item item-one">1</div>
		<div class="item item-two">2</div>
		<div class="item item-three">3</div>
	</div>	
</body>

image.png