* {
    box-sizing: border-box;
    font: 300 1.125rem/1.5 system-ui;
}

body {
    padding: 2rem;
}

caption {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

table {
    border-collapse: collapse;
    border-radius: 1rem;
    overflow: hidden;
    width: min(48rem, 100%);
    filter: drop-shadow(0 5px 15px #c1c1c1);
    margin-inline: auto;
}

thead {
    background: royalblue;
    color: white;
    border-radius: 1rem;

    th {
        font-weight: bold;
        padding-block: 0.5rem;
    }

    @media (width <=32rem) {
        display: none;
    }
}

tr {
    position: relative;
    filter: drop-shadow(4px 4px 6px silver);
    z-index: var(--zi);

    &:not(:first-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: -2rem;
        width: 2rem;
        height: 2rem;
        background-color: var(--row-background);
        transition: background 200ms;
    }

    @media (width <=32rem) {
        display: flex;
        flex-direction: column;
    }
}

tr:nth-child(4n + 1) {
    --row-background: honeydew;
}

tr:nth-child(4n + 2) {
    --row-background: lavenderblush;
}

tr:nth-child(4n + 3) {
    --row-background: aliceblue;
}

tr:nth-child(4n) {
    --row-background: lightcyan;
}

tr:hover {
    --row-background: papayawhip;
}

td {
    padding: 2rem 0.5rem;
    background-color: var(--row-background);
    transition: background 200ms;

    &:last-child {
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 2rem),
                calc(100% - 2rem) 100%,
                0 101%);

        &::after {
            position: absolute;
            bottom: 0;
            right: 0;
            content: "";
            border: 1rem solid color-mix(in srgb, var(--row-background, #c0c0c0), black 10%);
        }
    }

    @media (width < 32rem) {
        padding: 0.25rem 0.5rem;

        &::before {
            content: attr(data-title) ": ";
            font-weight: bold;
        }
    }
}