/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/pages/Home/Locations/styles.scss
@import "styles/_mixins.scss";
.home-locations {
background: var(--Purple-gradient);
background-size: cover;
text-align: center;
padding: 64px 100px 80px;
border-radius: 16px;
margin-bottom: 24px;
color: var(--White);
position: relative;
overflow: hidden;
.label {
position: relative;
z-index: 1;
}
h2 {
margin: 24px auto;
max-width: 700px;
z-index: 1;
position: relative;
}
.body1 {
max-width: 720px;
margin: 0 auto;
margin-bottom: 64px;
opacity: 0.6;
z-index: 1;
position: relative;
}
&-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
z-index: 1;
position: relative;
}
&__bg {
position: absolute;
top: 200%;
left: 0;
transform: scale(1.05);
}
&-item {
display: flex;
text-align: start;
gap: 16px;
border-radius: 8px;
border: 1px solid var(--White-10);
background: var(--White-10);
backdrop-filter: blur(20px);
box-shadow: none;
max-height: 72px;
padding: 12px 40px 12px 12px;
transition:
0.5s border,
0.5s background,
0.5s box-shadow;
&__flag {
border-radius: 4px;
height: 48px;
width: 48px;
object-fit: cover;
}
&__body {
display: flex;
flex-direction: column;
justify-content: space-between;
.button-text {
display: flex;
gap: 5px;
.arrow {
opacity: 0;
transition: 0.5s;
transform: translateX(-5px);
}
}
.body2 {
opacity: 0.6;
}
}
&:hover {
border: 1px solid var(--White-20);
background: var(--White-20);
box-shadow: 0px 16px 40px -16px rgba(13, 17, 38, 0.12);
.arrow {
opacity: 1;
transform: translateX(0);
}
}
}
&-navitem {
border-radius: 8px;
background: var(--White);
backdrop-filter: blur(20px);
padding: 12px 16px;
height: 72px;
.button-text {
color: var(--Dark);
margin-bottom: 12px;
}
.link-item {
margin-top: 0;
}
&:hover {
.link-item {
color: var(--Lavender);
}
}
}
@include w($xxl) {
padding: 64px 16px 80px;
}
@include w($lg) {
border-radius: 0;
}
@include w($sm) {
h2 {
margin: 16px 0;
}
.body1 {
margin-bottom: 32px;
}
&-container {
gap: 12px;
}
&-item {
flex: 1 1 calc(50% - 20px);
padding: 10px;
&__flag {
height: 32px;
width: 32px;
}
&__body {
.button-text {
font-size: 12px;
}
.body2 {
font-size: 12px;
}
}
}
&-navitem {
flex: 1 1 100%;
text-align: start;
margin-top: 12px;
}
}
}