{"version":3,"sourceRoot":"","sources":["../scss-styles/components/_tile.scss"],"names":[],"mappings":"AACA,MACE,gBAGA,aACE,kBACA,iBACA,WACA,gBAEA,iBACE,kBACA,QACA,WACA,YACA,cACA,iBACA,uBAKJ,aACE,kBACA,iBACA,gBACA,gBACA,UAIF,eACE,WAEA,iBACE,SAMN,+BACE","file":"tile.css","sourcesContent":["// TILE\n.tile {\n  overflow: hidden; // keep the image + title neatly clipped\n\n  // IMAGE AREA (fixed ratio, image always fills width)\n  .image {\n    position: relative;\n    aspect-ratio: 3 / 2; // 360x240 look\n    width: 100%;\n    overflow: hidden;\n\n    img {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n      object-position: center;\n    }\n  }\n\n  // TITLE BAR\n  .title {\n    position: relative;\n    margin-top: -44px; // pull the bar up over the image\n    font-weight: 700;\n    line-height: 1.2;\n    z-index: 1; // ensure it sits above the image\n  }\n\n  // BODY CONTENT\n  .content {\n    color: #333;\n\n    p {\n      margin: 0;\n    }\n  }\n}\n\n/* If a tile has no .image, don’t pull the title up */\n.tile:not(:has(.image)) .title {\n  margin-top: 0;\n}"]}