I have a row of square tiles (event-tile) line dup accross the bottom of the screen. These tiles are nested inside a container (.contentContainerBottom) running across the bottom of the screen. Each tile has key information, Start and End time, Event Name, and get together time (event-congregation) with a follow up time (next-congregation).

I am trying to:

1. lay these tiles so they are lined up equally across the .contentContainerBottom. This works fine.

2. Start and End time to be at the Top left and Right Corner retrospectively with a label 'Free Period' where applicable. This works fine.

3. Event Name to be centered horizontally below the info in point #2 as fixed position, with its own font size and format.

4. event-congregation to be centered horizontally and placed below the event name with its own with its own font size and format.

5. Next-congregation to be centered horizontally and placed below the event-congregation with its own with its own font size and format.

For visual aestetic, I am trying to get the event-name, event-congregation and next-congregation to be at the same vertical level in each of the tile. Hope this makes sense.

PROBLEM STATEMENT:

1. I have tried rejigging and restructuring the CSS but cannot seem to get the visual look I need. Note not all events will have a follow-up time displayed (next-congregation), therefore where there is a next-congregation it pushes the info in point #3 and #4, therefore creating a vertical misalignment across the all the event-tiles.

2. In trying to resolve the problem, I have noticed all the nested containers <DIV>s seem to get overridden by the .event-tile parameters. I thought the parameters disclosed later in the CSS take precedent - I must be wrong here?

HELP REQUIRED

1. Why is .event-tile overriding the parameters inside the <div class="contentContainerBottom">
2. What can I do to resolve the problem statements?

I have tried to include the relevant CSS parameters and the HTML. This layout is part of a wider screen layout (vertical panel/container) which seems to work fine. The only difference I have between the vertical and the bottom is the following setup;

Vertical Panel <div id="contentContainerTopRight"></div> followed by nested <DIV>s

Bottom Panel <div id="schedule" class="contentContainerBottom"> followed by nested <DIV>s

Basically both panels are displaying the same info with the vertical showing some additonal info.

/* ==========================
✅ Base Layout Styles
========================== */
html,
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  background-color: black;
}

/* ==========================
✅ General Tile Styles
   ========================== */
.event-tile {
  flex: 1;
  text-align: center;
  /* Center text horizontally */
  display: block;
  /* Reset to block if flex was causing issues */
  padding: 1px;
  margin: 1px;
  border-radius: 5px;
  font-size: 2rem;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
  /* white-space: nowrap; Wrap the event name tp new line if req'd.*/
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
  /* Lower z-index than the date-time element */
}

/* ==========================
✅ Bottom Container - Single Row Layout
========================== */
.contentContainerBottom {
  display: flex;
  position: relative;
  /* Ensure child elements can be positioned absolutely */
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  /* Ensure all tiles are same height */
  height: 15vh;
  width: 100vw;
  background-color: #333;
  padding: 5px;
  box-sizing: border-box;
}

#contentContainerBottom .event-tile {
  width: auto;
  max-width: 100%;
  font-size: calc(1rem + 0.3vw);
  /* Adjust font size dynamically */
  overflow-wrap: break-word;
  /* Prevent overflow */
}

#contentContainerBottom .event-header {
  display: flex;
  position: relative;
  width: 100%;
  flex-direction: column;
  /* Align children vertically */
  justify-content: space-around;
  /* Distribute children evenly */
  align-items: center;
  /* Center children horizontally */
  height: 100%;
  /* Ensure it takes the full height of the parent */
}

#contentContainerBottom .schedule .event-name {
  font-size: 0.7em;
  padding: 1px;
  font-weight: bold;
  background-color: green;
}

#contentContainerBottom .event-congregation {
  color: #FFD700;
  display: flex;
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  font-size: 2rem;
  font-weight: bold;
  margin-top: 5px;
  text-align: center;
  /* Fallback for older browsers */
}

#contentContainerBottom .next-congregation {
  font-size: 1.5rem;
  color: #FFD700;
}

/* ==========================