section.big
{
 display:grid;
 grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
 grid-gap:8px
}

section.big .movie
{
 border-radius:var(--UI-big-border-radius);
 border:1px solid var(--grey5);
 overflow:hidden;
 /* TODO : check this height:220px */
 height:220px;
 position:relative
}

section.big .movie header
{
 z-index:2;
 position:sticky;
 background-color:var(--grey2);
 border-bottom:1px solid var(--grey5)
}

section.big .movie :is(h1, h2)
{
 margin:0;
 padding:4px;
 text-align:center;
 font-weight:normal; line-height:1em
}

section.big .movie h1
{
 font-size:0.9rem;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap
}

section.big .movie h2
{
 font-size:0.7rem
}

section.big .movie header :is(a, a:visited, a:link)
{
 color:var(--grey8);
 text-decoration:none
}

section.big .movie header a:hover
{
 text-decoration:underline
}

section.big .movie footer
{
 display:flex;
 position:absolute;
 bottom:8px;
 left:8px;
 right:8px;
 background-color:hsl(var(--grey8-hsl) / 0.5);
 padding:0.5em;
 border-radius:var(--UI-big-border-radius)
}

section.big .movie footer :is(span, a)
{
 margin:0;
 padding:2px 4px;
 flex:1
}

section.big .movie footer :is(span, a, a:visited, a:link)
{
 color:var(--grey8-on);
 font-size:0.7rem;
}

section.big .movie footer a
{
 text-align:left
}

section.big .movie footer span
{
 text-align:right
}

section.big .movie footer :is(a, a:visited, a:link)
{
 text-decoration:none
}

section.big .movie footer :is(a, a:visited, a:link):hover
{
 text-decoration:underline
}


@media (min-width:480px)
{
 section.big
 {
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr))
 }
}

@media (min-width:600px)
{
 section.big
 {
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))
 }

 section.big .movie
 {
  height:420px
 }
}