🔅 CSS Clamp

clamp(minimum, preferred, maximum);

In this example, the preferred value is 50%.

On the left 50% of the 400px viewport is 200px, which is less than the 300px minimum value that gets used instead.

On the right, 50% of the 1400px viewport equals 700px, which is greater than the minimum value and lower than the 800px maximum value, so it equates to 700px.

🔅 CSS Clamp and font-size

p {
  font-size: clamp(1rem, 4vw, 1.5rem);
}

🔅 CSS: Hover Effect

🔸 The :has pseudo selector (so called parent selector) selects an element based on whether it contains a particular child

In this example, we are selecting the container when it contains any hovered profiles

🔸 After this we select all the profiles that are not selected inside it using the :not pseudo selector

The combination of this helps us to select all the profiles that are currently not hovered, and configure a filter effect for them!