110 lines
1.7 KiB
CSS
110 lines
1.7 KiB
CSS
.featureListContainer {
|
|
background-color: #000;
|
|
padding-top: 128px;
|
|
background-position: right top, left bottom;
|
|
background-repeat: no-repeat;
|
|
color: #fff;
|
|
}
|
|
|
|
.contentWrapper {
|
|
composes: g-grid-container from global;
|
|
}
|
|
|
|
.featureContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
& .featureTextContainer {
|
|
display: flex;
|
|
}
|
|
|
|
& .imageContainer {
|
|
max-width: 490px;
|
|
margin: 0 auto;
|
|
padding-bottom: 40px;
|
|
|
|
& img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (--large) {
|
|
flex-wrap: nowrap;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
|
|
& .featureTextContainer {
|
|
margin-right: 60px;
|
|
}
|
|
|
|
& .featureText {
|
|
max-width: 488px;
|
|
}
|
|
|
|
& .imageContainer {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.featuresContainer {
|
|
padding-top: 157px;
|
|
padding-bottom: 394px;
|
|
display: grid;
|
|
row-gap: 120px;
|
|
}
|
|
|
|
.title {
|
|
composes: g-type-display-1 from global;
|
|
max-width: 488px;
|
|
margin: 0;
|
|
}
|
|
|
|
.listNumber {
|
|
composes: g-type-display-5 from global;
|
|
min-width: 40px;
|
|
height: 40px;
|
|
background-color: var(--consul);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 64px;
|
|
margin-top: 10px;
|
|
|
|
@media (--small) {
|
|
margin-right: 30px;
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
|
|
.featureTitle {
|
|
composes: g-type-display-2 from global;
|
|
margin: 0;
|
|
}
|
|
|
|
.featureSubtitle {
|
|
composes: g-type-body-large from global;
|
|
margin-top: 16px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.infoTitle {
|
|
composes: g-type-display-5 from global;
|
|
margin-top: 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.infoSection {
|
|
composes: g-type-body from global;
|
|
margin-top: 32px;
|
|
margin-bottom: 40px;
|
|
display: grid;
|
|
row-gap: 24px;
|
|
|
|
& p,
|
|
& ul {
|
|
margin: 0;
|
|
}
|
|
}
|