/* ========================================================= BELAIR HILL JUNIOR SCHOOL DIFFERENCE SECTION PHOTO-DRIVEN ADAPTIVE 16-IMAGE GRID ========================================================= */ /* ========================================================= DIFFERENCE SECTION ========================================================= */ .difference { position: relative; padding: 110px 0 120px; background: var(--cream); overflow: hidden; } /* ========================================================= CONTAINER ========================================================= */ .difference > .container { width: min(1220px, calc(100% - 40px)); margin: 0 auto; } /* ========================================================= DIFFERENCE HEADING ========================================================= */ .difference-heading { max-width: 850px; margin: 0 auto 55px; text-align: center; } /* ========================================================= SECTION LABEL ========================================================= */ .difference-heading .section-label { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; font-family: "DM Sans", sans-serif; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; color: var(--terracotta); } /* ========================================================= MAIN TITLE ========================================================= */ .difference-heading h2 { margin: 0 auto 20px; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.4rem, 4.5vw, 4.25rem); font-weight: 700; line-height: 1.05; color: var(--dark); } /* ========================================================= INTRODUCTION ========================================================= */ .difference-heading > p { max-width: 760px; margin: 0 auto; font-family: "DM Sans", sans-serif; font-size: 1.05rem; line-height: 1.8; color: var(--muted); } /* ========================================================= DIFFERENCE CONTENT ========================================================= */ .difference-content { max-width: 1080px; margin: 0 auto 60px; } /* ========================================================= DIFFERENCE LIST ========================================================= */ .difference-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } /* ========================================================= DIFFERENCE ITEM ========================================================= */ .difference-item { display: flex; flex-direction: column; min-height: 190px; padding: 28px 24px; border-radius: 18px; background: #ffffff; border: 1px solid rgba(7, 151, 166, 0.10); box-shadow: 0 12px 35px rgba(36, 50, 56, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .difference-item:hover { transform: translateY(-5px); border-color: rgba(201, 95, 67, 0.25); box-shadow: 0 18px 45px rgba(36, 50, 56, 0.10); } /* ========================================================= DIFFERENCE ICON ========================================================= */ .difference-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; background: var(--teal-light); color: var(--terracotta); font-size: 1.25rem; line-height: 1; flex-shrink: 0; } /* ========================================================= ITEM CONTENT ========================================================= */ .difference-item-content { flex: 1; } .difference-item h3 { margin: 0 0 9px; font-family: "DM Sans", sans-serif; font-size: 1.05rem; font-weight: 800; line-height: 1.3; color: var(--dark); } .difference-item p { margin: 0; font-family: "DM Sans", sans-serif; font-size: 0.91rem; line-height: 1.65; color: var(--muted); } /* ========================================================= LARGE PHOTO CARD ========================================================= */ .difference-media-card { position: relative; width: 100%; margin: 0 auto; padding: 0; overflow: hidden; border-radius: 28px; background: transparent; box-shadow: 0 25px 70px rgba(36, 50, 56, 0.14); } /* ========================================================= PHOTO GRID ========================================================= */ .difference-photo-grid { display: grid; /* * Twelve-column desktop system. * * JavaScript places: * * 2 / 3 / 3 / 4 / 4 * * images into this grid. */ grid-template-columns: repeat(12, minmax(0, 1fr)); /* * IMPORTANT: * * There are NO fixed row heights. * * The cells use their own aspect-ratio values, * supplied by JavaScript from the actual image * dimensions. */ grid-auto-rows: auto; gap: 5px; width: 100%; margin: 0; padding: 0; align-items: start; } /* ========================================================= PHOTO CELL ========================================================= */ .difference-photo-cell { position: relative; width: 100%; /* * The height is NOT fixed. * * JavaScript assigns: * * aspect-ratio: naturalWidth / naturalHeight * * so the cell conforms to the photograph. */ height: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; background: transparent; line-height: 0; box-sizing: border-box; } /* ========================================================= IMAGE PHOTO DETERMINES THE CELL ========================================================= */ .difference-photo-cell img { display: block; /* * Width determines the displayed image size. */ width: 100%; /* * IMPORTANT: * * Height is AUTO. * * The browser therefore preserves the exact * natural aspect ratio of the photograph. */ height: auto; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; /* * No contain box. * No cover crop. * No stretching. */ object-fit: initial; object-position: initial; vertical-align: top; transform: none; transition: opacity 0.3s ease; box-sizing: border-box; } /* ========================================================= NO HOVER ZOOM ========================================================= */ .difference-photo-cell:hover img { transform: none; } /* ========================================================= PHOTO TITLE BOTTOM LEFT FLUSH WITH PHOTO EDGES ========================================================= */ .difference-photo-title { position: absolute; left: 0; bottom: 0; z-index: 5; margin: 0; padding: 10px 16px 11px; max-width: 85%; background: rgba(4, 86, 97, 0.92); color: #ffffff; font-family: "DM Sans", sans-serif; font-size: 0.9rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.01em; text-align: left; border-radius: 0 8px 0 0; pointer-events: none; box-sizing: border-box; } /* ========================================================= IMAGE OVERLAY DISABLED ========================================================= */ .difference-photo-cell::after { content: none; } /* ========================================================= EMPTY IMAGE ========================================================= */ .difference-photo-cell img[src=""] { display: none; } /* ========================================================= EMPTY CELL ========================================================= */ .difference-photo-cell:has(img[src=""]) { background: linear-gradient( 135deg, var(--teal-light), var(--peach) ); } /* ========================================================= PLACEHOLDER ========================================================= */ .difference-image-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px; background: linear-gradient( 135deg, var(--teal-light), var(--peach) ); color: var(--teal-deep); font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; text-align: center; z-index: 10; } .difference-image-placeholder[hidden] { display: none; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1000px) { .difference { padding: 90px 0 100px; } .difference-content { margin-bottom: 50px; } .difference-list { grid-template-columns: repeat(2, 1fr); } /* * The photo grid continues to use natural image * proportions. No fixed row heights are introduced. */ } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 700px) { .difference { padding: 75px 0 80px; } .difference > .container { width: calc(100% - 28px); } .difference-heading { margin-bottom: 35px; } .difference-heading h2 { font-size: clamp(2rem, 9vw, 3rem); } .difference-heading > p { font-size: 0.96rem; line-height: 1.7; } .difference-content { margin-bottom: 40px; } .difference-list { grid-template-columns: 1fr; gap: 14px; } .difference-item { min-height: auto; padding: 22px 20px; flex-direction: row; align-items: flex-start; gap: 16px; } .difference-icon { width: 40px; height: 40px; margin-bottom: 0; } .difference-item-content { min-width: 0; } /* ===================================================== MOBILE PHOTO CARD ===================================================== */ .difference-media-card { border-radius: 20px; } /* ===================================================== MOBILE PHOTO GRID ===================================================== */ .difference-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 3px; width: 100%; margin: 0; padding: 0; align-items: start; } /* ===================================================== MOBILE PHOTO CELL ===================================================== */ .difference-photo-cell { width: 100%; height: auto; min-width: 0; min-height: 0; overflow: hidden; } /* ===================================================== MOBILE IMAGE ===================================================== */ .difference-photo-cell img { display: block; width: 100%; height: auto; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; object-fit: initial; transform: none; } .difference-photo-cell:hover img { transform: none; } /* ===================================================== MOBILE TITLE ===================================================== */ .difference-photo-title { padding: 8px 11px 9px; max-width: 90%; font-size: 0.78rem; line-height: 1.2; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 430px) { .difference > .container { width: calc(100% - 22px); } .difference-heading h2 { font-size: 2rem; } .difference-item { padding: 19px 17px; } .difference-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; } .difference-photo-cell img { width: 100%; height: auto; object-fit: initial; object-position: initial; transform: none; } .difference-photo-cell:hover img { transform: none; } .difference-photo-title { padding: 7px 9px 8px; font-size: 0.72rem; } }