I couldn't obtain this staircase design properly. I tried css grid, but when I did that, the title and the text on the left side becomes very small.
I didn't want to add left side to the grid too. I wanted to make them separate but it doesn't work.
Here is my code: https://codepen.io/Elif-Altnda/pen/vEKOqOJ
<section class="limits-section">
<div class="limits-details-container">
<h2 class="second-title limits-title">Limitations of BMI</h2>
<p class="limits-detail">
Although BMI is often a practical enter image description hereindicator of healthy weight, it is
not suited for every person. Specific groups should carefully
consider their BMI outcomes, and in certain cases, the measurement
may not be beneficial to use.
</p>
</div>
<div class="limits-grid">
<div class="card card-gender">
<div class="card-header">
<div class="card-icon-container">
<img
class="card-icon"
src="images/icon-gender.svg"
alt="Gender Icon"
/>
</div>
<p class="card-title">Gender</p>
</div>
<p class="card-detail">
The development and body fat composition of girls and boys vary
with age. Consequently, a child's age and gender are considered
when evaluating their BMI.
</p>
</div>
<div class="card card-age">
<div class="card-header">
<div class="card-icon-container">
<img
class="card-icon"
src="images/icon-age.svg"
alt="Age Icon"
/>
</div>
<p class="card-title">Age</p>
</div>
<p class="card-detail">
In aging individuals, increased body fat and muscle loss may cause
BMI to underestimate body fat content.
</p>
</div>
<div class="card card-muscle">
<div class="card-header">
<div class="card-icon-container">
<img
class="card-icon"
src="images/icon-muscle.svg"
alt="Muscle Icon"
/>
</div>
<p class="card-title">Muscle</p>
</div>
<p class="card-detail">
BMI may misclassify muscular individuals as overweight or obese,
as it doesn't differentiate muscle from fat.
</p>
</div>
<div class="card card-pregnancy">
<div class="card-header">
<div class="card-icon-container">
<img
class="card-icon"
src="images/icon-pregnancy.svg"
alt="Pregnancy Icon"
/>
</div>
<p class="card-title">Pregnancy</p>
</div>
<p class="card-detail">
Expectant mothers experience weight gain due to their growing
baby. Maintaining a healthy pre-pregnancy BMI is advisable to
minimise health risks for both mother and child.
</p>
</div>
<div class="card card-race">
<div class="card-header">
<div class="card-icon-container">
<img
class="card-icon"
src="images/icon-race.svg"
alt="Race Icon"
/>
</div>
<p class="card-title">Race</p>
</div>
<p class="card-detail">
Certain health concerns may affect individuals of some Black and
Asian origins at lower BMIs than others. To learn more, it is
advised to discuss this with your GP or practice nurse.
</p>
</div>
</div>
</section>
/* --- LIMITS SECTION --- */
.limits-section {
display: flex;
padding: 14.4rem 10.4rem;
}
.limits-details-container {
flex: 1.1;
}
.limits-title {
color: var(--blue-900);
font: var(--tp-2);
letter-spacing: var(--tp-2-letter-spacing);
margin-bottom: 3.2rem;
}
.limits-detail {
font: var(--tp-6r);
color: var(--grey-500);
}
.limits-grid {
flex: 1.5;
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 3.2rem;
row-gap: 2.4rem;
}
.card {
width: 36.5rem;
background-color: var(--white);
border-radius: 1.6rem;
padding: 3.2rem;
box-shadow: 1.6rem 3.2rem 5.6rem 0 var(--box-shadow);
}
.card-header {
display: flex;
align-items: center;
gap: 1.6rem;
margin-bottom: 1.6rem;
}
.card-title {
color: var(--blue-900);
font: var(--tp-5);
letter-spacing: var(--tp-5-letter-spacing);
}
.card-gender {
grid-column: 6 / span 5;
grid-row: 1;
}
.card-age {
grid-column: 3 / span 5;
grid-row: 2;
}
.card-muscle {
grid-column: 8 / span 5;
grid-row: 2;
}
.card-pregnancy {
grid-column: 1 / span 5;
grid-row: 3;
}
.card-race {
grid-column: 6 / span 5;
grid-row: 3;
}
