/* HANCOCKSELFSTORAGE.COM - home.css */

#message { margin: 2rem 0;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-radius: 4px;            /* Slight rounding */

}

/* PHOTOS */
:root {--gutter: 10px;}

.grid {
  display:       flex;
  flex-wrap:     wrap;           /* allow wrapping if viewport is narrow */
  justify-content: center;       /* center the entire row of items */
  gap:           var(--gutter);  /* same gutter you’ve been using */
  margin:        0 auto;         /* center the flex container if you set a max-width */
}

.grid-item {
  flex: 0 0 300px;  /* fixed 300px width per image */
}

.grid-item img {
  display: block;
  width:   100%;
  height:  auto;
}


@media print {
.grid {display: block !important; width: auto !important; position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important;}
.grid {max-width: 6.5in;}
.grid::after {content: ""; display: table; clear: both;}
/* Float each real item, 300px wide, gutter on right */
.grid-item {position: static !important; float: left !important;
width: 300px !important; height: auto !important; margin: 5px 5px 5px 0 !important; transform: none !important;}

/* Ensure the img itself fills its box */
.grid-item img {display: block !important; width: 100% !important; height: auto !important;}
}