/* QUESTIONS */

.article-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;

    max-width: 800px;

    margin-inline: auto;
    padding-bottom: 2rem;
}

.article-container > input {
    display: none;
}

.article-card {
    padding: 2rem;
    border: 1px solid var(--clr-dark);
    border-radius: 1.5rem;

    height: 80px;

    cursor: pointer;
    overflow: hidden;

    transition: .6s cubic-bezier(.28, -0.03. 0, .99);
}

.article-card > .description > .question-text {
    overflow: hidden;
    opacity: 0;

    transform: translateY(1rem);
    transition-delay: .3s;
    transition: all .3s ease;
}

.article-card > .description > img {
    border-radius: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    width: 100%;
}

.question-title {
    padding-bottom: 1rem;
    text-align: center;
    font-weight: 700;

    transition: all .5s ease;
}

.question-text > p {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25rem;
}

.question-text > blockquote {
    background: var(--clr-light-bg);
    border-radius: 1.5rem;
    padding: 2rem;
}

.question-text > blockquote > p {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 800;
    font-size: 1.5rem;
    text-align: left !important;
}

input:checked + .article-card {
    height: fit-content;
}

input:checked + .article-card .description > .question-text {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

input:checked + .article-card .description > .question-title {
    color: var(--clr-accent);
}