/*──────────────────────────────────────────────────────────────────────────────
  EXISTING RULES for .section2, .container-section-left, etc.
──────────────────────────────────────────────────────────────────────────────*/
.section2 {
  background-color: #ffffff;
  height:            max-content;
  width:             100vw;
  padding:           5vh;
  font-family:       'Sofia Pro', sans-serif;

  display: grid;
  grid-template-columns: 35% 65%;
  grid-template-rows:    1;
  overflow: hidden;
}

.container-section-left {
  grid-column:  1;
  grid-row:     1;
  display:      flex;
  flex-direction: column;
  justify-content: center;
  align-items:  left;
}

.Mobile-sect2 {
  display: none;
}

.desk-sect2-H1 {
  font-size:   5vh;
  color:       #000000;
  text-align:  left;
  padding:     0;
  margin:      0;
}

.image-container-section2 {
  width: 100%;
}

.image-section2-logo {
  margin-top: 1vh;
  width:      80%;
}

.socialmedia-buttons-container-sect3 {
  display:        flex;
  justify-content: left;
  align-items:    center;
  margin-top:     5vh;
  list-style:     none;
  gap:            3vh;
  font-size:      5vh;
}

.socialmedia-buttons-container-sect3 li {
  color:           #000;
  text-decoration: none;
  transition:      0.3s ease-in-out;
}

.socialmedia-buttons-container-sect3 li:hover {
  transform:  scale(1.1);
  cursor:     pointer;
  transition: 0.3s ease-in-out;
}

/* Responsive font-size tweaks */
@media screen and (max-width: 1220px) {
  .desk-sect2-H1 {
    font-size: 4.5vh;
  }
}
@media screen and (max-width: 920px) {
  .desk-sect2-H1 {
    font-size: 4vh;
  }
}

/*──────────────────────────────────────────────────────────────────────────────
  Mobile/Tablet layout change (≤ 768px)
──────────────────────────────────────────────────────────────────────────────*/
@media screen and (max-width: 768px) {
  .desk-sect2 {
    display: none;
  }
  .Mobile-sect2 {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
  }
  .section2 {
    display:        flex;
    flex-direction: column;
    height:         100vh;
    width:          100vw;
    padding:        2vh 0;
  }

  .instagram-media {
    /* Will override below in its own media query */
  }

  .container-section-left {
    width:           100%;
    height:          40vh;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
  }

  .image-container-section2 {
    display:        flex;
    justify-content: center;
    width:          80vw;
  }
  .image-section2-logo {
    margin: 2vh 0;
    width:  100%;
  }

  .socialmedia-buttons-container-sect3 {
    display:         flex;
    justify-content: center;
    align-items:     center;
    margin-top:      1vh;
    list-style:      none;
    gap:             5vh;
    font-size:       5vh;
    color:           #000;
  }
}

/* If viewport height is very short, extend section2 length */
@media screen and (max-height: 500px) {
  .section2 {
    height: 180vh;
  }
}

/*──────────────────────────────────────────────────────────────────────────────
  NEW CAROUSEL RULES: Always keep carousel a 1:1 square
──────────────────────────────────────────────────────────────────────────────*/

/* 1) The wrapper (.instagram-media) is a responsive 1:1 square */
.instagram-media {
  width:          100%;
  max-width:      80vw;    /* On desktop, never exceed 80vw */
  aspect-ratio:   1 / 1;   /* Force a perfect square */
  margin:         1vh auto;
  display:        flex;
  justify-content: center;
  align-items:    center;
}

/* 2) #carousel-container fills that square and provides perspective */
#carousel-container {
  width:            100%;
  height:           100%;
  position:         relative;
  perspective:      80vw;       /* Keep perspective proportional */
  perspective-origin: 50% 50%;
  cursor:           grab;
  touch-action:     none;
}

/* 3) #carousel is the 3D container that also fills 100% */
#carousel {
  width:             100%;
  height:            100%;
  position:          absolute;
  transform-style:   preserve-3d;
  transform-origin:  50% 50%;
}

/* 4) Each .carousel__cell is square (25% × 25% of parent) */
.carousel__cell {
  position:         absolute;
  width:            25%;
  height:           25%;
  left:             50%;
  top:              50%;
  overflow:         hidden;
  border-radius:    2vh;             /* small rounding */
  transform-origin: 50% 50%;
}

/* 5) Any <img> or <video> inside a cell covers it as a square */
/*     AND make sure clicks always go through to the <a> (no video controls) */
.carousel__cell img,
.carousel__cell video {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  pointer-events:   none; /* disable interactions on media itself */
}

/*──────────────────────────────────────────────────────────────────────────────
  OVERRIDE on Mobile (≤ 768px) so the square never exceeds 60vh tall
──────────────────────────────────────────────────────────────────────────────*/
@media screen and (max-width: 768px) {
  .instagram-media {
    /* container-section-left uses 40vh, so limit carousel to 60vh */
    max-width:    60vh;
    aspect-ratio: 1 / 1;
    margin:       0 auto;
  }

  #carousel-container {
    perspective: 60vh;
  }
}