:root {
--cbar-spacing: 4rem;
}
.landing-row {
margin-left: 4rem;
margin-top: 2rem;
ul.simple-lines {
margin-top: 1rem;
line-height: 1.2;
}
}
.landing-row {
display: flex;
flex-direction: row;
height: 100%;
.headers {
display: flex;
flex-direction: column;
margin-right: 3rem;
div.header-box {
display: flex;
flex-direction: row;
gap: 3rem;
.main-header {
font-weight: bold;
text-align: right;
min-width: 7rem;
}
.main-header.top {
margin-top: calc(var(--cbar-spacing)*1);
}
.main-header.bottom {
display: flex;
flex-direction: column;
h2 {
margin-top: 20rem;
}
}
.sub-header {
margin-top: calc(var(--cbar-spacing)*2);
}
}
div.bottom-banner {
@media (width > 578px) {
display: none;
}
display: flex;
flex-direction: column;
background-color: var(--yellow0);
height: var(--cbar-spacing);
}
}
.color-stack {
@media (width > 578px ) {
display: flex;
}
@media (width <= 578px ) {
display: none;
}
flex-direction: column;
>div {
flex: 1 0 auto;
display: flex;
flex-direction: row;
}
div.top {
max-height: calc(var(--cbar-spacing)*2);
flex: 1 0;
}
div.bottom {
background-color: var(--yellow0);
div {
background-color: var(--white0);
}
}
div.color-bar {
flex: 0 0;
min-height: var(--cbar-spacing);
div {
background-color: var(--white0);
}
&.yellow {
background-color: var(--yellow0);
}
&.pink {
background-color: var(--pink0);
}
&.tan {
background-color: var(--tan0);
}
}
}
}