body{display:flex;flex-direction:column;min-height:100vh}main{flex-grow:1;padding:1rem;.container{background-color:#fff;display:grid;gap:50px;grid-template-areas:"mainThumbnail subThumbnails";grid-template-columns:1fr 1fr;margin:0 auto;max-width:100%;.mainThumbnail{grid-area:mainThumbnail;height:500px;position:relative;width:100%;&>img{height:100%;object-fit:cover;object-position:center;width:100%}&>figcaption{background-color:#000000a6;bottom:0;color:#fff;font-size:1.2em;padding:.5rem;position:absolute;width:100%}}.subThumbnails{display:grid;gap:20px;grid-area:subThumbnails;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;&>figure{position:relative;&>img{height:240px;width:100%}&>figcaption{background-color:#000000a6;bottom:0;color:#fff;font-size:1.2em;padding:.5rem;position:absolute;width:100%;word-break:break-all}}@media (max-width:600px){display:flex;flex-direction:column}}@media (max-width:600px){display:flex;flex-direction:column}}}.bottomThumbnailContainer{display:grid;gap:20px;grid-template-columns:repeat(4,1fr);margin-top:20px;&>figure{position:relative;&>img{height:240px;width:100%}&>figcaption{background-color:#000000a6;bottom:0;color:#fff;font-size:1.2em;padding:.5rem;position:absolute;width:100%;word-break:break-all}}@media (max-width:600px){display:flex;flex-direction:column}}.navContainer{background-color:#0009cc;display:flex;justify-content:center;list-style:none;padding:1rem;&>li{text-align:center;&>a{color:#fff;font-size:1.2em;text-decoration:none;@media (max-width:699px){font-size:.7em}@media (min-width:700px) and (max-width:862px){font-size:1em}}@media (min-width:500px){flex:1}}@media (max-width:500px){flex-wrap:wrap;gap:20px}}