/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0px 0px 0px 0px;
  gap: 8px; /* 20px gap between containers */
  --body-margin: 195px; /* Default body margin */
  margin: 64px 8px 0px 64px; /* Add some padding to the body */
}

/* ...existing code... */


/* ...existing code... */

/* Outer square styling */
.outer-square {
  position: relative;
  width: 100%;
  max-width: 1070px;
  display: grid;
  gap: 8px;; /* 10px gap between tiles */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.section-header {
  color: var(--text-color);
  width: 100%;
  height: 48px;
    max-width: 1070px;
    padding: 8px;
}

/* Tile styling */
.tile {
  display: flex;
  gap: 8px;; /* 10px gap between inner square and title */
  flex-direction: column; /* Stack children vertically */
}

/* Inner square styling */
.inner-square {
  height: 90%; /* Takes up 90% of the tile's height */
  background-color: var(--main); /* Inner square background color */
  border-radius: 24px; /* Slightly smaller border radius than the tile */
  width: 100%; /* Fixed tile width */
  height: 150px; /* Fixed tile height */
  background-position: center center;
  background-size: 140%;
  box-shadow: 0 20px 50px 0 rgba(0, 0, 0, .1);
  outline: var(--border-thickness) solid var(--border);
}

/* Title styling */
.title {
  flex: 1; /* Takes up the remaining space */
  display: flex;
  align-items: center; /* Center the title vertically */
  justify-content: center; /* Center the title horizontally */
  font-size: 16px; /* Adjust font size as needed */
  color: var(--text-color); /* Title text color */
  text-align: center; /* Center the text */
}

/* Responsive grid columns */