--- export interface Props { name: string; link: string; mlb: string; } const {mlb, link, name } = Astro.props; const ce_img: string = `ce/${link}.png`; let mlb_image: string = ""; if(mlb === "false") { mlb_image = "hidemlb"; } --- <article> <div class="heading-center"> <h1>{name}</h1> </div> <div> <img class="ce-crop" src={ce_img} alt="A Fragment of 2030"> </div> <div class={mlb_image}> <img class="mlb" src="ce/mlb.png" alt="Max-limit broken"/> </div> </article> <style> .hidemlb { display: none; } article { background-color: rgb(27, 27, 27); float: left; border-color: #1e1e1e; padding: 20px; padding-top: 5px; width: 7em; height: auto; justify-content: center; text-align: center; transition: transform var(--speed) var(--ease); overflow: hidden; margin: 0px; } article:hover { transform: scale(var(--hover-scale)); } article div { margin: 1em auto; } img { display: block; margin-left: auto; margin-right: auto; } .heading-center { display: table; width: 100%; height: 2.5rem; } .heading-center > h1 { font-size: 20px; color: white; max-width: 200px; padding-bottom: 0.3rem; display: table-cell; vertical-align: middle; } .ce-crop { width: 6em; height: 6em; object-fit: cover; object-position: 0% 0%; } @media (min-width: 512px) { .ce-crop { width: 10em; height: 10em; } article { width: auto; } } .mlb { width: 60%; margin-top: 1rem; margin-left: auto; margin-right: auto; } </style>