@import 'css/main.css';

/* ----------------------------------------- */
/* Overlays images Work */
/* ----------------------------------------- */

.containerImg {
    position: relative;
    height: 100%;
}

.overlayImg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .4s ease;
    background-color: var(--black);
}

.containerImg:hover .overlayImg {
    opacity: 0.9;
}

.textOverlay {
    color: var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.textOverlay p {
    margin: 0;
    padding: 0;
}

.textOverlay .subtitle {
    font-size: 1rem;
    font-weight: 600;
}

.textOverlay .date {
    font-size: 1rem;
    font-weight: 300;
}
/* ----------------------------------- */
/* M E D I A   Q U E R I E S */
/* ----------------------------------- */

/* Pas de survol en tablette et mobile, donc on cache les overlays
mais on les laisses car dessus il y a les liens */

@media (max-width: 768px) {

    .textOverlay {
        display: none;
    }

    .overlayImg {
        opacity: 0;
    }

    .containerImg:hover .overlayImg {
        opacity: 0;
    }
}