/* General */
#main { overflow: hidden; }

/* Images */
.dropped-image span { border-radius: 45px; }

/* List of initiatives */
#list-of-initiatives { display: flex; flex-wrap: wrap; gap: 42px; width: 1185px; max-width: 100%; margin: 50px auto; }
#list-of-initiatives a { position: relative; width: calc( ( 100% - 84px ) / 3 ); overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 15px #00000029; }
#list-of-initiatives figure { display: block; margin: 0; height: 200px; background: #f3f3f3; position: relative; }
#list-of-initiatives figure:before { content: ' '; display: block; position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 1; background: linear-gradient( 90deg, #ff7c06, #ff2d71 ); opacity: .78; transition: all .4s; }
#list-of-initiatives figure img { width: 100%; height: 100%; object-position: center; object-fit: cover; }
#list-of-initiatives a:hover figure:before { height: 100%; }
#list-of-initiatives figure:after { color: #fff; font-weight: 500; content: 'DISCOVER >'; display: block; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); z-index: 2; opacity: 0; transition: all .4s; letter-spacing: -.8px; font-size: 15pt; }
#list-of-initiatives a:hover figure:after { opacity: 1; }
#list-of-initiatives hr { border: 0; margin: 0; height: 5px; background: linear-gradient( 90deg, #ffc401, #ff4515 ); width: 100%; }
#list-of-initiatives div { padding: 20px 20px 53px; color: #343434; font-size: 12pt; }
#list-of-initiatives h3 { margin: 0 0 8px; color: #000; font-size: 14pt; line-height: 1.4; letter-spacing: -.5px; font-weight: 700; }
#list-of-initiatives p { margin: 0; }
#list-of-initiatives time { position: absolute; bottom: 0; right: 0; background: #e9e9e9; padding: 6px 10px 5px 14px; border-top-left-radius: 22px; color: #828282; font-size: 9pt; }

@media (max-width: 1150px) {
    .dropped-image > div.vce { margin-left: 0 !important; }
}

@media (max-width: 800px) {
    #list-of-initiatives a { width: calc( ( 100% - 42px ) / 2 ); }
}

@media (max-width: 768px) {
    #image-container > .vce-row { width: 500px; max-width: 100%; margin: auto !important; padding-top: 30px !important; }
}

@media (max-width: 550px) {
    #list-of-initiatives { gap: 20px; }
    #list-of-initiatives a { width: calc( ( 100% - 20px ) / 2 ); }
}

@media (max-width: 480px) {
    #list-of-initiatives a { width: 100%; }
}