/* ==========================================================
   INSTAGRAM SECTION
========================================================== */

.instagram-section {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 25%,
      rgba(65, 109, 59, .08),
      transparent 26%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(229, 148, 64, .07),
      transparent 22%
    ),
    linear-gradient(
      180deg,
      #F8F6F0 0%,
      #FFFFFF 100%
    );
}


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

.instagram-grid {

  display: grid;

  grid-template-columns:
    .95fr
    1.05fr;

  align-items: center;

  gap: 70px;

}


/* ==========================================================
   VISUAL SIDE
========================================================== */

.instagram-visual {

  position: relative;

  min-height: 500px;

}


.instagram-card {

  position: absolute;

  overflow: hidden;

  border:
    8px solid
    #ffffff;

  border-radius:
    22px;

  background:
    #ffffff;

  box-shadow:
    0
    22px
    55px
    rgba(77, 44, 28,
      .16
    );

  transition:
    transform
    .35s ease;

}


.instagram-card img {

  width: 100%;

  height: 100%;

  object-fit:
    cover;

}


.instagram-card--1 {

  width: 300px;

  height: 300px;

  left: 18px;

  top: 55px;

  z-index: 3;

  transform:
    rotate(-5deg);

}


.instagram-card--2 {

  width: 300px;

  height: 300px;

  right: 22px;

  top: 20px;

  z-index: 2;

  transform:
    rotate(6deg);

}


.instagram-card--3 {

  width: 235px;

  height: 255px;

  right: 5px;

  bottom: 15px;

  z-index: 4;

  transform:
    rotate(-2deg);

}


.instagram-visual:hover
.instagram-card--1 {

  transform:
    rotate(-3deg)
    translateY(-4px);

}


.instagram-visual:hover
.instagram-card--2 {

  transform:
    rotate(4deg)
    translateY(-5px);

}


.instagram-visual:hover
.instagram-card--3 {

  transform:
    rotate(0deg)
    translateY(-4px);

}


/* Instagram Badge */

.instagram-badge {

  position: absolute;

  left: 42px;

  bottom: 24px;

  z-index: 6;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    11px
    15px;

  border:
    1px solid
    rgba(77, 44, 28,
      .10
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      .92
    );

  color:
    var(--secondary);

  box-shadow:
    0
    14px
    35px
    rgba(77, 44, 28,
      .12
    );

  backdrop-filter:
    blur(10px);

  font-size:
    .75rem;

  font-weight:
    800;

}


.instagram-badge svg {

  width:
    20px;

  height:
    20px;

  color:
    var(--primary);

}


/* ==========================================================
   CONTENT
========================================================== */

.instagram-content {

  max-width:
    620px;

}


.instagram-content h2 {

  max-width:
    600px;

}


.instagram-content p {

  max-width:
    580px;

  margin-top:
    18px;

  font-size:
    .96rem;

  line-height:
    1.75;

}


/* ==========================================================
   POINTS
========================================================== */

.instagram-points {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px
    17px;

  margin-top:
    24px;

}


.instagram-points span {

  color:
    var(--secondary);

  font-size:
    .82rem;

  font-weight:
    750;

}


/* ==========================================================
   INSTAGRAM BUTTON
========================================================== */

.instagram-follow-btn {

  width:
    fit-content;

  min-height:
    54px;

  margin-top:
    29px;

  padding:
    0
    19px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  border-radius:
    11px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--secondary)
    );

  color:
    #ffffff;

  box-shadow:
    0
    14px
    34px
    rgba(65, 109, 59,
      .22
    );

  font-size:
    .86rem;

  font-weight:
    800;

  transition:
    transform
    .25s ease,
    box-shadow
    .25s ease;

}


.instagram-follow-btn:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0
    18px
    40px
    rgba(65, 109, 59,
      .28
    );

}


.instagram-follow-btn svg {

  width:
    21px;

  height:
    21px;

}


.instagram-follow-arrow {

  width:
    29px;

  height:
    29px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      .12
    );

  transition:
    transform
    .25s ease;

}


.instagram-follow-btn:hover
.instagram-follow-arrow {

  transform:
    translateX(3px);

}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width: 950px) {

  .instagram-grid {

    grid-template-columns:
      1fr;

    gap:
      45px;

  }


  .instagram-visual {

    width:
      min(
        600px,
        100%
      );

    min-height:
      500px;

    margin-inline:
      auto;

  }


  .instagram-content {

    max-width:
      720px;

    margin-inline:
      auto;

    text-align:
      center;

  }


  .instagram-content p {

    margin-inline:
      auto;

  }


  .instagram-points {

    justify-content:
      center;

  }


  .instagram-follow-btn {

    margin-inline:
      auto;

  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width: 580px) {

  .instagram-grid {

    gap:
      35px;

  }


  .instagram-visual {

    min-height:
      390px;

  }


  .instagram-card {

    border-width:
      6px;

    border-radius:
      16px;

  }


  .instagram-card--1 {

    width:
      58%;

    height:
      270px;

    left:
      0;

    top:
      45px;

  }


  .instagram-card--2 {

    width:
      48%;

    height:
      215px;

    right:
      0;

    top:
      12px;

  }


  .instagram-card--3 {

    width:
      47%;

    height:
      195px;

    right:
      4px;

    bottom:
      13px;

  }


  .instagram-badge {

    left:
      10px;

    bottom:
      7px;

    padding:
      9px
      12px;

    font-size:
      .66rem;

  }


  .instagram-content h2 {

    font-size:
      clamp(
        2.2rem,
        10vw,
        3rem
      );

  }


  .instagram-content p {

    font-size:
      .9rem;

  }


  .instagram-points {

    display:
      grid;

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

    gap:
      10px;

  }


  .instagram-points span {

    font-size:
      .75rem;

  }


  .instagram-follow-btn {

    width:
      100%;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width: 390px) {

  .instagram-visual {

    min-height:
      350px;

  }


  .instagram-card--1 {

    height:
      235px;

  }


  .instagram-card--2 {

    height:
      185px;

  }


  .instagram-card--3 {

    height:
      170px;

  }


  .instagram-points {

    grid-template-columns:
      1fr;

  }

}