@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

figcaption{
    text-align: center; 
    font-style: italic;
    font-size: 12px; 
    margin-bottom: 2vw; 
}
img{
    width: 100%; 
    height: auto; 
    transition: 0.3s;
}
.container{
    position: relative; 
    overflow: hidden;
    }
    .container img {
    transition: transform 1s, filter 1.5s ease-in-out;
    transform-origin: center center;
    filter: brightness(75%);
    }

    /* The Transformation */
    .container:hover img {
    filter: brightness(100%);
    transform: scale(1.2);
    }

.container h4{
    position: absolute; 
    bottom: 5%;
    right: 5%;
    color: #faf9f1;
    font-family: 'Playfair Display', serif;
    font-size: 3vw; 
    font-weight: 300; 
    width: inherit;    
    text-shadow: #0C0D1D 0px 0px 10px; 
    display: flex; 
}
.news-links {
    display: flex; 
    margin: 0 auto; 
    justify-content: center;
}
.news-links li {
    display: flex; 
    margin: 0 2vw; 
    color: rgb(104, 104, 104);
    font-size: 2vw; 
    letter-spacing: 2px; 
}
.news-links a , .news-links li{
    font-size: 2vw; 
    font-weight: 400; 
    letter-spacing: 2px; 
}
.news-links a{
    color: rgba(104, 104, 104, .5);
}
#year{
    font-weight: 500; 
}
#line {
    color: rgba(104, 104, 104,.5);
}
.news-links a:hover{
    color: rgb(54, 119, 116); 
    font-weight: 500; 
}
.section-one {
    display: grid; 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 3vw;
    row-gap: 3vw;
    margin: 3vw; 
}
h2 {
    text-align: center; 
    font-family: 'Playfair display', serif; 
    font-size: 23px;
    font-weight: 550;  
    letter-spacing: 1px;
    color:rgb(104, 104, 104); 
    padding: 1vw; 
    transition: 0.3s;
}
p{
    text-align: center; 
    color: #12142D; 
    font-size: 12px; 
    letter-spacing: 2px; 
    font-weight: 150; 

}
h2:hover{
    font-weight: 500; 
    color: rgb(54,116,119); 
}
.section-one img:hover {
    box-shadow: 0px 0px 20px #737373;
    border-radius: 10px;
}

@media only screen and (max-width: 760px){
    .section-one{
        grid-template-columns: 1fr;
    }
    h2{
        font-size: 16px; 
    }
    .news-links a, .news-links li {
        font-size: 20px; 
    }
    .container h4{
        display: none; 
    }
}