.footer-two-columns {
  --footer-two-columns-background-color: var(--theme-base);

  --footer-two-columns-spacing: var(--theme-spacing);
  --footer-two-columns-spacing-2x: calc(var(--footer-two-columns-spacing) * 2);
  --footer-two-columns-spacing-4x: calc(var(--footer-two-columns-spacing) * 4);
  --footer-two-columns-spacing-6x: calc(var(--footer-two-columns-spacing) * 6);
  --footer-two-columns-spacing-8x: calc(var(--footer-two-columns-spacing) * 8);
  --footer-two-columns-spacing-10x: calc(var(--footer-two-columns-spacing) * 10);
  --footer-two-columns-spacing-12x: calc(var(--footer-two-columns-spacing) * 12);
  --footer-two-columns-spacing-16x: calc(var(--footer-two-columns-spacing) * 16);
  --footer-two-columns-spacing-20x: calc(var(--footer-two-columns-spacing) * 20);
  --footer-two-columns-spacing-24x: calc(var(--footer-two-columns-spacing) * 24);
  --footer-two-columns-spacing-32x: calc(var(--footer-two-columns-spacing) * 32);

  --footer-two-columns-top-margin-bottom: var(--footer-two-columns-spacing-16x, 4rem);

  --footer-two-columns-brand-font-size: var(--theme-font-size, 1rem);
  --footer-two-columns-brand-gap: var(--footer-two-columns-spacing-8x, 2rem);
  --footer-two-columns-brand-color: var(--theme-base-content-soft);
  --footer-two-columns-brand-line-height: var(--theme-line-height-sm, 1.25rem);

  --footer-two-columns-menu-grid-gap: var(--footer-two-columns-spacing-16x, 4rem);

  --footer-two-columns-menu-link-font-size: var(--theme-font-size, 1rem);
  --footer-two-columns-menu-link-gap: var(--footer-two-columns-spacing-8x, 2rem);
  --footer-two-columns-menu-link-gap-lg: var(--footer-two-columns-spacing-16x, 4rem);
  --footer-two-columns-menu-link-color: var(--theme-base-content-soft);
  --footer-two-columns-menu-link-line-height: var(--theme-line-height-sm, 1.25rem);
  --footer-two-columns-menu-link-font-weight: var(--theme-font-weight-normal, 400);
  --footer-two-columns-menu-link-font-weight-strong: var(--theme-font-weight-bold, 700);
  --footer-two-columns-menu-link-margin-bottom: var(--footer-two-columns-spacing-4x, 1rem);
  --footer-two-columns-menu-link-margin-bottom-strong: var(--footer-two-columns-spacing-5x, 1.25rem);

  --footer-two-columns-bottom-font-size: var(--theme-font-size, 1rem);
  --footer-two-columns-bottom-line-height: var(--theme-line-height-sm, 1.25rem);
  --footer-two-columns-bottom-color: var(--theme-base-content-soft);
  --footer-two-columns-bottom-margin-top: var(--footer-two-columns-spacing-16x, 4rem);
  --footer-two-columns-bottom-padding-top: var(--footer-two-columns-spacing-8x, 2rem);
  --footer-two-columns-bottom-border-color: color-mix(in oklab,var(--theme-base-content)10%,transparent);
  --footer-two-columns-bottom-margin-top-md: var(--footer-two-columns-spacing-20x, 5rem);
  --footer-two-columns-bottom-margin-top-lg: var(--footer-two-columns-spacing-24x, 6rem);

  container-type: inline-size;
  container-name: footer-two-columns;

  background-color: var(--footer-two-columns-background-color);

  .footer-two-columns__container {
    padding-bottom: var(--footer-two-columns-spacing-8x, 2rem);
    padding-top: var(--footer-two-columns-spacing-16x, 4rem);

    @container footer-two-columns (min-width: 640px) {
    padding-top: var(--footer-two-columns-spacing-24x, 6rem);
    }

    @container footer-two-columns (min-width: 1024px) {
      padding-top: var(--footer-two-columns-spacing-32x, 8rem);
    }

    .footer-two-columns__top {
      margin-bottom: var(--footer-two-columns-top-margin-bottom);
    }

    .footer-two-columns__grid {
      @container footer-two-columns (min-width: 1024px) {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--footer-two-columns-menu-grid-gap);
        display: grid;
      }

      .footer-two-columns__brand {
        grid-column: span 4 / span 4;
        display: flex;
        flex-direction: column;
        gap: var(--footer-two-columns-brand-gap);
        color: var(--footer-two-columns-brand-color);
        font-size: var(--footer-two-columns-brand-font-size);
        line-height: var(--footer-two-columns-brand-line-height);

        p {
          margin-bottom: 0;
        }
      }

      .footer-two-columns__menu {
        grid-column: span 8 / span 8;
        margin-top: var(--footer-two-columns-spacing-16x, 4rem);

        @container footer-two-columns (min-width: 1024px) {
          margin-top: 0;
        }

        nav[role="navigation"] {
          > ul:first-of-type {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--footer-two-columns-menu-link-gap);
          }

          > ul:first-of-type li a {
            font-size: var(--footer-two-columns-menu-link-font-size);
            line-height: var(--footer-two-columns-menu-link-line-height);
            font-weight: var(--footer-two-columns-menu-link-font-weight);
            display: block;
            margin-bottom: var(--footer-two-columns-menu-link-margin-bottom);
            color: var(--footer-two-columns-menu-link-color);
          }

          > ul:first-of-type > li > a {
            margin-bottom: var(--footer-two-columns-menu-link-margin-bottom-strong, 1.25rem);
            display: block;
            font-weight: var(--footer-two-columns-menu-link-font-weight-strong);
          }

          @container footer-two-columns (min-width: 640px) {
            > ul:first-of-type {
              grid-template-columns: repeat(3, 1fr);
            }
          }

          @container footer-two-columns (min-width: 1024px) {
            > ul:first-of-type {
              display: flex;
              gap: var(--footer-two-columns-menu-link-gap-lg);
              justify-content: end;
            }
          }
        }
      }
    }

    .footer-two-columns__bottom {
      margin-top: var(--footer-two-columns-bottom-margin-top);
      padding-top: var(--footer-two-columns-bottom-padding-top);
      border-top-style: solid;
      border-top-width: 1px;
      border-color: var(--footer-two-columns-bottom-border-color);
      color: var(--footer-two-columns-bottom-color);
      font-size: var(--footer-two-columns-bottom-font-size);
      line-height: var(--footer-two-columns-bottom-line-height);

      p {
        margin-bottom: 0;
      }

      @container footer-two-columns (min-width: 640px) {
        margin-top: var(--footer-two-columns-bottom-margin-top-md);
      }

      @container footer-two-columns (min-width: 1024px) {
        margin-top: var(--footer-two-columns-bottom-margin-top-lg);
      }
    }
  }
}