@import url('../css/variables.css');

.single-post {
    max-width: 100%;
}

.single-header {
    margin-bottom: 32px;
}

.single-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-title);

    margin-bottom: 16px;
}

.single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    font-size: 14px;
    color: var(--color-paragraphe);
}

.single-date,
.single-time {
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-date img,
.single-time img {
    width: 16px;
    height: 16px;
}

.single-thumbnail {
    margin-bottom: 40px;
}

.single-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
}

.single-content {
    font-family: var(--font-texte);
    color: var(--color-paragraphe);
    line-height: 1.8;
    font-size: var(--font-size-paragraphe);
}

.single-content h2,
.single-content h3,
.single-content h4 {
    font-family: var(--font-heading);
    color: var(--color-title);
    font-size: var(--font-size-content-sub-title);    line-height: 1.2;
}

.single-content img {
    width: 100%;
    max-width: 100%;
    height: 500px;
    object-fit: cover;

    display: block;

    border-radius: 16px;
    margin: 24px 0;
}

/* Mobile */

@media (max-width: 767px) {

    .single-title {
        font-size: var(--font-size-title) !important;
    }

    .single-meta {
        gap: 16px;
    }

    .single-content {
        font-size: var(--font-size-paragraphe);
    }

}
/* Tablette */

@media (min-width: 768px) {

    .single-thumbnail img,
    .single-content img {
        height: 400px;
    }

}

/* Desktop */

@media (min-width: 1200px) {

    .single-title {
        font-size: var(--font-size-title) !important;
    }
    .single-thumbnail img,
    .single-content img {
        height: 500px;
    }

}