body{

    margin:0;
    
    font-family:
    Helvetica,
    Arial,
    sans-serif;
    
    background:
    
    linear-gradient(
    180deg,
    #f7f3ea,
    #ece7de
    );
    
    color:#222;
    
    }
    
    .hero{
    
    max-width:900px;
    
    margin:auto;
    
    padding:120px 30px 80px;
    
    }
    
    h1{
    
    font-size:64px;
    
    font-weight:300;
    
    margin:0;
    
    }
    
    .artist{
    
    margin-top:10px;
    
    opacity:.6;
    
    }
    
    .intro{
    
    margin-top:30px;
    
    max-width:600px;
    
    font-size:18px;
    
    opacity:.85;
    
    }
    
    .gallery{
    
    max-width:1200px;
    
    margin:auto;
    
    padding:40px;
    
    display:grid;
    
    grid-template-columns:
    repeat(12,1fr);
    
    gap:60px;
    
    }
    
    /* artwork container */
    
    .artwork{
    
    position:relative;
    
    }
    
    /* frame */
    
    .frame{
    
    background:rgb(184, 184, 184);
    
    padding:1px;
    
    box-shadow:
    
    0 8px 18px rgba(0,0,0,.08),
    0 20px 60px rgba(0,0,0,.1);
    
    transition:transform .3s;
    
    }
    
    /* spotlight effect */
    
    .artwork::before{
    
    content:"";
    
    position:absolute;
    
    top:-60px;
    
    left:50%;
    
    transform:translateX(-50%);
    
    width:180px;
    
    height:120px;
    
    background:
    
    radial-gradient(
    ellipse at center,
    rgba(255,255,255,.7),
    rgba(255,255,255,0)
    );
    
    pointer-events:none;
    
    }
    
    .frame:hover{
    
    transform:translateY(-8px);
    
    }
    
    .frame img{
    
    width:100%;
    
    display:block;
    
    }
    
    /* captions */
    
    .caption{
    
    margin-top:14px;
    
    max-width:400px;
    
    }
    
    .title{
    
    font-weight:500;
    
    }
    
    .meta{
    
    font-size:14px;
    
    opacity:.6;
    
    margin-top:3px;
    
    }
    
    /* curated layout */
    
    .large{
    grid-column:span 8;
    }
    
    .medium{
    grid-column:span 6;
    }
    
    .small{
    grid-column:span 4;
    }
    
    footer{
    
    text-align:center;
    
    padding:80px;
    
    opacity:.5;
    
    }
    
    @media(max-width:900px){
    
    .gallery{
    
    grid-template-columns:1fr;
    
    }
    
    .large,.medium,.small{
    grid-column:span 1;
    }

    .frame img{
        width:100%;
        height:auto;
        display:block;
        }
    
    }