body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background-image: radial-gradient(1200px 800px at 50% -10%, rgba(0,0,0,0.06), transparent 60%),
                        radial-gradient(1000px 600px at -10% 50%, rgba(0,0,0,0.05), transparent 55%),
                        radial-gradient(1000px 600px at 110% 50%, rgba(0,0,0,0.05), transparent 55%),
                        radial-gradient(1200px 900px at 50% 110%, rgba(0,0,0,0.07), transparent 60%);
      pointer-events: none;
    }

.header {
        background-color: #f4f6f8;
}

.my-text-color {
  color: #060669; /* This sets the text color to blue using a hex code */
}

.centered-text {
  text-align: center;
}

.container {
  display: flex; /* Enables flexbox layout */
  align-items: center; /* Vertically centers items if they have different heights */
  justify-content: space-between; /* Pushes items to the ends with space in between */
  max-width: 100px;
}

.f2 {
  font-family: "Times New Roman", serif; /* Specifies Times New Roman, serif as a fallback */
}

.f3 {
  font-family: "Calibri", serif; /* Specifies Times New Roman, serif as a fallback */
}

.models-grid {
  gap: 24px;
  grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
}

.model-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}

.model-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.model-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;            /* tall board feel */
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.model-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.model-meta h3 {
  margin: 0 0 4px 0;
  font-weight: 600;
}

.model-meta .muted {
  color: var(--ink-70);
  font-size: .95rem;
  margin: 0;
}

main.container { 
  display: block;      /* override any global flex/grid on .container */
}

.hero { 
  display: block;
  width: 100%;
  margin: 24px 0 8px;
}

.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.hero::after {
  content: "";
  display: block;
  clear: both;
}