/*   ==============================   T H U M B N A I L S   ==============================   */

#thumbs > li {display: block}
#thumbs > li {padding-bottom: 2rem;}
#thumbs ~ h2 {padding: 7rem 0 0;} 
#thumbs .button {font-size: 2rem;flex: 1;}
#thumbs .pricetag {width: 9rem; bottom: -1rem;}
#thumbs li > a.block {border: 1px solid;padding: 1rem;}
#thumbs li strong {padding: 1rem 0 .6rem;line-height: 1.2;}
#thumbs li big {line-height: 2}
li h2 {margin-right: .2em;}
li text + ul {padding: 1rem 0;clear: both;}

#filter {padding: 1rem 0}

/*   ==============================   F I N D   ==============================   */

#find {font-size: var(--huge)}
#findform:checked ~ main #find {height: auto;overflow: visible;}
[type=search] {padding-right: 1em}
.search-form span {max-width: calc(100% - 1em);}
[type=search], [type=search] + button, .search-form span {font-size: inherit;line-height: inherit;font-family: inherit;}
.search-form button {width: auto;border:0}
.search-form output {left: 0;transform: translateX(-50%);top: calc(100% + 1.5rem);z-index: 1;}
.found::after {content: "FOUND!";position: absolute;top: .5rem;right: 1rem;color:var(--accent);font-size: 1.75rem;}

/*   ==============================   G R I D   ==============================   */

.grid-sizer, .grid > li {width: 100%;} 
h3 {font-size: calc((100vw - (var(--padding) * 2)) / 6);padding: .18em 0;}
li h2 {font-size: calc((100vw - (var(--padding) * 2)) / 2.6);}


@media screen and (min-width: 900px) {/* 2 X 360 + 60 gutter + 2 X 60 padding = 900 */  
    .grid-sizer, .grid > li {width: calc((100% / 2) - 30px);}  
    li h2 {font-size: calc((100vw - (var(--padding) * 2)) / 5.6);}
    h3 {font-size: calc((100vw - (var(--padding) * 2)) / 13);}
}
@media screen and (min-width: 1320px) {/* 3 X 360 + 2 X 60 gutter + 2 X 60 padding = 1320 */
    .grid-sizer, .grid > li {width: calc((100% / 3) - 40px);}
    li h2 {font-size: calc((100vw - (var(--padding) * 2)) / 8.6);}
    h3 {font-size: calc((100vw - (var(--padding) * 2)) / 20);}
} 
@media screen and (min-width: 1740px) {/* 4 X 360 + 3 X 60 gutter + 2 X 60 padding = 1320 */
    .grid-sizer, .grid > li {width: calc((100% / 4) - 45px);} 
    li h2 {font-size: calc((100vw - (var(--padding) * 2)) / 11.6);}
    h3 {font-size: calc((100vw - (var(--padding) * 2)) / 27);}
} 

/**/