ITRadio/client/src/assets/css/module/app-footer.scss

82 lines
1.9 KiB
SCSS

.footer {
padding-bottom: var(--space-between-block);
width: 100%;
&__top {
padding-bottom: 80px;
margin-bottom: 80px;
border-bottom: 1px solid var(--color-white-opacity);
}
&__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
@mixin responsive-xs {
align-items: flex-start;
flex-direction: column;
}
&-button {
margin-left: auto;
}
}
&__bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
&__menu {
display: grid;
grid-template-columns: var(--space-between-sections) var(--space-between-sections);
grid-template-rows: fit-content fit-content;
grid-column-gap: var(--space-between-sections);
grid-row-gap: var(--space-between-block);
@mixin responsive-m {
width: 100%;
grid-row-gap: 10px;
grid-template-rows: min-content;
grid-template-columns: min-content min-content min-content;
margin-bottom: var(--space-between-block);
}
@mixin responsive-s {
display: flex;
flex-wrap: wrap;
}
&-item {
@mixin responsive-s {
width: 100%;
}
}
&-link {
font-size: 1.2rem;
}
}
&__social {
display: flex;
flex-wrap: wrap;
gap: var(--space-between-block);
@mixin responsive-m {
margin-bottom: var(--space-between-block);
grid-row-gap: 10px;
}
}
&__connection {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
@mixin responsive-m {
width: 100%;
align-items: flex-start;
}
}
}