biobulkbende.org/app/assets/scss/modules/_how-it-works.scss

149 lines
1.8 KiB
SCSS
Raw Normal View History

2020-10-09 12:48:01 +00:00
.how-it-works{
2020-10-15 20:35:24 +00:00
margin-bottom: 2.5rem;
2020-10-09 12:48:01 +00:00
strong {
font-weight: 800;
}
&--atSmall-centered{
text-align: center;
@include atLarge{
text-align: left;
}
}
&--atSmall-t-margin{
2020-10-15 20:35:24 +00:00
margin-top: 6rem !important;
2020-10-15 20:35:24 +00:00
@include atMedium{
margin-top: 4rem !important;
}
@include atLarge{
margin-top: 100px;
}
}
2020-10-09 12:48:01 +00:00
&--centered{
position: absolute;
top: 0px;
2020-10-09 12:48:01 +00:00
width: 100%;
text-align: center;
}
&--t-margin{
@include atSmall{
margin-top: 10px;
}
@include atMedium{
margin-top: -45px;
}
2020-10-09 12:48:01 +00:00
}
&__last-section{
2020-10-15 20:35:24 +00:00
padding: 3rem 0px 50px 0px;
2020-10-09 12:48:01 +00:00
background-color: rgba(white,0.9);
2020-10-15 20:35:24 +00:00
@include atLarge{
padding: 100px 0px 50px 0px;
}
2020-10-09 12:48:01 +00:00
}
p{
font-weight: 300;
line-height: 1.25;
margin: 0;
font-size: 1.2rem;
@include atMedium{
margin: 0 0 1.8rem 0;
font-size: 1.4rem;
}
}
&__title{
font-weight: 300;
font-size: 1.7rem;
margin-bottom: 45px;
@include atMedium(){
margin-top: 10px;
font-size: 2.1rem;
}
}
2020-10-15 20:35:24 +00:00
&__title-small{
font-weight: 300;
font-size: 1.4rem;
margin-bottom: 45px;
@include atMedium(){
margin-top: 10px;
font-size: 2.1rem;
}
}
&__img{
2020-10-15 20:35:24 +00:00
// display: none;
2020-10-15 20:35:24 +00:00
// @include atLarge{
// display: inline-block;
// }
&--small-only{
display: inline-block;
2020-10-15 20:35:24 +00:00
margin: 10px 0px;
@include atLarge{
display: none;
}
}
}
2020-10-09 16:14:11 +00:00
&__icon--1{
width: 150px;
@include atMedium{
width: 200px;
}
@include atLarge{
width: 225px;
margin-left: 80px;
}
2020-10-09 12:48:01 +00:00
}
2020-10-09 16:14:11 +00:00
&__icon--2{
2020-10-15 20:35:24 +00:00
width: 100px;
2020-10-09 16:14:11 +00:00
margin-right: .8rem;
2020-10-15 20:35:24 +00:00
margin-bottom: -35px;
2020-10-09 16:14:11 +00:00
}
&__icon--3{
2020-10-15 20:35:24 +00:00
width: 100px;
2020-10-09 12:48:01 +00:00
margin-right: .8rem;
2020-10-15 20:35:24 +00:00
margin-bottom: -30px;
margin-top: 1.2rem;
@include atMedium{
margin-top: 3.2rem;
}
@include atLarge{
margin-top: 0rem;
}
2020-10-09 12:48:01 +00:00
}
2020-10-09 16:14:11 +00:00
&__icon--4{
width: 100px;
margin-bottom: -30px;
margin-right: 20px;
}
2020-10-09 12:48:01 +00:00
}