.banner{position: relative; height: 500px; display: grid; grid-template-rows: 100% 0;}

.banner > div:nth-child(1){overflow: hidden;}

.banner > div:nth-child(1) #banner-track{display: flex; width: max-content;}
.banner > div:nth-child(1) #banner-track > div{height: 500px; width: 100vw; display: grid; place-items: center;}
.banner > div:nth-child(1) #banner-track > div > img{height: inherit; width: inherit;}

.banner > div:nth-child(2){position: absolute; bottom: 0; display: grid; gap: 8px; width: 100%; padding: 32px; background: linear-gradient(0deg, var(--colour_02), transparent); pointer-events: none;}
.banner > div:nth-child(2) h2{font-size: 2.5rem; color: var(--colour_08);}
.banner > div:nth-child(2) p{color: var(--colour_07); border-left: 4px solid var(--colour_06); padding: 16px;}

.content{display: grid; gap: 128px; justify-items: center; align-content: start;}

.display{display: grid; gap: 32px; padding: 32px;}
.display > h2{color: var(--colour_07); font-size: 2rem; text-align: center; border-bottom: 3px groove; padding-bottom: 16px;}
.display > div{display: flex; flex-wrap: wrap; gap: 32px; align-items: start; justify-content: center;}
.display > div > a{background: var(--colour_10); color: var(--colour_05); transition: scale 0.5s, border-bottom 0.5s; border-radius: 16px; overflow: hidden;}
.display > div > a > div:nth-child(1){width: 240px; height: 240px; display: grid; place-content: center; overflow: hidden;}
.display > div > a > div:nth-child(2){width: 240px; padding: 16px; border-top: 8px solid var(--colour_06);}
.display > div > a > div:nth-child(2) h3{max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.display > div > a > div > img{background: black; width: 320px; height: 320px; display: block; transition: width 0.5s, height 0.5s, opacity 3s ease; will-change: opacity;}
.display > div > a:focus,
.display > div > a:hover{scale: 1.03;}
.display > div > a:focus > div > img,
.display > div > a:hover > div > img{width: 240px; height: 240px;}