site/components/cell-a-slice/style.css
@value badgerBlack, mbpOrange, mbpGreen from '../../css/_colors.css';
@value mediumScreen, largeScreen from "../../css/_sizes.css";
.CellASliceWrapper {
composes: dividerOrange from '../../css/_divider.css';
width: 100%;
background: mbpOrange;
}
.CellASlice {
composes: sansSerif from '../../css/typography/_fonts.css';
position: relative;
max-width: 1060px;
width: 100%;
margin: 0 auto;
padding: 27px;
line-height: 1.5em;
}
.CellASliceHeading {
composes: serif from '../../css/typography/_fonts.css';
font-size: 18px;
line-height: 1.5em;
}
.CellASlice p {
font-size: 14px;
line-height: 1.25em;
}
.CellASlice h4 {
margin-bottom: 8px;
}
.CellASliceLink {
composes: boldSansSerif from '../../css/typography/_fonts.css';
cursor: pointer;
margin-top: 14px;
font-size: 14px;
background: mbpGreen;
color: badgerBlack;
display: block;
height: 48px;
width: 178px;
line-height: 48px;
text-align: center;
}
.CellASliceLink:hover {
background: #61e4b8;
}
.CellASliceCloseButton {
position: absolute;
display: block;
height: 16px;
width: 16px;
background: none;
top: 14px;
right: 14px;
border: none;
outline: none;
cursor: pointer;
}
.CellASliceCloseButton:after,
.CellASliceCloseButton:before {
content: '';
display: block;
background: badgerBlack;
height: 2px;
width: 20px;
position: absolute;
left: -2px;
top: 7px;
}
.CellASliceCloseButton:after {
transform: rotate(45deg);
}
.CellASliceCloseButton:before {
transform: rotate(-45deg);
}
.CellASliceImageWrapper {
display: none;
}
@media mediumScreen {
.CellASliceWrapper {
padding: 90px;
}
.CellASlice {
display: flex;
flex-direction: row;
}
.CellASliceImageWrapper {
display: block;
position: relative;
width: 40%;
}
.CellASliceImageWrapper img {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.CellASliceImage {
margin-top: 14px;
}
.CellASliceHeading {
font-size: 36px;
}
.CellASlice h4 {
margin-bottom: 40px;
}
.CellASlice p {
font-size: 24px;
margin-bottom: 40px;
}
.CellASliceLink {
font-size: 24px;
width: 292px;
height: 58px;
line-height: 58px;
}
.CellASliceText {
width: 60%;
padding-right: 20px;
}
}