@import url("../../colours.css");
@import url("../../dimens/global.css");


@font-face {
  font-family: "App-Medium";
  src: url("../../fonts/Nunito-Medium.ttf");
}
@font-face {
  font-family: "App-Regular";
  src: url("../../fonts/Nunito-Light.ttf");
}

body {
  margin-left: var(--top-bar-margin-right);
  margin-right: var(--top-bar-margin-right); 
  background-color: var(--bg-colour); 
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grids-cell-module-size), 1fr));
  gap: var(--grids-cells-gap);
  padding: 24px;
}

.module-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  aspect-ratio: 1 / 1; 
  display: flex;               /* enable flexbox */
  justify-content: center;     /* center horizontally */
  align-items: center;         /* center vertically */
}

.module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

.module-card img {
  width: var(--cell-icon-limits);
  aspect-ratio: 1 / 1; 
  object-fit: contain;

}

.module-title {
  margin-top: 10px;
  font-size: var(--modules-cell-title);
  color: var(--app-theme);
  font-family: App-Medium;
  text-align: center;
}