.pre-container {
  position: relative;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr); /* Equal-sized grid cells */
  max-width: 45vw; /* Constrain container width */
  aspect-ratio: 9 / 10; /* play around with later */
  margin-top: 415px ; 
  margin-left: -320px; /*shift stack around with this */
  background-color: none; 
  /*backdrop-filter: grayscale(100%) blur(10px);*/
}

.grid-image {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  background: linear-gradient(to bottom, seagreen, black);
  border-radius: inherit;
  object-fit: none; /* Ensure image fits without distortion */
  transition: transform 300ms ease-in-out;
  transform-style: preserve-3d;
  transform: perspective(5000px) rotateY(var(--rotateX, 0deg))
    rotateX(var(--rotateY, 0deg));
  z-index: 5; /* Ensure image is below grid but above background */
}

.heading-main{
color: brown;
font-family: fantasy;
font-size: 49px;

}

.heading-main1{
color: white;
font-size: 35px;
line-height: 1.5;
}

.card-titleA {
margin-left: 96%;
margin-top: -75%;
font-family: "Monaco", monospace; /*use monospace font for letter alignment */
font-size: xx-large;
color: silver;
}

.card-titleB {
margin-left: 96%;
margin-top: -85%;
font-family: "Monaco", monospace; 
font-size: xx-large;
color: silver;
}

.card-titleC {
margin-left: 96%;
margin-top: 20%;
font-family: "Monaco", monospace; 
font-size: xx-large;
color: silver;
}


.pre-container > div {
  z-index: 10;
  position: absolute;
  outline: 0px solid lime;
  width: 100%; /* Match grid cell size */
  height: 100%; /* Match grid cell size */
}

/* Grid cell positioning */
.pre-container > div:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  top: 0;
  left: 0;
}

.pre-container > div:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  
}

.pre-container > div:nth-child(3) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  
}

.pre-container > div:nth-child(4) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
 
}

.pre-container > div:nth-child(5) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
 
}

.pre-container > div:nth-child(6) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  
}

.pre-container > div:nth-child(7) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  
}

.pre-container > div:nth-child(8) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.pre-container > div:nth-child(9) {
  grid-column: 3 / 4;
  grid-row: 3 / 4;

}

/* Hover effects for 3D rotation */
.pre-container > div:nth-child(1):hover ~ .grid-image {
  --rotateX: -25deg;
  --rotateY: 25deg;
}

.pre-container > div:nth-child(2):hover ~ .grid-image {
  --rotateX: 0deg;
  --rotateY: 25deg;
}

.pre-container > div:nth-child(3):hover ~ .grid-image {
  --rotateX: 25deg;
  --rotateY: 25deg;
}

.pre-container > div:nth-child(4) ~ .grid-image {
  --rotateX: -25deg;
  --rotateY: 0deg;
}

.pre-container > div:nth-child(5):hover ~ .grid-image {
  --rotateX: 0deg;
  --rotateY: 0deg;
}

.pre-container > div:nth-child(6):hover ~ .grid-image {
  --rotateX: 25deg;
  --rotateY: 0deg;
}

.pre-container > div:nth-child(7):hover ~ .grid-image {
  --rotateX: -25deg;
  --rotateY: -25deg;
}

.pre-container > div:nth-child(8):hover ~ .grid-image {
  --rotateX: 0deg;
  --rotateY: -25deg;
}

.pre-container > div:nth-child(9):hover ~ .grid-image {
  --rotateX: 25deg;
  --rotateY: -25deg;
}

/*----------------------------STACKED CARDS CODE--------------------------*/

.stack{
	position: relative;
}

.card{
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 80%; /* moves stack around */
	width: 700px;
	height: 900px;
	border-radius: 2rem;
	box-shadow:/* 0 5px 10px 0 rgba(0, 0, 0, 0.25), 0 15px 20px 0 rgba(0, 0, 0, 0.125)*/none;
	transition: transform 0.6s;
	user-select: none;
}

.card img{
	width: 100%;
	height: 100%;
	display: block;
	border-radius: inherit;
	object-fit: cover;
}

.card:nth-last-child(n+3){            /*card offsets*/
  --x: calc(-52% + 60px);
  transform: translate(var(--x),-50%) scale(0.85);
}

.card:nth-last-child(2){            
  --x: calc(-48%);
  transform: translate(var(--x),-50%) scale(0.85); 
}

.card:nth-last-child(1){            
  --x: calc(-50% - 30px);
  transform: translate(var(--x),-50%) scale(0.9); 
}



.swap{
	animation: swap 1.3s ease-in-out forwards;
}

@keyframes swap{
	30% {
		transform: translate(calc(var(--x)-250px),-50%)scale(0.85) rotate(-5deg) rotateY('65deg');
		animation-timing-function: ease-in;
	}
	100% {transform: translate(calc(var(--x)-30px),-50%)scale(0.5);
	z-index: -1;
	}
}

/*--------------------------media queries for keyframes----------------------------------- */

@media(max-width: 1200px){
  @keyframes swap{
	30% {
		transform: translate(calc(var(--x)-200px),-50%)scale(0.85) rotate(-5deg) rotateY('65deg');
		
	}
	100% {transform: translate(calc(var(--x)-30px),-50%)scale(0.5);
	z-index: -1;
	}
}
};

@media(max-width: 1050px){
  @keyframes swap{
	30% {
		transform: translate(calc(var(--x)-150px),-50%)scale(0.85) rotate(-5deg) rotateY('65deg');
		
	}
	100% {transform: translate(calc(var(--x)-30px),-50%)scale(0.5);
	z-index: -1;
	}
}
};

/*---------------------------- media queries for other classes------------------------ */ 

@media(max-width: 1200px){ 
  .content{
    padding-left: 80px;
  }
  
  .content p {
    padding-right: 40px;
  }

  .card{
    width: 250px;
    height: 380px;
  }
};

@media(max-width: 1050px){
  .content{
    padding-left: 60px;
  }
  
  .content p {
    line-height: 1.5;
  }

  .card{
    width: 220px;
    height: 350px;
  }
};

@media(max-width: 990px){
  .content p {
    padding-right: 0;
  }

  .card{
    width: 200px;
    height: 300px;
  }
};

@media(max-width: 950px){
  main{
    grid-template-columns: 1fr;
    grid-template-rows: 4fr 3fr;
    grid-template-areas: "stacked" "content";
  }

  .content{
    grid-area: content;
    text-align: center;
    padding: 0 90px;  
  }

  .stack{grid-area: stacked;}

};

@media(max-width: 650px){
  main{
    grid-template-rows: 1fr 1fr;
  }

  .content{
    padding: 0 50px;  
  }

  .content h1 {
    padding-left: 0;
  }

  .card {
    width: 180px;
    height: 260px;
  }
};