<div class="development-squad-caps">
<div class="development-squad-caps__title">DEVELOPMENT SQUAD CAPS</div>
<ul class="development-squad-caps__content">
<li>
<div class="development-squad-caps__value">67</div>
<div class="development-squad-caps__label">U16 CAPS</div>
</li>
<li>
<div class="development-squad-caps__value">8</div>
<div class="development-squad-caps__label">U21 CAPS</div>
</li>
<li>
<div class="development-squad-caps__value">1</div>
<div class="development-squad-caps__label">U19 CAPS</div>
</li>
<li>
<div class="development-squad-caps__value">12</div>
<div class="development-squad-caps__label">U18 CAPS</div>
</li>
<li>
<div class="development-squad-caps__value">1</div>
<div class="development-squad-caps__label">U17 CAPS</div>
</li>
<li>
<div class="development-squad-caps__value">0</div>
<div class="development-squad-caps__label">U20 CAPS</div>
</li>
</ul>
</div>
No notes defined.
/* No context defined. */
.development-squad-caps {
margin-top: 5.7rem;
text-transform: uppercase;
border-bottom: 1px solid $grey-light;
padding-bottom: 3.2rem;
&__title {
@include text-l;
line-height: 1.8rem;
letter-spacing: 0.01rem;
color: $color-interface-light;
}
&__content {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
li {
margin-top: 3.2rem;
flex: 1 33.3%;
max-width: 33.3%;
}
}
&__value {
font-family: $heading-font;
font-size: 9.4rem;
line-height: 6.6rem;
letter-spacing: 0.01em;
color: $color-interface-light;
}
&__label {
@include text-s;
line-height: 1.4rem;
color: $blue;
margin-top: 1.2rem;
}
@media screen and (min-width: $mq-medium) {
&__content {
li {
flex: 1;
max-width: auto;
}
}
}
}
<div class="development-squad-caps">
<div class="development-squad-caps__title">DEVELOPMENT SQUAD CAPS</div>
<ul class="development-squad-caps__content">
<li>
<div class="development-squad-caps__value">67</div>
<div class="development-squad-caps__label">U16 CAPS</div>
</li>
<li>
<div class="development-squad-caps__value">8</div>
<div class="development-squad-caps__label">U21 CAPS</div>
</li>
<li>
<div class="development-squad-caps__value">1</div>
<div class="development-squad-caps__label">U19 CAPS</div>
</li>
<li>
<div class="development-squad-caps__value">12</div>
<div class="development-squad-caps__label">U18 CAPS</div>
</li>
<li>
<div class="development-squad-caps__value">1</div>
<div class="development-squad-caps__label">U17 CAPS</div>
</li>
<li>
<div class="development-squad-caps__value">0</div>
<div class="development-squad-caps__label">U20 CAPS</div>
</li>
</ul>
</div>