site/components/case-study-header/style.css
@value badgerWhite from '../../css/_colors.css';
@value mediumScreen, largeScreen from "../../css/_sizes.css";
.caseStudy {
composes: fontXS from "../../css/typography/_fonts.css";
composes: lightSerif from "../../css/typography/_fonts.css";
font-size: 20px;
line-height: 27px;
background-color: badgerWhite;
}
.header {
width: 100%;
background-color: #f3f3f3;
margin-bottom: 10px;
}
.header__container {
margin: 0 auto;
position: relative;
width: 100%;
}
.header__imageContainer {
display: flex;
justify-content: center;
align-items: center;
}
.header__image {
width: 100%;
}
.content {
padding-bottom: 40px;
}
.content__wrapper {
padding: 20px 20px 0px;
}
.content__mainTitle {
composes: fontL from "../../css/typography/_fonts.css";
composes: serif from "../../css/typography/_fonts.css";
margin-bottom: 0px;
}
.content__tagline {
font-size: 24px;
line-height: 28px;
margin-top: 20px;
}
@media mediumScreen {
.header__image {
width: auto;
max-height: 330px;
}
.content__wrapper {
padding: 30px 20px 0px;
}
.content__mainTitle {
margin-bottom: 9px;
}
.content__tagline {
font-size: 30px;
line-height: 35px;
margin-top: 20px;
}
}
@media largeScreen {
.header__container {
height: 400px;
}
.header__image {
height: 456px;
max-height: none;
width: auto;
}
.content {
max-width: 1400px;
padding: 20px 120px 0px;
margin: auto;
}
.content__wrapper {
padding-left: 0;
padding-right: 0;
}
.content__mainTitle {
position: relative;
top: -96px;
display: block;
padding: 20px;
height: 100%;
background-color: badgerWhite;
margin-bottom: -98px;
margin-top: 11px;
}
.header {
padding-bottom: 56px;
}
.content__tagline {
font-size: 40px;
padding: 20px;
line-height: 44px;
margin-top: 20px;
margin-bottom: 35px;
}
}