/* Layout and responsiveness */
div#series-dynamic-content {
    margin: 0 5em;
    text-align: center;
}

@media only screen and (max-width: 768px) {
    div#series-dynamic-content {
        margin: 0em;
        text-align: center;
    }
    #series-dynamic-content .series-gallery {
        display: block;
    }

    #series-dynamic-content .series-images {
        display: block;
    }

}

/* Gallery layout */
.series-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 for images, 1/3 for content */
    gap: 2rem;
    margin-top: 20px;
    align-items: flex-start;
}

.series-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "img1 img2"
        "img3 img3";
    gap: 2rem;
}

.series-image-item {
    text-align: center;
}

.series-image-item.image-1 {
    grid-area: img1;
}

.series-image-item.image-2 {
    grid-area: img2;
}

.series-image-item.image-3 {
    grid-area: img3;
}

.series-content {
    grid-column: 2;
}

/* Image styling */
.series-image-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* Caption */
.series-gallery h3 {
    margin-top: 2em;
    text-align: center;
    font-size: 1.2em;
    color: #004D88;
}

/* Table styling */
.series-gallery table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-family: inherit;
    font-size: 1rem;
    background-color: #fff;
}

.series-gallery th,
.series-gallery td {
    border: 1px solid #ddd;
    padding: 0px 10px;
    text-align: center;
}

.series-gallery tr:nth-child(even) {
    background-color: #f9f9f9;
}

.series-gallery tr:hover {
    background-color: #f1f1f1;
}

.series-gallery th {
    background-color: #0073aa;
    color: white;
    font-weight: bold;
}

tr:first-child td {
    font-weight: bold;
    padding: 5px 0px;
}