* {
    transition-duration: 0.5s;
    font-family: sans-serif;
}


/* basic CSS with a little extra for the figure element */

body {
    margin: auto;
    padding: 3%;
    width: 90%;
}

figure {
    border: thin solid darkslategray;
    border-radius: 3%;
    padding: 3%;
    text-align: center;
}

figcaption {
    color: #839e99;
    font-style: italic;
    text-align: center;
}

img {
    border-radius: 3%;
    max-width: 100%
}

.right {
    float: right;
    margin-left: 3%;
}

.small {
    width: 20%;
}

.header {
    grid-area: header;
    grid-column: 1 / 3;
    padding: .3em;
    margin: .3em;
}

.public-files {
    grid-area: public-files;
    padding: .3em;
    margin: .3em;
    border: 1px solid grey;
    border-radius: 5px;
}

.supporting-files {
    grid-area: supporting-files;
    padding: .3em;
    margin: .3em;
    border: 1px solid grey;
    border-radius: 5px;
}

.grader-notes {
    grid-area: grader-notes;
    padding: .3em;
    margin: .3em;
    border: 1px solid grey;
    border-radius: 5px;
}

.grid-layout {
    border-top: thin dashed navy;
    display: inline-grid;
    grid-template-columns: 25% 25% 50%;
    grid-template-areas: "header header header" "public-files supporting-files grader-notes";
    padding: .3em;
    margin: .3em;
    width: 100%;
    border-bottom: 1px dashed grey;
}

.grid-layout:hover {
    box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.24)
}

.pic {
    width: 40%;
}

video {
    width: 100%;
    border: 4px solid;
}