footer {
    padding-top: var(--size-xxl) !important;
    background: white;
    z-index: 150;
}

.footer-container {
    row-gap: 1em;
    z-index: 10;
}

.footer-title_subtitle,
.footer-email {grid-column: 1/-1;}

.footer-office {grid-column: span 2}


@media only screen and (min-width: 768px) {
    .footer-title_subtitle {grid-column: 1/3; grid-row: 1;}
    .footer-email {grid-column: 1/3; grid-row: 2;}
    .footer-office.--valencia {grid-column: 3/5; grid-row: 1/3; align-self: flex-end;}
    .footer-office.--barcelona {grid-column: 5/-1; grid-row: 1/3; align-self: flex-end;}
}

@media only screen and (min-width: 1096px) {
    footer {
        right: 0;
        bottom: 0;
        left: 0;
        padding-top: 1rem !important;
        z-index: 100;
    }

    body[data-template="landing"] footer {background: transparent !important;}
    body[data-template="landing"] footer .t-small {color: white !important;}

    .footer-title_subtitle {grid-column: 1/7; align-self: flex-end;}
    .footer-email {grid-column: -2/-1; grid-row: 1; align-self: flex-end;}
    .footer-office.--barcelona {grid-column: -4/-2; grid-row: 1;}
    .footer-office.--valencia {grid-column: -6/-4; grid-row: 1;}
}

@media (hover: hover) {
    .footer-email,
    .footer-office {transition: opacity 500ms;}

    .footer-email:hover,
    .footer-office:hover {opacity: .25;}
}