/* ============================================================
   INSTAGRAM PAGE
   ============================================================ */

.instagram-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 46px;
}


.instagram-region-label {
  display: block;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a7a82;
  margin-bottom: 9px;
}


.instagram-top h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--plum);
  margin: 0;
}


/* ============================================================
   REEL GRID
   ============================================================ */

.insta-grid {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 22px;

  width: 100%;
}


/* ============================================================
   REEL CARD
   ============================================================ */

.insta-item {

  position: relative;

  width: 100%;

  aspect-ratio: 9 / 16;

  overflow: hidden;

  background: #000;

  border: 0;

  margin: 0;
  padding: 0;

  opacity: 0;

  transform: translateY(18px);

  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.16,1,.3,1);

}


.insta-item.in {

  opacity: 1;

  transform: translateY(0);

}


/* ============================================================
   ONLY THE INSTAGRAM REEL
   ============================================================ */

.insta-frame {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  border: 0;

  margin: 0;
  padding: 0;

  background: #000;

}


/* ============================================================
   EMPTY / ERROR
   ============================================================ */

.instagram-empty {

  grid-column: 1 / -1;

  padding: 80px 20px;

  text-align: center;

  color: var(--plum);

}


.instagram-empty p {

  font-family: var(--display);

  font-style: italic;

  font-size: 1.4rem;

  margin: 0;

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

  .insta-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

}


@media (max-width: 680px) {

  .instagram-top {

    align-items: flex-start;

    flex-direction: column;

    gap: 22px;

  }


  .instagram-top .btn {

    align-self: flex-start;

  }


  .insta-grid {

    grid-template-columns: 1fr;

    gap: 18px;

  }


  .insta-item {

    width: 100%;

    max-width: 430px;

    margin: 0 auto;

  }

}