.writing-grid {
    display: grid;
    max-width: 100%;
    grid-template-areas:
        "asc-2025"
        "dla"
        "appm-4610-final-project"
        "mcm-2025"
        "appm-4600-final-project"
        "asen-3036-semester-project"
        "appm-3310-final-project"
        "icm-2023";
    grid-auto-columns: 1fr;
}

@media (min-width: 1024px) {
    .writing-grid {
        max-width: 100%;
        padding: 0;
        grid-template-areas:
            "asc-2025-content asc-2025"
            "dla dla-content"
            "appm-4610-final-project-content appm-4610-final-project"
            "mcm-2025 mcm-2025-content"
            "appm-4600-final-project-content appm-4600-final-project"
            "asen-3036-semester-project asen-3036-semester-project-content"
            "appm-3310-final-project-content appm-3310-final-project"
            "icm-2023 icm-2023-content";
        grid-auto-columns: 1fr;
        grid-gap: 0;
    }
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    max-width: 100%;
    max-height: 100%;
    padding: 1rem;
    text-align: center;
    transition-duration: 0.25s;
}

@media (min-width: 1024px) {
    .container {
        padding: 3rem;
    }
}

.light {
    background-color: var(--primary-light);
}

.dark {
    background-color: var(--primary-background);
}

@media (min-width: 1024px) {
    .right {
        text-align: left;
    }
}

@media (min-width: 1024px) {
    .text {
        background-color: var(--primary-background);
    }
}

@media (min-width: 1024px) {
    .left {
        text-align: right;
    }
}

button {
    background-color: #00000000;
    border: 0;
}

@media (min-width: 1024px) {
    .expand-button {
        display: none;
    }
}

.hidden {
    display: none;
}

@media (min-width: 1024px) {
    .hidden {
        display: block;
    }

    li.hidden {
        display: list-item;
    }
}

.writing-content {
    display: none;
}

@media (min-width: 1024px) {
    .writing-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-items: center;
        align-items: center;
        max-width: 100%;
        max-height: 100%;
        transition-duration: 0.25s;
        border: 0;
        border-radius: 0;
        background-color: var(--primary-light);
    }
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

img {
    width: 100%;
    margin: auto;
}

#asc-2025 {
    grid-area: asc-2025;
}

#asc-2025-content {
    grid-area: asc-2025-content;
}

#dla {
    grid-area: dla;
}

#dla-content {
    grid-area: dla-content;
}

#appm-4610-final-project {
    grid-area: appm-4610-final-project;
}

#appm-4600-final-project-content {
    grid-area: appm-4600-final-project-content;
}

#mcm-2025 {
    grid-area: mcm-2025;
}

#mcm-2025-content {
    grid-area: mcm-2025-content;
}

#appm-4600-final-project {
    grid-area: appm-4600-final-project;
}

#appm-4600-final-project-content {
    grid-area: appm-4600-final-project-content;
}

#asen-3036-semester-project {
    grid-area: asen-3036-semester-project;
}

#asen-3036-semester-project-content {
    grid-area: asen-3036-semester-project-content;
    max-width: 100%;
}

#appm-3310-final-project {
    grid-area: appm-3310-final-project;
}

#appm-3310-final-project-content {
    grid-area: appm-3310-final-project-content;
    max-width: 100%;
}

#icm-2023 {
    grid-area: icm-2023;
}

#icm-2023-content {
    grid-area: icm-2023-content;
    max-width: 100%;
}