mirror of
https://github.com/DerTyp7/explainegy-nextjs.git
synced 2025-10-29 21:02:13 +01:00
72 lines
1.3 KiB
SCSS
72 lines
1.3 KiB
SCSS
.footer {
|
|
padding: 200px 15px 30px 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 50px 50px;
|
|
|
|
.adContainer {
|
|
background-color: #ff00003e;
|
|
width: var(--footer-ad-container-width);
|
|
height: var(--footer-ad-container-height);
|
|
|
|
@media (max-width: var(--footer-ad-container-width)) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 100px 100px;
|
|
align-items: center;
|
|
|
|
@media (max-width: var(--footer-breakpoint-1)) {
|
|
column-gap: 10px;
|
|
}
|
|
|
|
@media (max-width: var(--footer-breakpoint-3)) {
|
|
grid-template-columns: 1fr;
|
|
gap: 100px 20px;
|
|
}
|
|
|
|
.company {
|
|
float: right;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100;
|
|
flex-shrink: 0;
|
|
flex: 1;
|
|
text-align: center;
|
|
column-gap: 10px;
|
|
font-size: 0.8em;
|
|
@media (max-width: var(--footer-breakpoint-1)) {
|
|
flex-direction: column;
|
|
font-size: 0.7em;
|
|
column-gap: 0px;
|
|
}
|
|
|
|
@media (max-width: var(--footer-breakpoint-3)) {
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
justify-content: right;
|
|
align-items: center;
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 20px 100px;
|
|
|
|
@media (max-width: var(--footer-breakpoint-4)) {
|
|
column-gap: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|