details {
    border: 2px solid var(--grey);
    border-radius: 0.5rem;
    padding: 0.5em 0.5em 0;
    margin: 0.5em 0;
    color: var(--grey);
}

summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
    cursor: pointer;
}

summary span.summary-time {
    font-weight: normal;
    font-style: italic;
}

summary span.summary-time::before {
    content: '// '
}

.content-subpage {
    max-width: 1300px;
}

.section {
    padding: 0 2rem 2rem 2rem;
    margin: 2rem 0;
    border: 2px solid var(--purple);
    border-radius: 0.5rem;
}

.details-content {
    padding: 2rem;
}

.details-content > h4 {
    margin: 0;
}

.details-content-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.details-content-media {
    display: flex;
    justify-content: center;

    /* START - adapted from generated box via https://css-shape.com/wiggly-box/ */
    --s: 10px;  /* control the size of the wave */
    --w: 600px; /* preferred image width */

    width: round(var(--w),4*var(--s));
    /* Deliberately don't set aspect ratio for some weirdness */
    /* aspect-ratio: 1; */
    border: calc(2*var(--s)) solid #0000;
    padding: calc(5*var(--s)/2);
    box-sizing: border-box;
    background: var(--blue);
    mask: 
        conic-gradient(#000 0 0) no-repeat
            50%/calc(100% - 6*var(--s)) calc(100% - 6*var(--s)),
        radial-gradient(var(--s),#000 100%,#0000 calc(100% + 1px)) 
            0 0/calc(4*var(--s)) calc(4*var(--s)),
        radial-gradient(var(--s),#0000 calc(100% - 1px),#000) 
            var(--s) var(--s)/calc(2*var(--s)) calc(2*var(--s)) padding-box;
    /* END - adapted from generated box via https://css-shape.com/wiggly-box/ */
}

.details-content-media img {
    height: auto;
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

@media screen and (max-width: 1024px) {
    .content-subpage {
        padding: 20px;
    }

    .section {
        padding: 0 1rem 1rem 1rem;
    }

    .details-content {
        padding: 1rem;
    }

    .details-content-body {
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
    }

    .details-content-media {
        width: 100%;
        border: none;
        background: none;
        mask: unset;
        padding: 0;
    }
}