/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/pages/Contacts/styles.scss
@import "styles/_mixins.scss";
.contacts {
&-title {
margin-bottom: 40px;
h1 {
margin: 50px 0 24px;
}
.body1 {
opacity: 0.6;
max-width: 640px;
}
}
&-form-section {
display: flex;
gap: 40px;
border-radius: 16px;
background-color: var(--Light-Grey);
padding: 16px 40px 16px 16px;
}
&-info {
color: var(--White);
width: 100%;
max-width: 436px;
border-radius: 8px;
background-image: url("../../assets/backgrounds/contactsinfo.svg"), var(--Purple-gradient);
background-repeat: no-repeat;
background-position: bottom right;
padding: 32px 32px 46px;
&-section {
margin-bottom: 56px;
display: flex;
flex-direction: column;
gap: 16px;
&:last-child {
margin-bottom: 0;
}
}
&-title {
opacity: 0.6;
}
&-item {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 8px 16px 8px 8px;
border-radius: 6px;
border: 1px solid var(--White-20);
background-color: var(--White-10);
backdrop-filter: blur(12px);
transition: 0.5s;
&-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border-radius: 3px;
background-color: var(--White-20);
svg {
height: 24px;
width: 24px;
}
}
&--hover {
&:hover {
background-color: var(--White-20);
}
}
}
&-socials {
display: flex;
gap: 16px;
.contacts-info-item {
width: fit-content;
padding: 8px;
&:hover {
background-color: var(--White-20);
}
}
}
}
@include w($lg) {
&-form-section {
border-radius: 0;
}
}
@include w($md) {
&-form-section {
flex-direction: column-reverse;
padding: 64px 16px;
gap: 64px;
}
&-info {
min-width: 100%;
}
}
@include w($sm) {
&-title {
h1 {
margin: 32px 0 16px;
}
}
}
}