:root { --ifx-font-family: "Source Sans 3"; font-family: var(--ifx-font-family, sans-serif); } :host { display: block; width: 100%; } .footer__container { padding: 0px 32px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #FFFFFF; font-family: var(--ifx-font-family); } .footer__container .footer__wrapper { display: flex; flex-direction: column; width: 100%; } .footer__container .footer__wrapper .footer__logo_top svg { display: none; } @media (max-width: 768px) { .footer__container .footer__wrapper .footer__logo_top svg { display: inline; } } .footer__container .footer__wrapper .large { display: flex; align-items: flex-start; width: 100%; justify-content: space-between; } @media (max-width: 768px) { .footer__container .footer__wrapper .large { flex-wrap: wrap; justify-content: space-between; } } .footer__container .footer__wrapper .large ::slotted([slot=col]) { display: flex; gap: 32px; } @media (max-width: 768px) { .footer__container .footer__wrapper .large ::slotted([slot=col]) { flex-wrap: wrap; margin-top: 24px; } } .footer__container .footer__wrapper .default { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 24px 0; border-bottom: 1px solid #BFBBBB; margin-top: 48px; } .footer__container .footer__wrapper .default .footer__logo_btm svg { display: inline; vertical-align: bottom; } @media (max-width: 768px) { .footer__container .footer__wrapper .default .footer__logo_btm svg { display: none; } } @media (max-width: 768px) { .footer__container .footer__wrapper .default { margin-top: 24px; flex-direction: column; align-items: flex-start; } } .footer__container .footer__wrapper .default ::slotted([slot=socials]) { display: flex; gap: 32px; } @media (max-width: 768px) { .footer__container .footer__wrapper .default ::slotted([slot=socials]) { flex-wrap: wrap; margin-top: 24px; } } .footer__container .footer__wrapper .medium { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 24px 0; border-bottom: 1px solid #BFBBBB; } .footer__container .footer__wrapper .medium .footer__logo_default svg { vertical-align: bottom; } @media (max-width: 768px) { .footer__container .footer__wrapper .medium { flex-direction: column; align-items: flex-start; } } .footer__container .footer__wrapper .medium ::slotted([slot=socials]) { display: flex; gap: 32px; } @media (max-width: 768px) { .footer__container .footer__wrapper .medium ::slotted([slot=socials]) { flex-wrap: wrap; margin-top: 24px; } } .footer__container .footer__wrapper .footer__base { display: flex; justify-content: space-between; width: 100%; padding: 28px 0; } .footer__container .footer__wrapper .footer__base .footer__brand { font-style: normal; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #1D1D1D; flex-grow: 1; } .footer__container .footer__wrapper .footer__base .footer__buttons { display: flex; gap: 24px; padding-right: 16px; justify-content: flex-end; flex-grow: 1; } .footer__container .footer__wrapper .footer__base .footer__buttons a { font-style: normal; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: #1D1D1D; text-decoration: none; } @media (max-width: 768px) { .footer__container .footer__wrapper .footer__base .footer__buttons { justify-content: flex-start; flex-wrap: wrap; gap: 12px 16px; } } @media (max-width: 768px) { .footer__container .footer__wrapper .footer__base { flex-direction: column-reverse; } .footer__container .footer__wrapper .footer__base .footer__brand { margin-top: 16px; } }