partners {
background: #f6f6f6; header { background: #202020; div { @include center; display: block; padding: 30px 0; } h2, p { width: 90%; padding: 0 5%; } h2 { font-size: 2em; font-weight: 600; line-height: 1em; } p { color: $accentFontColor; font-size: .9em; line-height: 1.4em; font-weight: 200; padding-top: 15px; } } ul { @include center; width: 100%; padding: 0; figure { float: left; display: inline-block; vertical-align: middle; width: 100%; height: 450px; } dl { display: inline-block; width: 90%; margin: 0 5% 30px 5%; vertical-align: middle; text-align: center; } dt { @include title; font-size: 3em; } dd { font-size: .9em; line-height: 2em; } .description { padding: 20px 0 40px 0; } .social-media { li { margin: 0; margin-right: 10px; } span { line-height: 2.5em; } } .savage { figure { background: url("../../assets/img/21savage.jpg") center top / cover no-repeat; } } .logic { text-align: left; figure { background: url("../../assets/img/logic.jpg") center top / cover no-repeat; float: right; } } .meechie { figure { background: url("../../assets/img/meechie.jpg") center top / cover no-repeat; } } }
}
@media only screen and (min-width: $windowSize) {
#partners { header { padding: 60px 0; div { @include center; display: flex; align-items: center; } h2, p { padding: 0; } h2 { flex: 1 20%; font-size: 2.5em; padding: 0 30% 0 0; } p { flex: 1 70%; line-height: 1.8em; padding-top: 0; } } ul { max-width: 1200px; li { overflow: auto; margin-bottom: -150px; &:last-child { margin-bottom: 0; } } figure { width: 50%; height: 700px; } dl { width: 23%; margin: 200px 3% 0 3%; text-align: left; } .savage { dl { margin-top: 100px; } } .logic { text-align: right; } } }
}