.Intro { background-image: radial-gradient(circle at -50vw -50vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%); background-repeat: no-repeat; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; .intro-img { width: 750px; display: flex; position: absolute; bottom: 0; right: 0; img { transition: 250ms; position: relative; width: 100%; } } .intro-text { height: 100%; display: flex; justify-content: center; flex-direction: column; z-index: 1; h2 { display: flex; flex-direction: column; } h3, .fulltext, .cta { margin-top: 2rem; } .fulltext { color: var(--color-white-transparent); } } } @media (width < 900px) { .Intro { grid-template-columns: 1fr; & .intro-text, & .intro-img { grid-column-start: 1; } & .intro-text, & h2{ align-items: center; text-align: center; } & .intro-img img { filter: brightness(.5); } } }