UCI
<footer class="footer-detailed footer-detailed_reduced">
    <div class="container">
        <div class="footer-detailed__wrapper">

            <div class="footer-detailed__head">

                <div class="footer-detailed__head-logoItem">

                    <li class="footer-detailed__head-logoItem-link " href="#">
                        <img class="footer-detailed__head-logoItem-img" src="/dist/images/icon_footer_UCI.png">
                    </li>

                    <li class="footer-detailed__head-logoItem-desc " href="#">
                        <div class="bodycopy-xs
                            
                            
                            ">
                            2014-2022 UCI Unión de Créditos Inmobiliários, S.A. Sucursal em Portugal - Todos os Direitos Reservados
                        </div>
                    </li>

                </div>

            </div>

            <div class="footer-detailed__main">
                <div class="footer-detailed__main-section">
                    <div class="footer-detailed__main-section-stacker">

                        <ul class="footer-detailed__main-section-openLines">

                            <div class="footer-detailed__main-section-openLines-openLineTile">
                                <li class="footer-detailed__main-section-openLines-openLineTile-openLineForFooter">
                                    Linha Direta
                                    <b class="footer-detailed__main-section-openLines-openLineTile-openLineForFooter-accent">
                                        UCI
                                    </b>
                                </li>
                                <li class="footer-detailed__main-section-openLines-openLineTile-descOpenLine">
                                    Dias úteis das 09h00 às 18h00
                                </li>
                            </div>

                            <div class="footer-detailed__main-section-openLines-phoneTilesList">
                                <div class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile">
                                    <li class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile-phoneNumber">
                                        213 002 042</li>
                                    <li class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile-descPhoneNumber">
                                        (Custo de chamada
                                        <br>
                                        para rede fixa nacional)
                                    </li>
                                </div>

                                <div class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile">
                                    <li class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile-phoneNumber">
                                        932 442 604</li>
                                    <li class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile-descPhoneNumber">
                                        (Custo de chamada
                                        <br>
                                        para rede móvel nacional)
                                    </li>
                                </div>
                            </div>

                        </ul>

                        <ul class="footer-detailed__main-section-socials">
                            <li class="footer-detailed__main-section-socials-social">
                                <a class="footer-detailed__main-section-socials-social-link" href="#fb">
                                    <svg class="icon icon-fb     ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#fb"></use>
                                    </svg>
                                </a>
                            </li>
                            <li class="footer-detailed__main-section-socials-social">
                                <a class="footer-detailed__main-section-socials-social-link" href="#inst">
                                    <svg class="icon icon-instagram     ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#instagram"></use>
                                    </svg>
                                </a>
                            </li>
                            <li class="footer-detailed__main-section-socials-social">
                                <a class="footer-detailed__main-section-socials-social-link" href="#in">
                                    <svg class="icon icon-in     ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#in"></use>
                                    </svg>
                                </a>
                            </li>
                            <li class="footer-detailed__main-section-socials-social">
                                <a class="footer-detailed__main-section-socials-social-link" href="#yt">
                                    <svg class="icon icon-youtube     ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#youtube"></use>
                                    </svg>
                                </a>
                            </li>
                        </ul>

                    </div>

                    <div class="footer-detailed__main-section-certificates">
                        <li class="footer-detailed__main-section-certificates-certificate">
                            <a class="footer-detailed__main-section-certificates-certificate-link" href="#" target="_blank" noopener>
                                <img class="footer-detailed__main-section-certificates-certificate-img" src="/dist/images/aenor-qualidade.png" alt="AENOR Gestão de Qualidade">
                            </a>
                        </li>
                        <li class="footer-detailed__main-section-certificates-certificate">
                            <a class="footer-detailed__main-section-certificates-certificate-link" href="#" target="_blank" noopener>
                                <img class="footer-detailed__main-section-certificates-certificate-img" src="/dist/images/cert-iq-net.png" alt="Certified IQ NET Management System">
                            </a>
                        </li>
                        <li class="footer-detailed__main-section-certificates-certificate">
                            <a class="footer-detailed__main-section-certificates-certificate-link" href="#" target="_blank" noopener>
                                <img class="footer-detailed__main-section-certificates-certificate-img" src="/dist/images/euronext-lisbon.png" alt="Euronext Lisbon Awards 2021">
                            </a>
                        </li>
                        <li class="footer-detailed__main-section-certificates-certificate">
                            <a class="footer-detailed__main-section-certificates-certificate-link" href="#" target="_blank" noopener>
                                <img class="footer-detailed__main-section-certificates-certificate-img" src="/dist/images/great-place.png" alt="Certified Great Place to Work">
                            </a>
                        </li>
                    </div>
                </div>

                <div class="footer-detailed__main-legal">
                    <ul class="footer-detailed__main-legal-list">
                        <li class="footer-detailed__main-legal-item">
                            <a class="footer-detailed__main-legal-link" href="#">
                                <div class="bodycopy-xs
                                    
                                    
                                    ">
                                    <span>Aviso Legal e Termos de Utilização</span>
                                </div>
                            </a>
                        </li>
                        <li class="footer-detailed__main-legal-item">
                            <a class="footer-detailed__main-legal-link" href="#">
                                <div class="bodycopy-xs
                                    
                                    
                                    ">
                                    <span>Política de Privacidade, Cookies e Tratamento de Dados</span>
                                </div>
                            </a>
                        </li>
                        <li class="footer-detailed__main-legal-item">
                            <a class="footer-detailed__main-legal-link" href="#">
                                <div class="bodycopy-xs
                                    
                                    
                                    ">
                                    <span>Informação Legal e Reclamações</span>
                                </div>
                            </a>
                        </li>
                        <li class="footer-detailed__main-legal-item">
                            <a class="footer-detailed__main-legal-link" href="#">
                                <div class="bodycopy-xs
                                    
                                    
                                    ">
                                    <span>Governance</span>
                                </div>
                            </a>
                        </li>
                        <li class="footer-detailed__main-legal-item">
                            <a class="footer-detailed__main-legal-link" href="#">
                                <div class="bodycopy-xs
                                    
                                    
                                    ">
                                    <span>Preçário</span>
                                </div>
                            </a>
                        </li>
                        <li class="footer-detailed__main-legal-item">
                            <a class="footer-detailed__main-legal-link" href="#">
                                <div class="bodycopy-xs
                                    
                                    
                                    ">
                                    <span>Sitemap</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</footer>
{{#if isFooterSmall}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="footer-detailed-small"></div>
{{/if}}
<footer {{#if hasID}}id="{{idComponent}}"{{/if}} class="footer-detailed footer-detailed_reduced">
    <div class="container">
        <div class="footer-detailed__wrapper">

            <div class="footer-detailed__head">

                <div class="footer-detailed__head-logoItem">

                    <li class="footer-detailed__head-logoItem-link " href="#">
                        <img class="footer-detailed__head-logoItem-img" src="{{ footer-info-pic.src }}">
                    </li>

                    <li class="footer-detailed__head-logoItem-desc " href="#">
                        {{> @bodycopy-xs this.footer-logo-desc }}
                    </li>


                </div>

                {{#unless isFooterReduced}}
                <div class="footer-detailed__head-declarativeTextItem">
                    {{#each footer-info-item}}
                    {{> @bodycopy-m this.title }}
                    {{> @link this.general-link }}
                    {{/each}}
                </div>
                {{/unless}}

            </div>

            {{#unless isFooterReduced}}
            <div class="footer-detailed__menu">
                <div class="footer-detailed__menu-tiles">
                    {{#each footer-menu-tile}}
                    <div class="footer-detailed__menu-tiles-tile">
                        {{> @tile-footer-detailed this }}
                    </div>
                    {{/each}}
                </div>

                <div class="footer-detailed__menu-ekomiSection">
                    <div class="footer-detailed__menu-ekomiSection-ekomi"></div>
                </div>
            </div>
            {{/unless}}

            <div class="footer-detailed__main">
                <div class="footer-detailed__main-section">
                    <div class="footer-detailed__main-section-stacker">

                        <ul class="footer-detailed__main-section-openLines">
                            
                            <div class="footer-detailed__main-section-openLines-openLineTile">
                                <li class="footer-detailed__main-section-openLines-openLineTile-openLineForFooter">
                                    Linha Direta
                                    <b
                                        class="footer-detailed__main-section-openLines-openLineTile-openLineForFooter-accent">
                                        UCI
                                    </b>
                                </li>
                                <li class="footer-detailed__main-section-openLines-openLineTile-descOpenLine">
                                    Dias úteis das 09h00 às 18h00
                                </li>
                            </div>

                            <div class="footer-detailed__main-section-openLines-phoneTilesList">
                                <div class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile">
                                    <li
                                        class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile-phoneNumber">
                                        213 002 042</li>
                                    <li
                                        class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile-descPhoneNumber">
                                        (Custo de chamada
                                        <br>
                                        para rede fixa nacional)
                                    </li>
                                </div>

                                <div class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile">
                                    <li
                                        class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile-phoneNumber">
                                        932 442 604</li>
                                    <li
                                        class="footer-detailed__main-section-openLines-phoneTilesList-phoneTile-descPhoneNumber">
                                        (Custo de chamada
                                        <br>
                                        para rede móvel nacional)
                                    </li>
                                </div>
                            </div>


                        </ul>

                        {{#if this.social}}
                        <ul class="footer-detailed__main-section-socials">
                            {{#each social}}
                            <li class="footer-detailed__main-section-socials-social">
                                <a class="footer-detailed__main-section-socials-social-link" href="{{ this.href }}">
                                    {{> @icon this.icon }}
                                </a>
                            </li>
                            {{/each}}
                        </ul>
                        {{/if}}

                    </div>

                    <div class="footer-detailed__main-section-certificates">
                        {{#each footer-share-item}}
                        {{#each this.certificate}}
                        <li class="footer-detailed__main-section-certificates-certificate">
                            <a class="footer-detailed__main-section-certificates-certificate-link" href="#"
                                target="_blank" noopener>
                                <img class="footer-detailed__main-section-certificates-certificate-img"
                                    src="{{ this.src }}" alt="{{ this.alt }}">
                            </a>
                        </li>
                        {{/each}}
                        {{/each}}
                    </div>
                </div>


                <div class="footer-detailed__main-legal">
                    <ul class="footer-detailed__main-legal-list">
                        {{#each footer-legal-item}}
                        <li class="footer-detailed__main-legal-item">
                            <a class="footer-detailed__main-legal-link" href="#">
                                {{> @bodycopy-xs this }}
                            </a>
                        </li>
                        {{/each}}
                    </ul>
                </div>

            </div>
        </div>
    </div>
</footer>
{
  "hasID": false,
  "footer-menu-tile": [
    {
      "isMenu": true,
      "title": {
        "text": "Crédito Habitação",
        "colorDark": true
      },
      "link": [
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Crédito de Habitação jornada"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Crédito de Habitação e obras"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Crédito para construção"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Transferência de Crédito de Habitação"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "UCI Mortgages"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Produto 5"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Seguros"
        }
      ]
    },
    {
      "isMenu": true,
      "title": {
        "text": "Simuladores Crédito Habitação",
        "colorDark": true
      },
      "link": [
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Simulador Crédito de Habitação"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Simulador Quanto posso pedir"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Simulador 3"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Simulador 4"
        }
      ]
    },
    {
      "isMenu": true,
      "title": {
        "text": "Vantagens",
        "colorDark": true
      },
      "link": [
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Vantagens"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Viva Green"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Traz um Amigo"
        }
      ]
    },
    {
      "isMenu": true,
      "title": {
        "text": "Sobre a UCI",
        "colorDark": true
      },
      "link": [
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Sobre a UCI"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Opiniões"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Onde estamos"
        }
      ]
    },
    {
      "isMenu": true,
      "title": {
        "text": "Centro de Ajuda",
        "colorDark": true
      },
      "link": [
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "FAQ's"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Centro de Recursos"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Glossário"
        }
      ]
    },
    {
      "isMenu": true,
      "title": {
        "text": "Contactar",
        "colorDark": true
      },
      "link": [
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Pedir Contacto"
        },
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "href": "#",
          "text": "Pedir Empréstimo"
        }
      ]
    },
    {
      "isMenu": false,
      "title": {
        "text": "",
        "colorDark": true
      },
      "link": [
        {
          "isSimple": true,
          "isTitleAsLink": true,
          "href": "#",
          "text": "Blog"
        }
      ]
    }
  ],
  "footer-info-pic2": {
    "logo": {
      "max-width": "175px",
      "src": "/dist/images/icon_footer_UCI.png",
      "alt": "UCI.pt"
    }
  },
  "footer-info-pic": {
    "max-width": "360px",
    "src": "/dist/images/icon_footer_UCI.png",
    "alt": "UCI"
  },
  "footer-logo-desc": {
    "text": "2014-2022 UCI Unión de Créditos Inmobiliários, S.A. Sucursal em Portugal - Todos os Direitos Reservados"
  },
  "footer-info-item": [
    {
      "desc": {
        "text": "<p>2014-2022 UCI Unión de Créditos Inmobiliários, S.A. <br> Sucursal em Portugal - Todos os Direitos Reservados</p>",
        "colorDark": true
      }
    },
    {
      "link": [
        {
          "isSimple": true,
          "isDetailedFooterLink": true,
          "isDark": true,
          "href": "#",
          "text": "Grupo UCI"
        }
      ],
      "general-link": {
        "isSimple": true,
        "isLight": true,
        "href": "#",
        "text": "Todos os sites do grupo"
      }
    }
  ],
  "social": [
    {
      "href": "#fb",
      "icon": {
        "name": "fb"
      }
    },
    {
      "href": "#inst",
      "icon": {
        "name": "instagram"
      }
    },
    {
      "href": "#in",
      "icon": {
        "name": "in"
      }
    },
    {
      "href": "#yt",
      "icon": {
        "name": "youtube"
      }
    }
  ],
  "footer-share-item": [
    {
      "logo": {
        "max-width": "175px",
        "src": "/dist/images/icon_footer_UCI.png",
        "alt": "UCI.pt"
      }
    },
    {
      "certificate": [
        {
          "width": "auto",
          "height": "80px",
          "src": "/dist/images/aenor-qualidade.png",
          "alt": "AENOR Gestão de Qualidade"
        },
        {
          "width": "auto",
          "height": "80px",
          "src": "/dist/images/cert-iq-net.png",
          "alt": "Certified IQ NET Management System"
        },
        {
          "width": "auto",
          "height": "80px",
          "src": "/dist/images/euronext-lisbon.png",
          "alt": "Euronext Lisbon Awards 2021"
        },
        {
          "width": "auto",
          "height": "80px",
          "src": "/dist/images/great-place.png",
          "alt": "Certified Great Place to Work"
        }
      ]
    }
  ],
  "isFooterSmall": false,
  "footer-legal-item": [
    {
      "text": "<span>Aviso Legal e Termos de Utilização</span>",
      "colorLight": false
    },
    {
      "text": "<span>Política de Privacidade, Cookies e Tratamento de Dados</span>",
      "colorLight": false
    },
    {
      "text": "<span>Informação Legal e Reclamações</span>",
      "colorLight": false
    },
    {
      "text": "<span>Governance</span>",
      "colorLight": false
    },
    {
      "text": "<span>Preçário</span>",
      "colorLight": false
    },
    {
      "text": "<span>Sitemap</span>",
      "colorLight": false
    }
  ],
  "isFooterReduced": true,
  "title": {
    "text": "Contact",
    "colorLight": false
  }
}
  • Content:
     .footer-detailed {
    
         bottom: 0;
         left: 0;
         width: 100%;
    
         &_reduced {
             .footer-detailed {
                 &__menu {
                     &-tiles {
                         @media (--viewport-ms-min) {
                             /*   padding: 40px 0 40px; */
                         }
                     }
    
                     /*this defines the size of the the legal section*/
                     &-legal {
                         @media (--viewport-ms-min) {
                             padding: 20px 0 5px;
                         }
                     }
    
                 }
    
                 &__main {
                     &-info {
                         @media (--viewport-ms-min) {
                             padding-top: 50px;
                         }
                     }
    
                     &-share {
                         @media (--viewport-ms-min) {
                             padding-top: 30px;
                         }
    
                         &-item {
                             @media (--viewport-ms-min) {
                                 margin-bottom: 30px;
                             }
    
                             &:last-child {
                                 @media (--viewport-ms-min) {
                                     flex-basis: auto;
                                 }
                             }
                         }
                     }
    
                     &-legal {
                         @media (--viewport-ms-min) {
                             padding: 20px 0 5px;
                         }
                     }
                 }
             }
    
         }
    
         &__wrapper {
    
             display: flex;
             flex-flow: column;
    
             justify-content: flex-start;
    
    
             @media(--viewport-md-min) {
                 padding: 40px 0px 50px 0px;
             }
    
             @media(--viewport-sm-only) {
                 padding: 40px 0px 50px;
             }
    
             @media(--viewport-ms-max) {
                 padding: 40px 0px 10px;
             }
    
    
         }
    
         &__head {
             display: flex;
             flex-flow: row;
             padding-bottom: 40px;
    
             @media(--viewport-ms-max) {
                 flex-flow: column;
                 padding-bottom: 20px;
             }
    
             &-logoItem {
    
                 display: flex;
                 flex-direction: column;
                 padding: 0px 40px 0px 0px;
    
    
    
                 @media(--viewport-sm-min) {
                     width: 26.4%;
                 }
    
                 @media(--viewport-sm-only) {
                     width: 40%;
                 }
    
                 &-link {
                     display: block;
                     transition: all 0.3s;
    
                     &:hover,
                     &:focus {
                         opacity: 0.6;
                     }
                 }
    
                 &-img {
                     display: block;
                     max-width: 100%;
                     height: auto;
                 }
    
                 &-desc {
                     padding-top: 15px;
    
    
                     width: 200px;
    
    
                     .bodycopy-xs {
    
                         &:hover,
                         &:focus {
                             color: var(--color-text);
                         }
                     }
                 }
    
             }
    
             &-declarativeTextItem {
                 display: flex;
                 flex-direction: column;
                 justify-content: flex-end;
    
                 @media(--viewport-ms-max) {
                     padding-top: 16px;
                 }
    
                 .title-m {
                     color: var(--color-text);
                 }
    
             }
    
         }
    
    
         &__menu {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
             background-color: var(--color-white);
    
             padding-bottom: 50px;
    
             @media(--viewport-ms-max) {
                 flex-direction: column;
             }
    
             &-tiles {
                 position: relative;
                 display: flex;
                 flex-basis: auto;
                 flex-wrap: wrap;
                 justify-content: flex-start;
    
                 width: 80%;
    
                 @media(--viewport-ms-max) {
                     width: 100%;
                 }
    
                 &-tile {
    
                     display: flex;
                     width: 33%;
                     height: fit-content;
    
                     padding: 0px 50px 25px 0px;
    
                     /* ONLY 2 TILES PER ROW */
                     @media(--viewport-sm-only) {
                         width: 50%;
                     }
    
                     /* MOBILE STYLIZATION */
                     @media(--viewport-ms-max) {
                         padding: 0px 20px 14px 0px;
                         width: fit-content;
                         min-width: 50%;
    
                         &:last-child {
                             padding-bottom: 40px;
                         }
                     }
    
    
                 }
    
             }
    
             &-ekomiSection {
                 display: flex;
                 flex-flow: column;
                 width: fit-content;
    
                 &-ekomi {
                     height: fit-content
                 }
    
             }
    
         }
    
         &__main {
             display: block;
             background-color: var(--color-white);
    
             &-section {
                 display: flex;
                 height: fit-content;
                 flex-flow: row;
    
                 padding-bottom: 30px;
    
                 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    
                 @media(--viewport-ms-max) {
                     flex-flow: column;
                 }
    
                 &-stacker {
                     display: flex;
                     flex-direction: column;
                     width: 50%;
    
                     @media(--viewport-ms-max) {
                         width: fit-content;
                         padding-bottom: 38px;
                     }
    
                 }
    
                 &-openLines {
                     display: flex;
                     flex-direction: row;
                     height: fit-content;
    
                     @media(--viewport-ms-max) {
                         flex-direction: column;
                     }
    
                     &-openLineTile {
                         display: flex;
                         flex-direction: column;
                         width: fit-content;
                         padding-right: 40px;
    
                         @media(--viewport-md-min) {
                             padding-right: 55px;
                         }
    
                         @media(--viewport-ms-max) {
                            padding-right: 0px;
                        }
    
                         &-openLineForFooter {
                             display: block;
                             text-align: left;
                             color: #00635b;
                             font-family: 'Jornada Sans Book';
                             font-size: 16px;
                             font-weight: normal;
                             line-height: 26px;
                             letter-spacing: 0;
    
                             &-accent {
                                 color: var(--color-accent);
                             }
                         }
    
                         &-descOpenLine {
                             display: inline-block;
                             text-align: left;
                             color: #8B8B8B;
                             font-family: 'Jornada Sans Book';
                             font-size: 11px;
                             font-weight: lighter;
                             margin-bottom: 5px;
                         }
                     }
    
                     &-phoneTilesList {
                         display: flex;
                         flex-direction: row;
    
                         @media(--viewport-ms-max) {
                             padding: 20px 0px;
                         }
    
                         &-phoneTile {
                             display: flex;
                             flex-direction: column;
                             width: fit-content;
                             padding-right: 40px;
    
                             @media(--viewport-md-min) {
                                 padding-right: 55px;
                             }
    
                             @media(--viewport-ms-max) {
                                 padding-right: 10px;
                             }
    
                             &-phoneNumber {
                                 display: block;
                                 text-align: left;
                                 font-family: 'Jornada Sans Book';
                                 font-size: 16px;
                                 font-weight: normal;
                                 line-height: 26px;
                                 letter-spacing: 0;
                             }
    
                             &-descPhoneNumber {
                                 display: block;
                                 text-align: left;
                                 color: #191919;
                                 font-family: 'Jornada Sans Book';
                                 font-size: 11px;
                                 font-weight: lighter;
                                 margin-bottom: 10px;
                             }
                         }
    
                     }
                 }
    
                 &-socials {
                     display: flex;
                     flex-flow: row;
                     flex-wrap: wrap;
                     align-items: center;
    
                     padding: 10px 0px 10px 0px;
    
                     &-social {
    
                         padding-right: 15px;
    
                         @media (--viewport-sm-min) {
                             margin-right: 5px;
                         }
    
                         &:last-child {
                             margin-right: 0;
                         }
    
                         &-link {
                             position: relative;
                             display: flex;
                             transition: all 0.3s;
    
                             &::after {
                                 position: absolute;
                                 top: 50%;
                                 left: 50%;
                                 transform: translate(-50%, -50%);
                                 display: block;
                                 width: 40px;
                                 height: 40px;
                                 content: '';
                             }
    
                             &:hover,
                             &:focus {
                                 opacity: 0.6;
                             }
                         }
    
                         .icon {
                             width: 16px;
                             height: 16px;
                             fill: var(--color-secondary);
                         }
                     }
                 }
    
                 &-certificates {
    
                     display: flex;
                     flex-direction: row;
    
                     flex-wrap: wrap;
    
                     justify-content: flex-end;
    
                     width: 50%;
    
                     @media(--viewport-ms-max) {
                         width: 100%;
                         justify-content: flex-start;
                     }
    
    
                     &-certificate {
                         display: flex;
                         padding-left: 10px;
                         padding-bottom: 30px;
    
                         @media(--viewport-ms-max) {
                             padding-left: 0px;
                             padding-right: 20px;
                             padding-bottom: 20px;
                         }
    
                         &:last-child {
                             padding-right: 0px;
                         }
    
                         &-link {
                             display: block;
                             transition: all 0.3s;
    
                             &:hover,
                             &:focus {
                                 opacity: 0.6;
                             }
                         }
    
                         &-img {
                             display: block;
                             width: auto;
                             height: 90px;
    
                             @media(--viewport-ms-max) {
                                 height: 80px;
                             }
    
                         }
                     }
                 }
    
             }
    
             &-legal {
                 padding: 30px 0 50px;
    
                 @media (--viewport-ms-max) {
                     padding: 30px 0 30px;
                 }
    
                 &-list {
                     @media (--viewport-ms-min) {
                         display: flex;
                         flex-wrap: wrap;
    
                     }
    
                     @media (--viewport-sm-min) {
                         justify-content: space-between;
                     }
                 }
    
                 &-item {
                     margin-bottom: 20px;
    
                     @media (--viewport-ms-min) {
                         margin-bottom: 15px;
                     }
    
                     @media (--viewport-ms-only) {
                         flex-basis: 50%;
                     }
                 }
    
                 &-link {
                     display: block;
                     transition: all 0.3s;
                     color: var(--color-text);
    
                     &:hover,
                     &:focus {
                         color: var(--color-accent);
                     }
    
                     .bodycopy-xs {
    
                         &:hover,
                         &:focus {
                             color: var(--color-accent);
                         }
                     }
    
    
                 }
             }
         }
     }
  • URL: /components/raw/footer-detailed/footer-detailed.css
  • Filesystem Path: src/03-organisms/footer-detailed/footer-detailed.css
  • Size: 12.9 KB

No notes defined.