90 lines
1.8 KiB
SCSS
90 lines
1.8 KiB
SCSS
.browse {
|
|
margin: 96px 0;
|
|
|
|
@include bp (sm) {
|
|
margin-bottom: 128px;
|
|
}
|
|
|
|
// Description
|
|
&__description {
|
|
font-size: rem(20px);
|
|
margin: 0 auto 32px;
|
|
max-width: 230px;
|
|
text-align: center;
|
|
color: $color-tertiary;
|
|
font-weight: 200;
|
|
line-height: 1.4;
|
|
|
|
@include bp (sm) {
|
|
font-size: rem(28px);
|
|
margin-bottom: 56px;
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
// Continents
|
|
&__continents {
|
|
display: flex;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
|
|
&:hover {
|
|
li {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
li {
|
|
display: block;
|
|
margin: 0 8px;
|
|
pointer-events: auto;
|
|
transition: opacity 0.6s var(--ease-quart);
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Disabled button
|
|
.is-disabled {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
// Locations
|
|
&__locations {
|
|
width: 70%;
|
|
max-width: 1200px;
|
|
margin: 88px auto 0;
|
|
padding: 0 32px;
|
|
|
|
@include bp (mob-lg) {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
justify-content: center;
|
|
grid-gap: 24px 24px;
|
|
width: 85%;
|
|
padding: 0 24px;
|
|
}
|
|
@include bp (sm) {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
width: 100%;
|
|
margin-top: 104px;
|
|
}
|
|
@include bp (sd) {
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
display: block;
|
|
margin-bottom: 40px;
|
|
|
|
@include bp (mob-lg) {
|
|
margin-bottom: 24px;
|
|
}
|
|
@include bp (sd) {
|
|
margin: 0 22px 56px;
|
|
}
|
|
}
|
|
}
|
|
} |