#footer-navigation > .content-wrapper {
    padding-top: 120px;
    
    background-image: url("../../images/navigation.svg");
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
}
@media (min-width: 900px) { #footer-navigation > .content-wrapper { padding-bottom: 150px; } }
#footer-navigation > .content-wrapper > .title {
    line-height: 30px;
    font-weight: 700;
    font-style: italic;
}
@media (min-width: 900px) {
    #footer-navigation > .content-wrapper > .title {
        padding-left: 40px;
        font-size: 35px;
    }
}
@media (max-width: 899.99px) {
    #footer-navigation > .content-wrapper > .title {
        margin-bottom: 70px;
        
        text-align: center;
        font-size: 25px;
    }
}
#footer-navigation > .content-wrapper > .columns {}
@media (min-width: 900px) {
    #footer-navigation > .content-wrapper > .columns {
        display: flex;
        flex-direction: row;
        align-items: center;
        column-gap: 30px;
    }
}
@media (max-width: 899.99px) {
    #footer-navigation > .content-wrapper > .columns {
        position: relative; z-index: 0;
    }
}
#footer-navigation > .content-wrapper > .columns > .column {}
@media (min-width: 900px) {
    #footer-navigation > .content-wrapper > .columns > .column {
        display: flex; flex: 0 0 calc((100% - 90px) / 4);
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        row-gap: 30px;
    }
    #footer-navigation > .content-wrapper > .columns > .column-1 { padding-bottom: 100px; }
    #footer-navigation > .content-wrapper > .columns > .column-2 {}
    #footer-navigation > .content-wrapper > .columns > .column-3 { padding-top: 50px; }
    #footer-navigation > .content-wrapper > .columns > .column-4 {}
}
@media (max-width: 899.99px) {
    #footer-navigation > .content-wrapper > .columns > .column { display: contents; }
}
#footer-navigation > .content-wrapper > .columns > .column > .button {
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    
    isolation: isolate;
}
@media (min-width: 900px) {
    #footer-navigation > .content-wrapper > .columns > .column > .button-1 { min-height: 320px; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-2 { min-height: 320px; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-3 { min-height: 250px; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-4 { min-height: 320px; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-5 { min-height: 320px; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-6 { min-height: 200px; }
}
@media (max-width: 899.99px) {
    #footer-navigation > .content-wrapper > .columns > .column > .button {
        position: relative;
        display: block; height: 290px;
    }
    #footer-navigation > .content-wrapper > .columns > .column:not(:last-child) > .button { margin-bottom: -70px; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-1 { z-index: 1; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-2 { z-index: 2; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-3 { z-index: 4; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-4 { z-index: 6; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-5 { z-index: 3; }
    #footer-navigation > .content-wrapper > .columns > .column > .button-6 { z-index: 5; }
}
#footer-navigation > .content-wrapper > .columns > .column > .button > .background {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
#footer-navigation > .content-wrapper > .columns > .column > .button > .background > img {
    display: block; height: 100%; width: 100%;
    
    object-fit: cover;
    object-position: center;
}
.loaded #footer-navigation > .content-wrapper > .columns > .column > .button > .background > img { transition: transform .2s ease-out; }
#footer-navigation > .content-wrapper > .columns > .column > .button:hover > .background > img { transform: scale(1.1); }
#footer-navigation > .content-wrapper > .columns > .column > .button > .title {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    
    background-color: rgba(0,0,0,.3);
}
@media (max-width: 899.99px) {
    #footer-navigation > .content-wrapper > .columns > .column:not(:last-child) > .button > .title { padding-bottom: 70px; }
}
#footer-navigation > .content-wrapper > .columns > .column > .button > .title > .text {
    text-align: center;
    font-weight: 700;
    color: #FFF;
}
#footer-navigation > .content-wrapper > .columns > .column > .button > .title > .text > span { font-weight: 100; }
.loaded #footer-navigation > .content-wrapper > .columns > .column > .button > .title { transition: background-color .2s ease-out; }
#footer-navigation > .content-wrapper > .columns > .column > .button:hover > .title { background-color: rgba(var(--main-color-rgb), .7); }
@media (min-width: 900px)    { #footer-navigation > .content-wrapper > .columns > .column > .button > .title > .text { font-size: 30px; } }
@media (max-width: 899.99px) { #footer-navigation > .content-wrapper > .columns > .column > .button > .title > .text { font-size: 25px; } }