main{
    margin-top: 10px;
}
.events{
    height: 200vh;
}
.events h1{
    text-align: center;
    margin: 20px;
    text-align: center;
    background: #1c3b70;
    padding: 10px;
    color: #fff;
}
.latest-events{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
}
.latest-events a{
    text-decoration: none;
}
.event-info{
    height: 80vh;
    width: 22vw;
    box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2), 0px 6px 10px 0 rgba(0, 0, 0, 0.19);
    padding: 10px;
}
.event-info .event-img img{
    width: 22vw;
    height: 30vh;
}
.event-info h3{
    text-align: center;
    font-size: x-large;
    color: #333;
}
.event-info h3,p{
    text-align: center;
    text-decoration: none;
}
.event-info .p1{
    font-size: 13px;
    color: #666;
    opacity: 0.5;
    margin-top: 10px;
}
.event-info .p2{
    font-size: 16px;
    font-weight:500;
    color: #666;
}
.event-info .p3{
    font-size: 13px;
    font-weight:700;
     color: #666;
     margin-top: 50px;
}
.event-info:hover {
    .event-img {
        transition: 0.3s all ease;
        opacity: 0.6;
        translate: 0px -5px;
    }
}
@media (max-width:820px) {
     main{
        margin-top: 10px;
    }
    .events{
        height: max-content;
        margin-bottom: 20px;
    }
    .events h1{
        text-align: center;
        margin: 20px;
        text-align: center;
        background: #1c3b70;
        padding: 10px;
        color: #fff;
    }
    .latest-events {
       display: flex;
       flex-direction: column; 
       align-items: center;    
   }

   .event-info {
       width: 90vw;  
       height:auto; 
       margin-bottom: 20px; 
       padding: 10px;
   }

   .event-info .event-img img {
       width: 100%;
       height: auto;
   }

   .event-info h3 {
       font-size: large;
       margin: 8px 0px;
   }

   .event-info p {
       text-align: center;
       margin-bottom: 10px;
   }
    /*.latest-events{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 25px;
    }
    .latest-events a{
        text-decoration: none;
         justify-items: center;
        flex-basis: 100%;
        flex-grow: 1;
         
    }
    .event-info{
        height: 65vh;
        width: 40vw;
        border: 1px solid green;    
        
    }
    .event-info .event-img img{
        width: 40vw;
        height: 19vh;
        object-fit: 100%;
        margin: auto;
        margin-top: 0;
    }
    .event-info h3{
        text-align: center;
        font-size: x-large;
        color: #333;
        margin: 8px 0px 8px 0px;
    }
    .event-info h3,p{
        text-align:center;
        text-decoration: none;
        
    }
    .event-info .p1{
        font-size: 13px;
        color: #666;
        opacity: 0.5;
        margin-top: 10px;
    }
    .event-info .p2{
        font-size: 15px;
        font-weight:500;
        color: #666;
        
    }
    .event-info .p3{
        font-size: 12px;
        font-weight:700;
         color: #666;
         margin: 20px 1px 0px 1px;
    }
     */

}