.sponsors {
  position: relative;
  margin-top: calc(2 *var(--navbar-height));
}

.snake-top-left {
  position: absolute;
  top: calc(-1 * var(--navbar-height) - var(--padding-2));
  right: 68%;
  background-color: var(--theme-red);
  height: var(--navbar-height);
  width: 100vw;
  border-bottom-right-radius: var(--border-radius);
}

.snake-top-left::before {
  content: "";
  position: absolute;
  bottom: var(--navbar-height);
  right: 0;
  background-color: var(--theme-red);
  height: calc(var(--navbar-height) + var(--padding-2));
  width: var(--navbar-height);
  border-top-left-radius: var(--border-radius);
}

.snake-top-left::after {
    content: "";
    position: absolute;
    bottom: calc(var(--navbar-height) - 1px);
    right: calc(var(--navbar-height) - 1px);
    width: 16px;
    height: 16px;
    background:
        radial-gradient(
            circle 10px at 100% 100%,
            transparent 16px,
            var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
    transform: rotate(180deg);
}

.snake-top-right {
  position: absolute;
  top: calc(-2 * var(--navbar-height) - 2 * var(--padding-2));
  left: 32%;
  background-color: var(--theme-red);
  height: var(--navbar-height);
  width: 68%;
  border-top-right-radius: var(--border-radius);
}

.snake-top-right::before {
    content: "";
    position: absolute;
    top: calc(var(--navbar-height) - 1px);
    left: -1px;
    width: 16px;
    height: 16px;
    background:
        radial-gradient(
            circle 10px at 100% 100%,
            transparent 16px,
            var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
}

.snake-top-right .mobile-heading {
  display: none;
}

.sponsors-container {
  padding: var(--padding-2);
  margin: calc(2 * var(--navbar-height));
  margin-bottom: 196px;
}

.sponsors-container p,
.sponsors-container hr {
  margin: var(--padding-0);
}

.sponsors-container ul {
  margin: var(--padding-0) var(--padding-2);
}

.snake-vertical-left {
  position: absolute;
  top: calc(5 * var(--navbar-height) + var(--padding-1));
  left: 0;
  background-color: var(--theme-red);
  width: var(--navbar-height);
  border-top-right-radius: var(--border-radius);
}

.snake-vertical-left::before {
  content: "";
  position: absolute;
  top: calc(100%);
  left: 0;
  background-color: var(--theme-red);
  height: var(--navbar-height);
  width: 100vw;
  border-bottom-left-radius: var(--border-radius);
}

.snake-vertical-left::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: calc(var(--navbar-height) - 1px);
  width: 16px;
  height: 16px;
  background:
      radial-gradient(
          circle 10px at 100% 100%,
          transparent 16px,
          var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
  transform: rotate(-90deg);
}

.snake-vertical-right {
  position: absolute;
  top: calc(3 * var(--navbar-height));
  right: 0;
  background-color: var(--theme-red);
  height: 100%;
  width: var(--navbar-height);
  border-bottom-left-radius: var(--border-radius);
}

.snake-vertical-right::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--navbar-height));
  right: 0;
  background-color: var(--theme-red);
  height: var(--navbar-height);
  width: 50vw;
  border-top-right-radius: var(--border-radius);
}

.snake-vertical-right::after {
    content: "";
    position: absolute;
    top: -1px;
    right: calc(var(--navbar-height) - 1px);
    width: 16px;
    height: 16px;
    background:
        radial-gradient(
            circle 10px at 100% 100%,
            transparent 16px,
            var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
    transform: rotate(90deg);
}

.sponsors-container > p {
  line-height: 1.5;
}

.sponsor {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sponsor[data-sponsor-type="platinum"] img {
  width: 50rem;
}

.sponsor[data-sponsor-type="gold"] img,
.sponsor[data-sponsor-type="community"] img {
  width: 40rem;
}

.sponsor[data-sponsor-type="silver"] img {
  width: 30rem;
}

.sponsor[data-sponsor-type="graphite"] img,
.sponsor[data-sponsor-type="brown"] img {
  width: 20rem;
}

@media(max-width: 1200px) {
  .sponsors {
    margin-top: calc(3 * var(--navbar-height));
  }

  .snake-vertical-right {
    top: calc(2 * var(--navbar-height) + var(--padding-1) - 4px);
  }
}

@media(max-width: 600px) {
  .desktop-heading p {
    display: none;
  }

  .snake-top-right .mobile-heading {
    display: inline;
    color: var(--theme-white);
  }

  .snake-top-right .mobile-heading p {
    font-size: 0.8rem;
  }

  .snake-top-right .mobile-heading p a {
    color: var(--theme-white);
    font-size: 0.8rem;
    font-weight: 600;
  }

  .sponsors {
    margin-top: calc(3 * var(--navbar-height));
  }

  .snake-top-left,
  .snake-vertical-left,
  .snake-vertical-right {
    display: none;
  }

  .snake-top-right {
    top: calc(-2 * var(--navbar-height));
    left: calc(10%);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    width: 90%;
    height: fit-content;
    padding: var(--padding-1);
    padding-right: var(--navbar-height);
  }

  .snake-top-right::before {
    top: calc(-1 * var(--padding-1) + 1px);
    right: calc(var(--navbar-height) - 1px);
    left: unset;
    transform: rotate(180deg);
  }

  .snake-top-right::after {
    content: "";
    position: absolute;
    top: calc(-2 * var(--navbar-height) - var(--padding-2));
    right: 0;
    width: var(--navbar-height);
    height: calc(2 * var(--navbar-height) + var(--padding-2));
    background-color: var(--theme-red);
  }

  .sponsors {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: calc(2 * var(--navbar-height));
  }

  .sponsors-container {
    margin: 0;
    width: 90%;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
  }
}