/* c-showreel.css — copied from components/Showreel/Showreel.css
   The template shipped plain global CSS, so the class names here are already
   the ones the markup uses. */

.showreel {
  position: relative;
  width: 100%;
  height: 100svh;
  background-color: var(--base-100);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.showreel .showreel-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform: scale(0.75);
  border-radius: 2rem;
  overflow: hidden;
}

.showreel .showreel-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showreel .volume-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6.5rem;
  height: 6.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--base-100);
  border-radius: 100%;
  cursor: pointer;
}