body {
  background-color: var(--background-50);
}

.jumbotron-container {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  padding: 0 180px;
  width: calc(100vw - 360px);
}
.jumbotron-container::before {
  content: '';
  background-image: url('https://cdn.tabbycluster.net/image/f0bc4bab-9c06-442f-a88d-f9101810a64b.png');
  height: var(--window-innerheight);
  width: 100vw;
  position: absolute;
  top: 0;
  left: -200px;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}
.jumbotron-container::after {
  content: '';
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(var(--window-innerheight));
  background: linear-gradient(
  to bottom, 
  var(--background-50) 0px, 
  var(--background-50) 50px, 
  transparent 150px),
  linear-gradient(
  to top, 
  var(--background-50) 0px, 
  var(--background-50) 50px, 
  transparent 150px);
  z-index: 10;
}

@keyframes textSlideTrans{
  0% {
    transform: translateX(-50%) perspective(800px) translateZ(-100px) rotateY(-15deg); 
    opacity: 0; 
    filter: blur(5px);                
  }
  100% {
    transform: translateX(0) perspective(800px) translateZ(0.1px) rotateY(-15deg); 
    opacity: 1;    
    filter: unset;   
  }
}

.jumbotron-content {
  z-index: 0;
  display: flex;
  flex-direction: column;
  transform: perspective(800px) translateZ(0.1px) rotateY(-15deg); 
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  transform-style: preserve-3d;
  animation: textSlideTrans 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.jumbotron-content p, h1 {
  margin: 0;
}

.jumbotron-content p {
  width: 600px;
  will-change: transform;
  color: var(--text-700);
}

.page {
  align-items: center;
  background-color: var(--background-50);
}

.image-container {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100vh; /* Or your custom variable */
  overflow: hidden;
}

.image-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* This is your overlay */
.image-container::after {
  content: ""; /* Must be an empty string, not 0 */
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allows clicks to pass through to the image if needed */

  background: 
    linear-gradient(to bottom, var(--background-50) 0px, var(--background-50) 100px,transparent 150px),
    linear-gradient(to top, var(--background-50) 0px, var(--background-50) 130px, transparent 180px),
    linear-gradient(to right, var(--background-50) 0px, transparent 150px),
    linear-gradient(to left, var(--background-50) 0px, transparent 150px); /* Fades the left edge */
    
  z-index: 10;
}