body {
    font-family: 'Poppins', Arial, sans-serif;
  }

.stack {
    width: 90%;
    height: 600px;
    position: relative; 
    max-width: 1280px; 
  }
  
.card {
    width: 100%;
    height: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 2rem;
    color: black;
    box-shadow: 0 5px 10px 0 #00000040, 0 15px 20px 0#00000020;
    transition: transform 150ms;
}

.main-section::after{
    content: ""; 
    height: 100%;
    width: 100%;
    top:0; 
    left:0; 
    position: absolute;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), linear-gradient(180deg, rgba(160, 122, 28, 0.5) 0%, rgba(247, 194, 68, 0.5) 100%);

}

.card .wrapper{
    padding:1rem; 
    display: flex;
    flex-direction: column;
    height: 100%;
    row-gap: 1rem;
}

.card .photo{
    object-fit: cover;
    border-radius: 0.375rem; 
    width: 100%;
    height: 100%;
    aspect-ratio: 2/1;
    box-shadow: 0 5px 5px 0 #00000040, 0 15px 20px 0 #00000020
}


nav span:not([insert]):hover{
    background-color: rgb(209 213 219);
}


nav span[insert]{
    background-color: #2F3439;
    color: white;
    font-weight:500; 
}

@media(min-width:600px){
    .stack{
        width: 70%;
    }    
}

@media(min-width:750px){
    .stack{
        height: 700px;
    }

    .card{
        height: 550px;
    }
}

@media (min-width:1150px) {
    .stack{
        height: 500px;
    }

    .card{
        height: auto;   
    }

    .card .wrapper{
        padding: 3rem; 
        column-gap: 4rem;
        flex-direction: row;
        text-align: start;
    }

    .card .photo{
        max-width: 400px;
    }

    .card .photo{
        height: 250px;
    }
}
  
.card:nth-last-child(n + 4) {
    --y: calc(-50% + -60px);
    transform: translate(-50%, var(--y)) scale(0.9);
    box-shadow: 0 0 1px 1px #00000003;
}

.card:nth-last-child(3) {
    --y: calc(-50% + -30px);
    transform: translate(-50%, var(--y)) scale(0.95);
}

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

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

.title-card{
    font-size: clamp(1.5rem, 2vw + 0.1rem, 2.5rem); 
}

.subtext-card{
    font-size: clamp(1rem, 1.2vw + 0.1rem, 1.25rem); 
}

.motivational-phrase{
    font-size: clamp(0.8rem, 0.6vw + 0.1rem, 0.9rem); 
    box-shadow: 0 5px 5px 0 #00000040, 0 15px 20px 0 #00000020
}

@keyframes swap {
    50% {
      transform: translate(-50%, calc(var(--y) -  250px)) scale(1) rotate(-5deg);
      animation-timing-function: ease-in;
    }
    100% {
      transform: translate(-50%, calc(-50% + 30px)) scale(1.05) rotate(0);
      z-index: 10
    }
  }