.miniaturePage{
    padding-left: 75px;
    min-width: 450px;
}

.miniaturePage a{
    display: block;
}

.miniaturePage .imgContainer{
    position: relative;
}

.miniaturePage .imgContainer,
.miniaturePage .imgContainer img{
    aspect-ratio: 1;
    width: 100%;
    display: block;
    transition: 300ms ease;
} 

.miniaturePage .imgContainer::before{
    content: 'DÉCOUVRIR';
    display: block;
    width: fit-content;
    height: auto;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 17px;
    line-height: 23px;
    font-weight: bold;
    z-index: 1;
    opacity: 0;
    transition: 300ms ease;
}

.miniaturePage .imgContainer::after{
    content: '';
    display: block;
    width: 150px;
    height: 170px;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: 300ms ease;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='149' height='171' viewBox='0 0 149 171'%3E%3Cpath id='Polygone_5' data-name='Polygone 5' d='M85.5,0,171,149H0Z' transform='translate(149) rotate(90)' fill='%238EB2A7'/%3E%3C/svg%3E%0A");
}

.miniaturePage figcaption{
    margin-top: 16px;
}

.miniaturePage figcaption .titre{
    font-size: 32px;
    line-height: 37px;
    font-weight: 500;
    text-transform: uppercase;
    transition: 300ms ease;
}

@media (max-width: 1600px) {
    .miniaturePage{
        min-width: 300px;
    }
    .miniaturePage figcaption .titre{
        font-size: 28px;
        line-height: 31px;
    }
}

@media (max-width: 1600px) {
    .miniaturePage{
        min-width: 400px;
    }
}

@media (min-width: 993px) {
    .miniaturePage:hover .imgContainer img{
        filter: brightness(0.3);
        transition: 300ms ease;
    }
    .miniaturePage:hover .imgContainer::before{
        opacity: 1;
        transition: 300ms ease;
    }
    .miniaturePage:hover .imgContainer::after{
        transform: translate(-1%, -50%);
        transition: 300ms ease;
    }
    .miniaturePage:hover figcaption .titre{
        color: var(--primary);
        transition: 300ms ease;
    }
}

@media (max-width: 992px) {
    .miniaturePage{
        padding-left: 0px;
    }
    .miniaturePage .imgContainer::before{
        opacity: 1;
    }
    .miniaturePage .imgContainer::before{
        font-size: 16px;
        line-height: 22px;
        left: 6px;
    }
    .miniaturePage .imgContainer::after{
        transform: translate(0%, -50%);
        height: 150px;
        width: 130px;
    }
}

@media (max-width: 600px) {
    .miniaturePage{
        min-width: calc(100vw - 100px);
    }
}