* { --primary: #412554; --secondary: #008B52; --highlight: #FFE4A8; padding: 0; margin: 0; scroll-behavior: smooth; } .more-to-come { background-color: var(--secondary); } body { font-family: sans-serif; background-color: #454545; color: #f2f2f2; } header { color: #f2f2f2; height: 100vh; background-color: var(--primary); display: flex; justify-content: center; align-items: center; flex-direction: column; /* filter: drop-shadow(0 0 4px ); */ } header small { font-size: 16px; } .check-this-out h2, .check-this-out small { display: block; } .check-this-out small { color: var(--highlight); } .check-this-out { text-align: center; } main { /* margin: 10px 0; */ display: grid; grid-template-columns: repeat(4, 1fr); } section { position: relative; } section span { text-align: center; bottom: 20px; left: 0; width: 100%; position: absolute; filter: drop-shadow(0 0 4px black); } section small { display: block; } img { width: 100%; height: 100%; } .scroll { position: absolute; bottom: 10%; } a { text-decoration: none; color: var(--highlight); } @media only screen and (max-width: 850px) { main { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 430px) { main { display: block; } } @media only screen and (min-width: 1921px) { main { grid-template-columns: repeat(6, 1fr); } }