<style lang="scss" is:global>
@use "../../styles/theme.scss" as *;
@include view-large-desktop() {
.badges-container {
display: flex;
position: relative;
justify-content: center;
width: $viewLargeDesktop;
a {
color: white;
}
&__image {
display: block;
width: $viewLargeDesktop;
}
&__logos {
display: flex;
position: absolute;
top: 0;
flex-direction: row;
justify-content: space-around;
width: 90%;
padding: 25px 0;
}
&__disclaimers {
display: flex;
position: absolute;
bottom: 15px;
flex-direction: column;
align-items: center;
width: auto;
color: $white;
font-size: 12px;
font-family: $hurmeGeometricSans1SemiBold;
.disclaimers__text {
display: block;
width: 100%;
}
}
}
}
@include view-desktop() {
.badges-container {
width: $viewDesktop;
&__image {
width: $viewDesktop;
}
}
}
@include view-mobile() {
.badges-container {
display: flex;
position: relative;
justify-content: center;
width: 100%;
a {
color: white;
}
&__wrapper {
width: 100%;
}
&__image {
display: block;
width: 100%;
height: 490px;
@include responsive(mobile) {
height: 490px;
}
@include responsive(tablet) {
height: 400px;
}
@include responsive(tab-port) {
height: 380px;
}
@include responsive(desktop) {
height: auto;
}
&--wider {
height: 600px;
@include responsive(mobile) {
height: 490px;
}
@include responsive(tablet) {
height: 400px;
}
@include responsive(tab-port) {
height: 340px;
}
@include responsive(desktop) {
height: 220px;
}
}
}
&__logos {
display: flex;
position: absolute;
top: 0;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
width: 75%;
padding: 25px 0;
@include responsive(tablet) {
width: 78%;
}
@include responsive(tab-port) {
width: 62%;
}
@include responsive(desktop) {
flex-direction: row;
justify-content: space-around;
width: 90%;
}
.container-logos__img {
width: 100%;
padding: 10px 15px;
@include responsive(tablet) {
padding: 0 15px;
}
@include responsive(desktop) {
padding: 0;
height: 80px;
}
&--small {
@include responsive(desktop) {
padding: 0;
height: 60px;
}
}
}
&__disclaimers {
display: flex;
position: absolute;
bottom: 5px;
left: 20px;
flex-direction: column;
width: auto;
color: $white;
font-size: 10px;
font-family: $hurmeGeometricSans1SemiBold;
@include responsive(desktop) {
bottom: 15px;
left: auto;
align-items: center;
font-size: 12px;
}
.disclaimers__text {
display: block;
width: 90%;
@include responsive(desktop) {
width: 81%;
}
&--small {
width: 70%;
@include responsive(desktop) {
width: 81%;
}
}
}
}
}
}
</style>