details {
    display: flex;
    margin-block: 96px 0px;
    padding: 16px 128px 0px 128px;
    overflow: hidden;
    min-width: 540px;
    opacity: 0;
    max-height: 0px;
    transition: all 0.25s ease-out;
}

details.hidden {
    opacity: 1;
    max-height: 260px;
}

summary:has(img) {
    display: grid;
    grid-template-columns: 148px auto 48px;
    grid-template-rows: auto 32px;
    grid-template-areas:
        "a b c"
        "d d d";
    background-color: hsl(0, 0%, 99%);
    border: 2px solid hsl(0, 0%, 96%);
    border-radius: 16px;
    overflow: hidden;
    max-width: 100%;
}

summary img {
    max-width: 128px;
    padding: 16px;
}

summary p {
    justify-self: start;
    padding: 16px 0px 0px 16px;
}

summary h4 {
    font-weight: 200;
    font-size: 0.75rem;
    color: hsl(0, 0%, 64%);
}

summary div {
    grid-area: d;
    background-color: hsl(0, 0%, 100%);
    width: 100%;
    background-clip: padding-box;
    justify-self: center;
    align-items: center;
}

main {
    display: grid;
    grid-template-columns: 2fr calc(256px + 2em);
    margin-block: 0px 32px;
    padding: 24px 128px 0px 128px;
    transition: padding 0.175s;
}

main:has(article) {
    display: grid;
    grid-template-columns: repeat(1, auto);
    justify-content: center;
}

article {
    margin-block: 8px;
    display: flex;
    padding: 1em;
    max-width: 96ch;
    min-width: 32ch;
    border-radius: 0.375em;
    overflow: hidden;
}

article h2 {
    padding-block: 0.25em 0.15em;
    text-decoration: none;
    text-decoration-color: hsl(0, 1%, 98%);
    transition: text-decoration-color 0.4s ease-in;
}

article a {
    width: 96ch;
    cursor: pointer;
    display: grid;
    grid-template-rows: 2fr 1fr;
}

article a:hover h2{
    text-decoration: underline;
    text-decoration-color: hsl(0, 1%, 42%);
}

article a:active h2{
    color: hsl(0, 1%, 12%);
    text-decoration: none;
}

video {
    width: 256px;
    height: 256px;
    padding: 1em;
    border-radius: 0.375em;
}

div:has(section) {
    display: flex;
    justify-content: center;
}

section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    min-width: 1024px;
    max-width: 1024px;
}

section img {
    max-height: 256px;
    min-height: 256px;
}

#summary_mobile { 
    display: none;
    grid-template-columns: auto 32px;
    padding: 0px 8px 0px 14px;
    position: absolute;
    width: 86vw;
    height: 44px;
    top: 76px; /* Changed bootom to top */
    left: 0; /* Added left property */
    right: 0; /* Added right property */
    margin-left: auto; /* Center align horizontally */
    margin-right: auto; /* Center align horizontally */
    background-color: hsl(0, 0%, 97%);
    border-radius: 22px;
    align-items: center;
}

#summary_mobile svg {
    width: 32px;
    height: 32px;
}

@media only screen and (max-width: 1000px) {

    details {
        padding: 16px 64px 0px 64px;
    }
    
    main {
        padding: 24px 64px 0px 64px;
    }
    
    aside {
        min-width: 256px;
    }

    section {
        min-width: 512px;
        max-width: 512px;
    }

@media (pointer:none), (pointer:coarse) {


    body {
        overflow-x: hidden;
        width: 100vw;
    }

    details {
        display: none;
    }

    section {
        max-width: 100vw;
        min-width: 100vw;
    }

    main {
        margin-block: 96px 32px;
        padding: 0px 24px 0px 24px;
        max-width: 100vw;
        display: block;
    }

    .aside-toggle {
        padding: 32px 0px 0px 0px;
    }

    video {
        margin-block-start: 32px;
        width: calc(100vw - 12vw);
        height: calc(100vw - 12vw);
        padding: 0;
    }

    section img {
        max-height: calc(100vw/2);
        min-height: calc(100vw/2);
    }

    .pictures-256 {
        object-fit: contain;
        padding: 0px 0px 0px 0px;
        width: calc(100vw/2);
        height: 100%;
    }

    .pictures-512 {
        object-fit: contain;
        width: calc(100vw);
        height: 100%;
    }

    article {
        max-width: calc(100vw);
        border-radius: 0.375em;
    }

    #summary_mobile {
        display: grid;
    }

}

}