.top-3 p{
    font-style: italic;
    text-align: left;
    color: white;
    margin: 2em 3vw;
}
.image-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    gap: 0.5em;
    margin: 1.5em 3vw;
    height: 500px;
    overflow: hidden;
    }
    
    .image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }
    
    .img-1 {
    grid-column: 1;
    grid-row: 1 / 3;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }
    
    .img-2 {
    grid-column: 2;
    grid-row: 1;
    }
    
    .img-3 {
    grid-column: 2;
    grid-row: 2;
    }
    
    .exemple-biomim {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    }
    
    .exemple-biomim img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    }
    





    .overlay {
    position: absolute;
    inset: 0;
    background-color:rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    color: white;
    text-align: center;
    }
 
    .exemple-biomim:hover .overlay {
    opacity: 1;
    }

    .exemple-biomim.active .overlay {
        opacity: 1;
      }
      

    
    .text h5 {
    margin: 0 0 0.5em 0;
    font-size: 1.2em;
    color: black;
    }
    
    .text p {
    font-size: 0.85em;
    font-size: 1em;
    line-height: 1.2em;
    margin-bottom: 0;
    color: black;
}












  @media screen and (orientation: portrait) {


    .image-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5em;
        margin: 1.5em 3vw;
        height: 1000px;
    }


    .img-1,
    .img-2,
    .img-3 {
        grid-column: unset;
        grid-row: unset;
        height: 400px;
    }







  }