/* ### SINGLE ### */
.single {
    padding-block: 2rem;
}

.single .content {
    max-height: 30rem;
    padding: 1rem;
    border-radius: var(--br-sm, 2px);
    box-shadow: var(--shdw-primary);
}

.single .content > * {
    margin-bottom: 1rem;
}

.single .content > h2:first-of-type {
    color: var(--c-primary);
}

.single .content h2 {
    font-size: var(--_fs-md-add, 1.25rem);
    line-height: var(--lh-lg);
}

.single .content h3 {
    font-size: var(--fs-md, 1.125rem);
    line-height: var(--lh-lg);
}

.single .content h4 {
    font-size: var(--fs-sm, 1rem);
    line-height: var(--lh-md);
}

.single .content h5 {
    font-size: var(--fs-base, 0.875rem);
    line-height: var(--lh-md);
}

.single .content h6 {
    font-size: var(--fs-xs, 0.75rem);
}

.single .content p {
    line-height: var(--lh-md);
}

.single .content :where(ul, ol) {
    padding-left: 1rem;
}

.single .content ul li {
    list-style: disc;
}

.single .content ol li {
    list-style: decimal;
}

.single .content li {
    line-height: var(--lh-md);
    color: var(--c-text);
    margin-bottom: 0.75rem;
}

.single .content li a:hover {
    color: var(--c-primary);
}

.single .content > :last-child {
    margin-bottom: 0;
}


/* ~~~~~ MEDIA QUERIES ~~~~~ */
/* ===== MOBILE (Potrait) : 480px ===== */
@media screen and (min-width: 30rem) {
    .single {
        padding-block: 2.5rem;
    }

    .single .content {
        max-height: 31rem;
        padding: 1.25rem;
    }
}

/* ===== MOBILE (Lanscape) : 608px ===== */
@media screen and (min-width: 38rem) {
    .single .content {
        max-height: 31.25rem;
        padding: 1.5rem 1.75rem;
        border-radius: var(--br-base, 5px);
    }
}

/* ===== TABLET (Potrait) : 768px ===== */
@media screen and (min-width: 48rem) {
    .single {
        padding-block: 2.75rem;
    }
    
    .single .content {
        padding: 1.875rem 2.25rem;
    }

    .single .content p {
        line-height: var(--lh-base);
    }
}

/* ===== LAPTOP : 992px ===== */
@media screen and (min-width: 62rem) {
    .single {
        padding-block: 3rem;
    }
    
    .single .content {
        max-height: 32.75rem;
        padding: 2.25rem 2.5rem;
    }

    .single .content > * {
        margin-bottom: 1.25rem;
    }
}

/* ===== DESKTOP : 1200px ===== */
@media screen and (min-width: 75rem) {
    .single {
        padding-block: 3.75rem;
    }
    
    .single .content {
        padding: 2.375rem 3rem;
    }
}