I've tried setting different heights to the .card-image, to the image itself, to the ::after but nothing is working. The only thing that has kind of worked is setting the flex-basis to 0% in .card-container * {}, but then I'm left with an empty space above the image and using the transform translate doesn't really work either
*,*:before,*:after { box-sizing: border-box;}* { padding: 0; margin: 0;}.wrapper { display: flex; align-items: center; justify-content: center; height: 100dvh; background-color: hsl(233, 47%, 7%);}.card-container { background-color: hsl(244, 38%, 16%); max-width: 67em; border-radius: .5rem; height: 50%; overflow-y: hidden; display: flex; align-items: center;}.card-container * { flex-basis: 50%;}.card-content { padding: 4rem;}.card-content>*+* { margin-top: 2rem;}img { display: block; max-width: 100%; margin-inline: auto;}h1 { color: white; margin-bottom: 2rem; font-weight: bolder; font-size: 2.5rem;}.desc { color: hsla(0, 0%, 100%, 0.75); margin-bottom: 4rem; font-size: 1.2rem;}span { color: hsl(277, 64%, 61%);}.stats { display: flex; align-items: center; gap: 1rem; margin-top: 3.75rem;}.stat-number { color: white; font-size: 1.6rem; font-weight: 900;}.stat-desc { color: hsla(0, 0%, 100%, 0.75); margin-top: .5rem; text-transform: uppercase; font-size: .8rem;}.card-image { position: relative;}.card-image::after { content: ""; width: 100%; height: 100%; background: hsla(277, 94%, 49%, 0.323); position: absolute; inset: 0;}@media (max-width: 820px) { .card-container { flex-direction: column-reverse; height: 90%; width: 85%; } .card-container * { flex-basis: 0%; } .card-content { padding-top: 1rem; padding-left: 2rem; padding-right: 2rem; padding-bottom: 1.5rem; text-align: center; }}<!-- Feel free to remove these styles or customise in your own stylesheet 👍 --><style> .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); }</style><main class="wrapper"><div class="card-container"><div class="card-col card-content"><h1>Get <span>insights</span> that help your business grow.</h1><p class="desc">Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p><div class="stats"><div class="stat-item"><p class="stat-number">10k+</p><p class="stat-desc">companies</p></div><div class="stat-item"><p class="stat-number">314</p><p class="stat-desc">templates</p></div><div class="stat-item"><p class="stat-number">12M+</p><p class="stat-desc">queries</p></div></div></div><div class="card-col card-image"><img src="./images/image-header-desktop.jpg" alt="" aria-hidden="true"> <!--I think this tells the screen reaser to ignore this LOOK UP!--></div></div></main>