#site-footer { background-color: black; width: 100vw; position: relative; left: calc(var(--padding-body) * -1); padding: calc(var(--padding-body) * 2) var(--padding-body); // border-top: var(--border-light); p { margin: calc(var(--spacing) * 0.5) 0; a { text-decoration: none; &:hover { text-decoration: underline; } } } .p__small { font-size: var(--fs-x-small); // margin-top: calc(var(--spacing)*0.5) } #list-socials { list-style: none; columns: 2; max-width: 500px; margin: 0; a { display: flex; align-items: center; gap: 1ch; text-decoration: none; height: calc(var(--spacing) * 1); &::after { content: "↗"; color: var(--grey-300); } } .text { line-height: 1; } .icon { width: 20px; height: 20px; position: relative; top: -2px; } svg { display: flex; align-items: center; width: 20px; height: 20px; } } @media #{$small} { margin-top: calc(var(--spacing) * 2); .footer__socials { margin-top: calc(var(--spacing) * 1.5); } .footer__mentions { margin-top: calc(var(--spacing) * 0.5); p { // font-size: var(--font-size); margin-top: calc(var(--spacing) * 2); } } } @media #{$small-up} { .site-footer__container { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--spacing) * 2); max-width: 1200px; margin: 0 auto; } .footer__mentions { grid-column: span 2; text-align: center; p { font-size: var(--font-size); margin-top: calc(var(--spacing) * 2); } } } @media #{$medium-up} { .site-footer__container { column-gap: calc(var(--spacing) * 4); } } @media #{$small} { .footer__mentions { padding-top: calc(var(--spacing) * 1); p { margin-top: 0; } text-align: center; } } }