/* This file only applies to the about page (about.html) */

/* ================================ */
/* ======= 1. LANDING PAGE ======== */
/* ================================ */
.aboutLandingPage h1 {
    font-size: clamp(2.5rem, 17vw, 7rem);
}


/* ==================================== */
/* ======= 2. Condo Attributes ======== */
/* ==================================== */
.about_condo h1, 
.about_condo h2 {
    text-align: center;
}

/* ============================================ */
/* =========== 3. Amenities 3-column ========== */
/* ============================================ */
.amenities {
  margin-top: 5rem;
}

.amenities-grid {
    margin: 0 auto;
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    width: 80%;
}

.amenities .mini_big_title {
    margin-bottom: 0rem;
}


/* ============================================ */
/* ============== 4. Photo Gallery ============ */
/* ============================================ */

/* ===== COLOR TRANSITION === */
body {
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Default text color */
.big_section_title,
.small_section_title,
.mini_big_title,
.regular_section_title,
.section_paragraph {
  color: var(--graphite);
  transition: color 0.5s ease;
}

body.gallery-active {
  background-color: black;
}

body.gallery-active .big_section_title,
body.gallery-active .small_section_title,
body.gallery-active .mini_big_title,
body.gallery-active .regular_section_title,
body.gallery-active .section_paragraph {
  color: white;
}


/* ===== Photo gallery ==== */
.photo_gallery {
  padding: 2rem;
}

.gallery-grid {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 30%);
  margin-top: 2rem;
  gap: 1rem;
}

.gallery-item {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 1rem;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease-in-out;
  will-change: transform;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* Advertisement, remove padding for this page */
.footer-image{
    margin-bottom: 0 !important;
}