.caption { font-size: 1rem; line-height: 1.5rem; max-width: 66%; margin: 1.5rem 0; } .showcaseSection { position: relative; padding-bottom: 0; } .showcaseSection::after { content: ''; width: 400vw; height: calc(100% + 256px); margin-left: -50vw; background: linear-gradient(0deg, rgba(19, 22, 36, 0) 0%, var(--bg-shade-0) 100%); position: absolute; top: 48px; z-index: -1; } .showcaseTail { display: flex; align-items: center; background: var(--bg-shade-0); padding: 180px 0; } .showcaseTail .content { display: grid; grid-auto-flow: row; max-width: var(--maxwidth); margin: auto; gap: 40px; } .showcaseTail .image { max-width: min(600px, 50%); height: auto; margin: auto; } .showcaseTail .text { text-align: center; } .showcaseTail .caption { margin: 1rem auto 2rem; } .teamWrapper { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 80px; } .thanksAniWrap { position: relative; transform: rotate(-5deg); margin-top: 2rem; } .thanksAniWrap .inner { overflow: hidden; } .thanksAniWrap::before { content: ''; position: absolute; } .thanksAniWrap::after { content: ''; position: absolute; top: 0; width: 110%; left: -5%; height: 100%; background: linear-gradient( 90deg, var(--bg-shade-1) 5%, rgba(27, 31, 59, 0) 25%, rgba(27, 31, 59, 0) 75%, var(--bg-shade-1) 95% ); z-index: 1; pointer-events: none; } .thanksAniWrap .rowOne, .thanksAniWrap .rowTwo { display: inline-grid; width: max-content; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 1rem; margin-bottom: 1rem; white-space: nowrap; } .thanksAniWrap .rowOne { animation: infiniteScroll 25s linear infinite; position: relative; left: -100%; } .thanksAniWrap .rowTwo { animation: infiniteScroll 30s linear infinite reverse; position: relative; right: 100%; } @keyframes infiniteScroll { 0% { transform: translate3d(0); } 100% { transform: translate3d(calc(100% / -3), 0, 0); } } @media screen and (max-width: 840px) { .showcaseTail { padding: 90px 0; } .showcaseTail .image { margin: auto; width: 100%; max-width: 600px; } }