/** GRID: V3 Section 1 */
.v3-sect1 img {
  height: auto;
}

.v3-sect1 .p-y-1 {
  /* border: 10px solid red; */
  padding: initial;
}

.v3-sect1 .title {
  position: relative;
  margin: 7rem auto;
  width: 90%;
  max-width: 75rem;
}

/* TITLE - BACKGROUND BLACK LINE */
.v3-sect1 .title::before {
  position: absolute;
  content: "";
  border-top: solid 2px rgba(0, 0, 0, 0.185);
  inset: 50%;
  width: 100%;

  z-index: -2;
  transform: translate(-50%, -50%);
}

/* TITLE - 3 DIAMONDS SHAPE */
.v3-sect1 .title .wrap {
  position: relative;
  margin: auto;
  width: fit-content;
  padding-left: 4px;
  background: white;
  padding: 8px;
  padding-right: 3px;
  padding-block: 1rem;

}
.v3-sect1 h3 {
  position: relative;
  border: none;
  font-size: 0.9rem;
  /* font-size: 0.9rem; */
}

.v3-sect1 .sub-insanity h3 {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  /* font-size: 0.8rem; */
  color: #716f81;
}

/* SUB DIAMOND 1*/
.v3-sect1 .title .sub-insanity h3:last-child::before {
  position: absolute;
  content: "";

  width: 190%;
  height: 190%;

  transform: translate(-50%, -50%) rotate(45deg);
  top: 50%;
  left: 45%;

  z-index: -2;
}

.v3-sect1 .title .sub-insanity.FIRST h3:last-child::before {
  border: 9px solid #f29191;
  background: white;
}


/* SUB BIG DIAMOND 3*/
.v3-sect1 .title .sub-insanity.FIRST h3:last-child::after {
  position: absolute;
  content: "";
  width: 360%;
  height: 600%;
  border: 3px solid #cbcbcb;

  left: 67%;
  top: 0%;

  transform: translate(-50%, -50%) rotate(45deg);

  z-index: 0;
}

/* SUB DIAMOND 2*/
.v3-sect1 .title .sub-insanity.LAST h3:last-child::before {
  border: 1px solid #4e4c5997;

  width: 320%;
  height: 600%;

  top: 90%;
  left: 87%;
  z-index: -3;

}

/* ELEMENTs: white padding to left and right of the whole shapping */
/* abosulte to <wrap> */
.v3-sect1 .title .element::before,
.v3-sect1 .title .element::after {
  position: absolute;
  content: "";

  height: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: white;

  z-index: -2;
}

.v3-sect1 .title .element::before {
  right: 100%;
  width: 7rem;
}

.v3-sect1 .title .element::after {
  left: 50%;
  width: 10rem;
}

/* V3-SECTION: INTRO */
.v3-sect1 .intro.first {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;

  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;

  padding: 9rem 0;

  overflow: hidden;

  /* border: 10px solid purple; */
}

.v3-sect1 .intro.first {
  background-image: url(https://pbs.twimg.com/media/FbdEIjRXwAAnuyw?format=jpg&name=large);

  position: relative;
  z-index: 0;
}

/* background top fade in */
.v3-sect1 .intro.first .element {
  content: "";
  position: absolute;
  top: 0;
  height: 1px;
  width: 100%;
  background: white;

  box-shadow: 0 0 2rem 3rem white;

  z-index: 3;
}

/* background fade*/
.v3-sect1 .intro.first::after {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.203);
  backdrop-filter: blur(7px);

  inset: 0;
  z-index: -2;
}

/* white pentagon shape clip */
.v3-sect1 .intro.first::before {
  position: absolute;
  content: "";
  background-color: white;
  width: 100%;
  height: 102%;
  right: 0%;
  left: 0%;
  top: 0%;
  bottom: 2%;

  -webkit-clip-path: polygon(0 59%, 100% 65%, 100% 100%, 0% 100%);
  clip-path: polygon(0 59%, 100% 65%, 100% 100%, 0% 100%);

  z-index: -1;
}

/* flex child to .intro */
.v3-sect1 .intro.first .intro__content {
  display: flex;
  flex-direction: column;

  box-shadow: 2px 10px 20px -5px rgba(0, 0, 0, 0.263);

  border-radius: 20px;
  width: 90%;
  max-width: 500px;

  /* over hidden to fix "parent border radius doesnt have effect on child image border" */
  overflow: hidden;

  backdrop-filter: blur(10px);
}

.v3-sect1 .intro.first .intro__text {
  min-height: 17em;
  background: rgba(255, 255, 255, 0.727);
}

.v3-sect1 .intro.first .intro__text .button {
  border: 1px solid #85586f;
  color: #ac7d88;
  font-size: 0.8rem;

  transition: ease-out 250ms;
}

.v3-sect1 .intro.first .intro__text .button:hover {
  background-color: #85586f;
  color: white;
}

.v3-sect1 .intro.first .intro__text > p:nth-child(2)::first-letter {
  font-size: 3rem;
  float: left;
  padding-right: 0.5rem;
  padding-top: 0.3rem;
  line-height: 2.2rem;
}

.v3-sect1 .intro.first .accent {
  color: #ac7d88;
}

.v3-sect1 .intro.first .accent-2 {
  color: #827397;
}

/* ---------------------------------------------------------------------------------------- */

.v3-sect1 .intro:last-child {
  background-image: url(https://i.pinimg.com/564x/41/9d/12/419d12a71b19227a5f86db14d0a6b654.jpg);
}

@media (min-width: 40em) {
  .v3-sect1 .title .element::before {
    width: 9.5rem;
  }

  .v3-sect1 .title .element::after {
    width: 10.5rem;
  }
}

@media (min-width: 50em) {
  .v3-sect1 .intro.first .intro__content {
    flex-direction: row;
    align-items: start;
    box-shadow: none;
    overflow: visible;

    max-width: 1000px;
    backdrop-filter: unset;
  }

  .v3-sect1 .intro.first .intro__content.flex > * {
    flex: 1;
  }

  .v3-sect1 .intro.first .intro__text,
  .v3-sect1 .intro.first .intro__content img {
    box-shadow: 2px 6px 10px -5px rgba(0, 0, 0, 0.263);
  }

  .v3-sect1 .intro.first .intro__text {
    min-height: 26em;
    padding-left: 3rem;
    padding-right: 6rem;

    backdrop-filter: blur(10px);
  }

  .v3-sect1 .intro.first .intro__content img {
    align-self: center;
    height: 270px;
    border-radius: 18px;
    position: relative;
    top: 34px;
    right: 4rem;
  }
}

@media (min-width: 60em) {
  /* white pentagon shape clip */
  .v3-sect1 .intro:first-child::before {
    /* -webkit-clip-path: polygon(16% 0, 79% 100%, 61% 100%, 0 100%, 0 0); */
    clip-path: polygon(40% 0, 87% 100%, 51% 100%, 0 100%, 0 0);
  }
}