.post.ThemePostSwitchable {
  --minusSizeXL: calc((var(--sizeXL) / 2) * (-1));
  width: 100%;
  max-width: var(--contentWidth);
  padding: calc(var(--sizeXL) * 1.6);
  background-color: var(--colorTextAlt);
  position: relative;
  scroll-snap-align: center;
  color: var(--colorText);
  box-sizing: border-box;
}
.post.ThemePostSwitchable:nth-child(even) {
  background-color: var(--colorNeutralLight);
  color: var(--colorNeutralAlt);
}
.post.ThemePostSwitchable[data-active] {
  background-image: linear-gradient(35deg, var(--colorPrimary), var(--colorPrimaryDark));
  color: var(--colorPrimaryAlt);
}
.post.ThemePostSwitchable > .postReference {
  position: absolute;
  top: var(--minusSizeXL);
  left: calc(50% + var(--minusSizeXL));
  width: var(--sizeXL);
  height: var(--sizeXL);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background-color: var(--colorPrimary);
  color: var(--colorPrimaryAlt) !important;
  cursor: pointer;
  box-shadow: 0 0 0 4px var(--colorTextAlt);
  font-size: 1.3rem;
  transform: rotate(45deg);
  text-decoration: none;
}
.post.ThemePostSwitchable > .postReference:before, .post.ThemePostSwitchable > .postReference > i {
  transform: rotate(-45deg);
}
.post.ThemePostSwitchable > .postTitle {
  text-align: center;
}
.post.ThemePostSwitchable > .postContent {
  width: 100%;
  min-height: var(--sizeXL);
}

@media (orientation: portrait) {
  .post.ThemePostSwitchable {
    padding: var(--sizeM);
  }
}