.page-header--poems {
    background-image: url("../images/header-bgs/poems-2000.webp");
    background-size: cover;
    background-position: center center;
}

/* Tablet */
@media (max-width: 1200px) {
    .page-header--poems {
        background-image: url("../images/header-bgs/poems-1000.webp");
    }
}

/* Mobile */
@media (max-width: 600px) {
    .page-header--poems {
        background-image: url("../images/header-bgs/poems-500.webp");
    }
}

#Poems th,
#Poems td {
    vertical-align: middle;
}

@media screen and (min-width: 901px) {
    .table-responsive {
        width: min(1320px, calc(100vw - 6.4rem));
        margin-left: 50%;
        transform: translateX(-50%);
    }

    #Poems {
        table-layout: fixed;
    }

    #Poems th:nth-child(1),
    #Poems td:nth-child(1) {
        width: 34%;
    }

    #Poems th:nth-child(2),
    #Poems td:nth-child(2) {
        width: 22%;
    }

    #Poems th:nth-child(3),
    #Poems td:nth-child(3) {
        width: 14%;
    }

    #Poems th:nth-child(4),
    #Poems td:nth-child(4) {
        width: 15%;
    }

    #Poems th:nth-child(5),
    #Poems td:nth-child(5) {
        width: 15%;
    }
}

@media screen and (max-width: 600px) {
    #Poems td {
        display: grid;
        grid-template-columns: 9rem minmax(0, 1fr);
        column-gap: 1.6rem;
        align-items: start;
        justify-content: initial;
        padding-left: 1.6rem;
        padding-right: 1.6rem;
        text-align: left;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    #Poems td::before {
        position: static;
        padding-right: 0;
        white-space: normal;
    }

    #Poems td:nth-of-type(1)::before{content:"Title";}
    #Poems td:nth-of-type(2)::before{content:"Category";}
    #Poems td:nth-of-type(3)::before{content:"Date";}
    #Poems td:nth-of-type(4)::before{content:"Author";}
    #Poems td:nth-of-type(5)::before{content:"Poem";}
}