site/pages/what-we-do/cross-functional-slice/styles.css
@value badgerRed, badgerBlack, badgerWhite from "../../../css/_colors.css";
@value contentMaxWidth, largeScreen, mediumScreen from "../../../css/_sizes.css";
.widthContainer {
margin-left: auto;
margin-right: auto;
max-width: contentMaxWidth;
}
.outerHeadingContainer {
position: relative;
background-color: badgerBlack;
}
.crossFunctionalSlice {
background-color: badgerBlack;
color: badgerWhite;
text-align: left;
position: relative;
top: 1px; /* this fixes a thin white line appearing just above the cutout */
overflow: hidden;
}
.crossFunctionalSlice:before {
padding-left: 2px;
content: '';
position: absolute;
left: -6px;
width: 50%;
height: 10px;
top: 0;
transform: skew(-40deg);
background-color: badgerWhite;
z-index: 10;
}
.photoContainer {
max-width: 1000px;
}
.sliceBody {
margin: 0 auto;
max-width: 1000px;
}
.headingContainer {
background-color: badgerBlack;
margin: 0 auto;
max-width: 400px;
}
.heading {
composes: widthContainer;
composes: serif from '../../../css/typography/_fonts.css';
composes: fontL from '../../../css/typography/_fonts.css';
font-weight: bold;
text-align: center;
max-width: 800px;
position: relative;
top: 0;
margin: 0 auto 25px;
background: badgerBlack;
padding: 20px 30px 0;
}
.image {
width: 100%;
}
.imageContainer {
margin: 0 auto;
padding: 0 10px;
width: 260px;
}
.colourBoxContainer {
display: flex;
flex-wrap: wrap;
padding: 0 20px 40px;
max-width: 460px;
margin: 0 auto;
}
@media mediumScreen {
.outerHeadingContainer {
margin-top: -120px;
}
.headingContainer {
width: 70%;
}
.imageContainer {
padding: 0;
}
.colourBoxContainer {
justify-content: center;
padding: 40px 0 10px;
margin: 0 auto;
max-width: 820px;
}
.boxWrapper {
padding: 0 20px 30px;
width: 50%;
max-width: calc(280px + 40px);
}
.photoContainer {
max-width: 1200px;
margin: 10px auto 0;
}
.photoContainer .image {
position: relative;
top: -130px;
}
}
@media largeScreen {
.outerHeadingContainer {
margin-top: -138px;
}
.headingContainer {
width: 90%;
max-width: 800px;
}
.heading {
padding: 30px 60px 0;
top: -40px;
}
.photoContainer {
max-width: 1200px;
}
.photoContainer .image {
position: relative;
top: -150px;
}
.colourBoxContainer {
max-width: contentMaxWidth;
padding-top: 55px;
}
.boxWrapper {
padding-left: 12px;
padding-right: 12px;
width: 25%;
max-width: 205px;
}
}