@import url("base.css");

body {
    & > article {
        & .code {
            font-size:0.875em;
            padding:1em;
            border-radius:0.25em;
            background-color:hsl(226, 26%, 4%);
            color:#3e3;
            overflow:hidden;
        }

        &.cover > :first-child {
            display:grid;
            grid-template-columns:1fr;
            grid-template-rows:repeat(3, max-content);

            & > * {
                grid-column:1/-1;
            }

            & > img {
                width:100%;
                aspect-ratio:16/9;
                object-fit:cover;
                object-position:center center;
            }
        }
    }
}

@media all and (min-width: 736px) {
    body > article.cover > :first-child {
        grid-template-rows:repeat(4, max-content);

        & > img {
            grid-row:1/4;
        }

        & > h1 {
            margin:0;
            padding:0.625em 0.25rem;
            grid-row:2/3;
            background:linear-gradient(to bottom, transparent 0, hsla(226, 26%, 8%, 0.8) 10px);
        }

        & > summary {
            padding:0.625em 0;
            grid-row:3/5;
            background:linear-gradient(to bottom, hsla(226, 26%, 8%, 0.8), var(--color-bg-body) 40%);
        }
    }
}
