//maintain image ratio
//add this mixin to an image wrapper
//eg <div class="image-wrapper"><img src=""></div>
@mixin aspect-ratio($width, $height) {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
height: 100%;
width: 100%;
}
}
//Background image version
@mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
//used for an h2 with a span/tagline inside
// <h2><span>tagline</span>Main title</h2>
@mixin h2wtag{
text-align: center;
color: $navy;
margin-bottom: 45px;
line-height: 38px;
@media(max-width: $mobile){
font-size: 18px;
line-height: 28px;
}
span{
display: block;
font-size: 12px;
font-weight: $bold;
text-transform: uppercase;
@media(max-width: $mobile){
font-size: 10px;
}
}
}
//Rotate + to X
.dropdown-container .dropdown-button span::after {
transition: transform .5s;
}
.dropdown-container.active .dropdown-button span::after {
transform: rotate(45deg);
}