.sideWrapperCommon { background-color: var(--secondary-background); display: flex; padding: calc(40rem / 16) calc(50rem / 16); margin: calc(65rem / 16) 0; width: 88%; } .wrapperRight { composes: sideWrapperCommon; align-self: end; margin-right: 0; border-radius: calc(200rem / 16) 0 0 calc(200rem / 16); flex-direction: row-reverse; padding-right: calc(50rem / 16); } .wrapperLeft { composes: sideWrapperCommon; align-self: start; margin-left: 0; border-radius: 0 calc(200rem / 16) calc(200rem / 16) 0; flex-direction: row; padding-left: calc(50rem / 16); } .noBackground { background: none; align-self: center; } .wrapperCenter { composes: sideWrapperCommon; flex-direction: column; text-align: center; gap: calc(25rem / 16); /* to match the 65px margin with the left/right variant: add 45px bottom margin, since internal wrapper contributes 20px for the center component 0px top margin, since h3 contributes 45px and internal wrapper contributes 20px for the center component */ margin: 0 0 calc(45rem / 16) 0; align-self: center; } .wrapperCenter .internalWrapper { margin: auto; } .wrapperNoBodyText { flex-direction: column; } .wrapperNoBodyText .internalWrapper { text-align: center; } @media screen and (max-width: 900px) { .sideWrapperCommon { margin: auto; flex-direction: column; text-align: center; padding: 0; border-radius: 0; width: 100%; } .wrapperCenter .internalWrapper { margin: initial; } .wrapperCenter { padding: 0; } .horizontalScrollOnMobile { overflow-x: scroll; } } .internalWrapper { padding: calc(20rem / 16); /* Without this, some graphs will have an horizontal scroll bar thats not needed */ overflow-x: auto; } .internalWrapper p { font-size: calc(24rem / 16); opacity: .85; line-height: 1.25; } .textWrapper { /* We add this since we want the text to shrink before the graph ever shrinks */ flex-shrink: 1000; /* So that text is still readable in the awkward 1000px width screen size */ min-width: 200px; }