@import "/projects/home-styling/profile-banner.css";
@import "/projects/home-styling/project-cards.css";
@import "/projects/home-styling/the-underground.css";

.tetris-trademark {
  font-size: 0.8em;
  vertical-align: super;
}

/* Info sidebar */
.mediacarousel-info-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  text-align: center;
}

@media (min-width: 901px) {
  .mediacarousel-info-shell {
    contain: size;
  }
}

.mediacarousel-info {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;

  padding: 32px 10px 16px;
  box-sizing: border-box;
  overflow: hidden;

  /* background: var(--supporting-background-color); */
  border-radius: var(--border-radius);
}

.mediacarousel-info-content,
.mediacarousel-info-content * {
  transition: color 0.5s ease;
}

.mediacarousel-info-content.is-color-flashing,
.mediacarousel-info-content.is-color-flashing * {
  color: var(--standout-color-gold) !important;
  transition: none !important;
}

.mediacarousel-info-heading {
  position: absolute;
  width: 100%;
  transform: translate(0%, -50%);
  z-index: 1;

  margin: 0;
  box-sizing: border-box;

  text-align: center;
  white-space: nowrap;
}

.mediacarousel-info-content {
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  text-align: center;
  scrollbar-gutter: stable both-edges;
  padding-bottom: 20px;
}

.mediacarousel-info-item {
  display: none;
}
.mediacarousel-info-item.is-active {
  display: block;
}

.mediacarousel-info-item p {
  margin: 0;
  color: var(--text-color-muted2);
}

.mediacarousel-info-footer {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(50%);

  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 900px) {
  .mediacarousel-info {
    position: relative;
    inset: auto;
    display: block;
    overflow: visible;
    padding: 48px 20px;
  }

  .mediacarousel-info-content {
    overflow: visible;
  }

  /* .mediacarousel.tetris .mediacarousel-info-heading {
  font-size: clamp(1rem, 3vw, 2.5rem);
  overflow-wrap: break-word;
} */
}

@media (prefers-reduced-motion: reduce) {
  .mediacarousel-info-content,
  .mediacarousel-info-content * {
    transition-duration: 0s;
  }
}