```css
/* ==========================================================
   MLK FOOTER
   Everything is namespaced under .mlk-footer to prevent
   theme footer styles from overriding this module.
   ========================================================== */


/* =============== RESET — MODULE ONLY =============== */

.mlk-footer,
.mlk-footer *,
.mlk-footer *::before,
.mlk-footer *::after {
  box-sizing: border-box;
}


/* =============== VARIABLES =============== */

.mlk-footer {
  --mlk-primary-color: #3E4B70;
  --mlk-second-color: #2FB4D3;
  --mlk-third-color: #20A98F;
  --mlk-fourth-color: #EF6D58;
  --mlk-white-color: #fff;

  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--mlk-primary-color);
  font-family: "Inter", sans-serif;
}


/* =============== FOOTER CONTAINERS =============== */

.mlk-footer-container {
  width: 100%;
  margin: 0;
}


/* =============== TOP FOOTER =============== */

.mlk-footer-top {
  background-color: var(--mlk-primary-color);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  font-family: "Inter", sans-serif;
  padding-top: 1rem;
  padding-bottom: 2rem;
}


/*
 * The columns are rendered conditionally through HubL.
 *
 * 4 columns = 25% each
 * 3 columns = 33.33% each
 * 2 columns = 50% each
 *
 * Because hidden optional columns are not rendered,
 * CSS Grid automatically redistributes the available width.
 */


/* =============== FOOTER ITEMS =============== */

.mlk-footer-item {
  min-width: 0;
  width: 100%;
}

.mlk-footer-brand {
  display: flex;
  flex-direction: column;
}

.mlk-footer-logo {
  max-width: 200px;
  padding: 1rem 0;
  margin-top: 2%;
}

.mlk-footer-title {
  font-family: "Lilita One", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  padding: 1rem 0;
  margin: 0;
  color: var(--mlk-white-color);
}

.mlk-footer-items {
  width: 100%;
}


/* =============== BUSINESS INFORMATION =============== */

.mlk-footer-items p {
  cursor: pointer;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  padding: 0.1rem 0;
  margin: 0;
  color: var(--mlk-white-color);
}

.mlk-footer-items p a {
  color: var(--mlk-white-color);
  font-weight: 300;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
}


/* =============== MENUS =============== */

.mlk-footer-items ul {
  list-style: none;
  margin: 0;
  padding: 0 0 2% 0;
}

.mlk-footer-items ul li {
  padding: 0.2rem 0;
}

.mlk-footer-items ul li a {
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--mlk-white-color);
  text-decoration: none;
  display: inline-block;
}

.mlk-footer-items ul li a:hover {
  text-decoration: none;
  color: var(--mlk-second-color);
}

.mlk-footer-items ul li:last-child {
  padding-bottom: 2rem;
}


/* =============== FIRST FOOTER COLUMN =============== */

.mlk-footer-brand .mlk-footer-items ul li a {
  cursor: default;
  pointer-events: none;
}


/* =============== SOCIAL MEDIA =============== */

.mlk-footer-social .mlk-footer-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  justify-items: center;
  align-items: center;
  max-width: 160px;
}

.mlk-social-footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

.mlk-footer-social .mlk-footer-items i {
  font-size: 2.5rem;
  color: var(--mlk-second-color);
  cursor: pointer;
  transition: color 0.3s ease;
}

.mlk-footer-social .mlk-footer-items i:hover {
  color: var(--mlk-fourth-color);
}


/* =============== END FOOTER =============== */

.mlk-footer-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--mlk-primary-color);
  border-top: 2px solid var(--mlk-second-color);
  font-family: "Inter", sans-serif;
  padding-top: 0;
  padding-bottom: 0.5rem;
}

.mlk-footer-copyright {
  color: var(--mlk-white-color);
  padding: 1rem 0 0;
  margin: 0;
  font-size: 0.9rem;
  text-align: center;
}

.mlk-footer-copyright b {
  font-weight: inherit;
  font-size: 0.9rem;
}

.mlk-footer-designer {
  color: hsla(0, 0%, 98%, 0.541);
  padding-bottom: 0.5rem;
  font-size: 0.9rem;
  text-decoration: none;
  text-align: center;
}

.mlk-footer-designer:hover {
  text-decoration: none;
  color: var(--mlk-white-color);
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 769px) { 
  .mlk-footer-container { 
    padding-left: 5rem; 
    padding-right: 5rem; 
  } 
  .mlk-footer-top { 
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; 
    justify-content: stretch; 
    align-items: start; 
  } 
  .mlk-footer-brand { 
    grid-column: 1; 
  } 
  .mlk-footer-social { 
    grid-column: 4; 
    justify-self: end; 
  } 
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 769px) and (max-width: 1100px) {

  .mlk-footer-container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .mlk-footer-top {
    gap: 2rem;
  }

  .mlk-footer-title {
    font-size: 1.35rem;
  }

  .mlk-footer-items ul li a,
  .mlk-footer-items p,
  .mlk-footer-items p a {
    font-size: 0.95rem;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width: 768px) {

  .mlk-footer-container {
    width: 100%;
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .mlk-footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 2rem;
  }

  .mlk-footer-item {
    width: 100%;
    min-width: 0;
  }


  /* ======================================================
     BRAND / LOGO
     ====================================================== */

  .mlk-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .mlk-footer-logo {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    padding: 0 0 1rem;
    text-align: center;
  }

  /* Explicitly center the HubSpot-generated logo */
  .mlk-footer-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  /* Center business information beneath logo */
  .mlk-footer-brand .mlk-footer-items {
    width: 100%;
    text-align: center;
  }


  /* ======================================================
     FOOTER HEADINGS
     ====================================================== */

  .mlk-footer-title {
    font-size: 1.5rem;
    padding: 1.25rem 0 0.75rem;
  }


  /* ======================================================
     MENUS
     ====================================================== */

  .mlk-footer-items ul {
    padding-bottom: 0;
  }

  .mlk-footer-items ul li {
    padding: 0.25rem 0;
  }

  .mlk-footer-items ul li:last-child {
    padding-bottom: 1.5rem;
  }


  /* ======================================================
     BUSINESS INFORMATION
     ====================================================== */

  .mlk-footer-items p {
    font-size: 0.95rem;
    line-height: 1.6;
  }


  /* ======================================================
     SOCIAL ICONS
     ====================================================== */

  .mlk-footer-social .mlk-footer-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    max-width: none;
    padding-bottom: 1rem;
  }

  .mlk-footer-social .mlk-footer-items i {
    font-size: 2.25rem;
  }


  /* ======================================================
     BOTTOM FOOTER
     ====================================================== */

  .mlk-footer-end {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .mlk-footer-copyright {
    padding: 1rem 0 0.5rem;
    font-size: 0.85rem;
  }

  .mlk-footer-copyright b {
    font-size: 0.85rem;
  }

  .mlk-footer-designer {
    font-size: 0.85rem;
    padding-bottom: 0.75rem;
  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media screen and (max-width: 480px) {

  .mlk-footer-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .mlk-footer-top {
    padding-top: 30px;
  }

  .mlk-footer-title {
    font-size: 1.35rem;
  }

  .mlk-footer-items ul li a,
  .mlk-footer-items p,
  .mlk-footer-items p a {
    font-size: 0.95rem;
  }

  .mlk-footer-social .mlk-footer-items {
    gap: 1.25rem;
  }

  .mlk-footer-social .mlk-footer-items i {
    font-size: 2rem;
  }

}
```