:root{
    --event-title:2em;
    --event-desc:1em;
    --event-season:0.8em;
}

main{
    background-image: linear-gradient(rgba(52, 51, 51, 0.7), rgba(48, 47, 47, 0.7)),url("../images/events/portal-spring23.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: left top;

    height:50vh ;
    width: 100%;
    padding-top: 9vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;

}


main div{
    position: relative;
    z-index: 10;
height: 25vh;
width: 40vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
row-gap: 2vh;
/* backdrop-filter: blur(10px); */

color: white;
text-shadow:  0px 0px 2px var(--light-tur-1), 0 0 5px var(--light-tur-3);
}
main div h1{
    font-size: 2em;
    text-transform: uppercase;
}
main div h3{
    font-size: 1.1em;
    text-transform: capitalize;
}
section,.events,.event{
    display: flex;
    justify-content: center;
    align-items: center;
}

section{
    width: 100%;
    height: 100%;
    padding-top: 9vh;

}
.events{
    width: 98%;
    height: 100%;
    row-gap: 5vh;
    flex-direction: column;
padding-bottom: 9vh;
}
.events .p-label{
    text-align: center;
}
.events .p-label span::before{
    bottom: 0.5vh;
    width: 60%;
}
.event{
width: 80%;
height: 50%;
position: relative;
flex-wrap: wrap;
padding: 2vh;
column-gap:2vw ;
border: none;
border-radius: 15px;
background-color: var(--light-tur-3);
transition: all 0.3s ease-in-out;
}
.event:hover{
    box-shadow: 0 8px 10px black;
    scale: 1.02;
}


.event>*{
    padding: 1vh;
    height: 100%;
    flex-basis: 400px;
}

.event-img{
    width: 40%;
    height: 100%;
    overflow: hidden;
}
.event-img img{
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease-in-out;
}
.event-img img:hover{
    scale: 1.02; 
}
.event-info{
    display: flex;
    flex-direction: column;
 row-gap: 2vh;
}

.event-title{
font-size: var(--event-title);
}
.event-desc{
    font-size: var(--event-desc);
}

.event:nth-child(even) .event-info {
  order: 1;
    text-align: right; 
}

.event:nth-child(even) .event-img {
    order: 2;
  }

@media screen and (max-width:485px){
    .event{
        width: 93%;
    }
}
 @media screen and (max-width:1080px){
    
  
.event:nth-child(even) .event-info {
    order: 2;
    text-align: left;
  }
  
  .event:nth-child(even) .event-img {
      order: 1;
    }
 }