Wie kann ich dieses Treppendesign erhalten? ⇐ CSS

[Anonymous]

Ich konnte dieses Treppendesign nicht richtig hinbekommen. Ich habe es mit CSS Grid versucht, aber dabei wurden der Titel und der Text auf der linken Seite sehr klein. Ich wollte nicht auch die linke Seite zum Raster hinzufügen. Ich wollte sie trennen, aber es funktioniert nicht. Hier ist mein Code: https://codepen.io/Elif-Altnda/pen/vEKOqOJ Bitte helfen Sie. Geben Sie hier die Bildbeschreibung ein

Code: Select all

Limitations of BMI

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.




[img]images/icon-gender.svg[/img]
                  alt="Gender Icon"
/>

Gender


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.





[img]images/icon-age.svg[/img]
                  alt="Age Icon"
/>

Age


In aging individuals, increased body fat and muscle loss may cause
BMI to underestimate body fat content.





[img]images/icon-muscle.svg[/img]
                  alt="Muscle Icon"
/>

Muscle


BMI may misclassify muscular individuals as overweight or obese,
as it doesn't differentiate muscle from fat.





[img]images/icon-pregnancy.svg[/img]
                  alt="Pregnancy Icon"
/>

Pregnancy


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.





[img]images/icon-race.svg[/img]
                  alt="Race Icon"
/>

Race


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.

Code: Select all

/* --- 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;
}