.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; & .intro-img { width: 750px; display: flex; position: absolute; bottom: 0; right: 0; & img { transition: 250ms; position: relative; width: 100%; } } .intro-text { height: 100%; justify-content: center; z-index: 1; & h1 { position: relative; } & .fulltext { color: var(--color-white); } } } @media (width <= 430px) { .Intro { & .intro-img{ width: 430px; } } } @media (width < 900px) { .Intro { grid-template-columns: 1fr; & .intro-text, & .intro-img { grid-column-start: 1; } & .intro-text, & h1 { align-items: center; text-align: center; } & .intro-img img { filter: brightness(.5); } } }