footer {
  --footer-radius: var(--radius-4xl);
  --footer-padding-y: var(--padding-md);
  --footer-padding-x: var(--padding-xs);
  --footer-gap-y: var(--gap-xl);

  position: relative;
  margin-block-start: var(--size-20);
  background-color: var(--element-bg);
  border-radius: var(--footer-radius) var(--footer-radius) 0 0;
  padding: var(--footer-padding-y) var(--footer-padding-x);
  color: var(--element-text);

  .zhaw-logo {
    fill: var(--element-text);
    width: 50px;
    height: auto;

    @media (min-width: 768px) {
      width: 64px;
    }
  }

  > .container {
    display: flex;
    flex-direction: column;
    gap: var(--footer-gap-y);
  }

  .element-accordion {
    --accordion-border-color: var(--element-text);
  }

  .accordion-head {
    @media (min-width: 768px) {
      font-weight: var(--font-weight-bold);
    }
  }

  address {
    margin-bottom: var(--size-4);
  }
}

.footer-location-grid,
.footer-partner-grid,
.footer-legal-grid ul {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);

  @media (min-width: 768px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-partner-grid {
  align-items: center;

  svg {
    width: 100%;
    height: auto;
    
    >.bg {
      color: var(--element-bg);
    }
  }
}

.footer-school-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer-partner-grid img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.footer-legal-grid li {
  list-style: none;
}

.footer-claim {
  width: 160px;

  @media (min-width: 768px) {
    text-align: right;
    width: 320px;
  }
}

.footer-copyright {
  @media (min-width: 768px) {
    text-align: right;
  }
}

.footer-social-icons {
  display: grid;
  gap: var(--gap-2xl);
  margin-bottom: var(--size-4);

  grid-template-columns: repeat(4, auto);

  /* invert icon */
  a:hover svg{
    color: var(--element-bg);
    background: var(--element-text);
    border-radius: var(--radius-sm);
  }

  svg {
    width: 32px;
    height: auto;
  }

  @media (min-width: 768px) {
    grid-template-columns: repeat(12, auto);
  }
}