/* Base styles */
body {
  text-align: justify;
}

/* --------------------------------
   3-COLUMN LAYOUT
-------------------------------- */
.layout-ncol-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.layout-ncol-3 > :not([hidden]) {
  box-sizing: border-box;
  padding: 1rem;
  flex: 0 0 33.33%;
  max-width: 33.33%;
}

/* Image styling — consistent size */
.layout-ncol-3 img {
  width: 150px;        /* Fixed image width */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Responsive: 2-column */
@media (max-width: 1200px) {
  .layout-ncol-3 > :not([hidden]) {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Responsive: 1-column */
@media (max-width: 600px) {
  .layout-ncol-3 > :not([hidden]) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* --------------------------------
   4-COLUMN LAYOUT
-------------------------------- */
.layout-ncol-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
}

.layout-ncol-4 > :not([hidden]) {
  box-sizing: border-box;
  padding: 1rem;
  flex: 0 0 25%;
  max-width: 25%;
}

/* Image styling — consistent size */
.layout-ncol-4 img {
  width: 220px;        /* Fixed image width */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Responsive: 3-column */
@media (max-width: 1350px) {
  .layout-ncol-4 > :not([hidden]) {
    flex: 0 0 33%;
    max-width: 50%;
  }
}

/* Responsive: 2-column */
@media (max-width: 850px) {
  .layout-ncol-4 > :not([hidden]) {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Responsive: 1-column */
@media (max-width: 550px) {
  .layout-ncol-4 > :not([hidden]) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}