consul/website/components/side-by-side/style.module.css

62 lines
960 B
CSS

.sideBySide {
display: flex;
flex-wrap: wrap;
@media (--large) {
flex-wrap: nowrap;
}
& .sideWrapper {
padding: 105px 0;
width: 100%;
@media (--large) {
width: 50%;
padding-bottom: 176px;
}
&.leftSide {
background: var(--consul-secondary);
@media (--large) {
padding-left: 48px;
padding-right: 104px;
}
}
&.rightSide {
@media (--large) {
padding-right: 48px;
padding-left: 75px;
}
}
& .side {
margin: 0 auto;
@media (--small) {
max-width: 616px;
padding-left: 24px;
padding-right: 24px;
}
@media (--medium) {
max-width: 944px;
padding-left: 40px;
padding-right: 40px;
}
@media (--large) {
margin: 0;
max-width: 490px;
}
}
&:first-child .side {
@media (--large) {
float: right;
}
}
}
}