/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./blocks/coupon/src/style.css ***!
  \*********************************************************************************************************************************************************************************/
/* COUPON BLOCK CSS */
.wp-block-coupon {
  position: relative;
  /* background-color: var(--smoke); */
  background-color: var(--white-a);
  display: grid;
  min-height: 70vh;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 3fr;
  padding: 24px;
  gap: 12px;
  z-index: 1;
  align-items: center;
  justify-items: center;
  padding-bottom: 48px;
  /*perspective: 1000px;*/
  border-radius: 88px 88px 0 0;
  margin-top: 70px;
  z-index: 3;
}
/* ANIMATIONS */
@keyframes card2Bounce {
  0% {
    transform: translateX(-12px) rotate(3.8deg);
  }

  40% {
    transform: translateX(-12px) rotate(7deg);
  }

  70% {
    transform: translateX(-12px) rotate(5.5deg);
  }

  100% {
    transform: translateX(-12px) rotate(6deg);
  }
}
@keyframes card3Bounce {
  0% {
    transform: translateX(24px) rotate(-2.5deg);
  }

  40% {
    transform: translateX(24px) rotate(-4deg);
  }

  70% {
    transform: translateX(24px) rotate(-2.5deg);
  }

  100% {
    transform: translateX(24px) rotate(-3deg);
  }
}
@keyframes card4Bounce {
  0% {
    transform: translateX(-36px) rotate(-3.2deg);
  }

  40% {
    transform: translateX(-36px) rotate(-5.5deg);
  }

  70% {
    transform: translateX(-36px) rotate(-4deg);
  }

  100% {
    transform: translateX(-36px) rotate(-4.5deg);
  }
}
.coupon-block-header {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(2.6rem, 4vw, 2.775rem);
  font-family: var(--font-a);
  /* color: var(--bright-white); */
  color: var(--dark-blue);
  font-weight: 700;
  word-spacing: -1.875px;
  letter-spacing: 1.255px;
  transform: translateY(8px);
  height: 100%;
}
.coupon-wrapper {
  position: relative;
  display: flex;
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  align-self: center;
  transform-style: preserve-3d;
  padding-bottom: 48px;
  overflow: visible;
}
.coupon-1,
.coupon-2,
.coupon-3,
.coupon-4 {
  /*transform-origin: center center -10vw; Adjusts axis */
  position: absolute;
  /* Allows cards to overlap and be positioned relative to .coupon-wrapper */
  width: 55vw;
  height: 40vh;
  border-radius: 24px;
  transition: all 0.2s ease-in-out;
}
.coupon-1 {
  background-color: #ECF2F6;
  /* What are dash tweaks I can make w CSS? */
  border: 1px dashed rgba(53, 53, 53, 0.7);
  /* --font-smoke in RGBA for opacity control */
  border-width: thin;
}
.coupon-2 {
  /* background-color: #585858; */
  background-color: #D6E8F3;
  transform: translateX(-12px) rotate(3.8deg);
  transform-origin: 55% 65%;
}
.coupon-3 {
  /* background-color: #4a4a4a; */
  background-color: #B9DCF4;
  transform: translateX(15px) rotate(-2.5deg);
  transform-origin: 53% -67%;
}
.coupon-4 {
  background-color: #376EB6;
  transform: translateX(-36px) rotate(-3.2deg);
  transform-origin: 48% 68%;
}
.coupon-wrapper:hover .coupon-2 {
  animation: card2Bounce 0.6s ease-in-out forwards;
}
.coupon-wrapper:hover .coupon-3 {
  animation: card3Bounce 0.6s ease-in-out forwards;
}
.coupon-wrapper:hover .coupon-4 {
  animation: card4Bounce 0.6s ease-in-out forwards;
}
.coupon-text-wrapper {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.coupon-header {
  display: grid;
  grid-column: 1 / 3;
  grid-row: 1;
  font-size: clamp(1.35rem, 4vw, 2.08rem);
  font-family: var(--font-a);
  color: var(--font-smoke);
  font-weight: 600;
  word-spacing: -1.875px;
  letter-spacing: 1.255px;
  align-items: flex-end;
  padding: 24px 32px 0 32px;
}
.get-code__button {
  display: flex;
  background-color: var(--smoke);
  grid-column: 2;
  grid-row: 1;
  flex-direction: row;
  justify-self: flex-end;
  height: 25px;
  padding: 8px;
  border-radius: 4px;
  font-family: var(--font-b);
  font-size: 1.025rem;
  font-weight: 500;
  color: var(--bright-white);
  align-items: center;
  justify-content: center;
  align-items: center;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 1;
}
.coupon-subheader {
  display: flex;
  /*font-size: clamp(3rem, 1.5vw, 3.15rem);*/
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
  font-family: var(--font-a);
  color: var(--font-smoke);
  font-weight: 600;
  word-spacing: -1.875px;
  line-height: 1.3;
  letter-spacing: 1.255px;
  align-items: center;
  padding: 32px;
}
.coupon-p {
  display: flex;
  /*font-size: clamp(3rem, 1.5vw, 3.15rem);*/
  grid-column: 1 / 3;
  grid-row: 3;
  font-size: var(--p-3);
  font-family: var(--font-b);
  color: var(--font-smoke);
  
  font-weight: 400;
  word-spacing: -1.875px;
  line-height: 1.3;
  letter-spacing: 1.255px;
  justify-content: space-between;
  align-items: center;
  text-indent: var(--indent);
  padding: 32px;
}
.squiggles {
  width: 100%;
  height: 100%;
  grid-column: 1;
  grid-row: 1;
  background-color: var(--smoke);

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: top left;
  mask-position: top left;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* RESPONSIVE MEDIA QUERIES */
/* MOBILE */
@media (max-width: 430px) {
  .wp-block-coupon {
    border-radius: 48px 48px 0 0;
    grid-template-rows: auto 1fr;
    padding: 0;
    padding-bottom: 56px;
    height: auto;
  }

  .coupon-wrapper {
    padding-bottom: 0px;
  }

  .coupon-1,
  .coupon-2,
  .coupon-3,
  .coupon-4 {
    width: 75vw;
    height: 55vh;
    /* height: fit-content; */
    border-radius: 24px;
    transition: all 0.2s ease-in-out;
  }

  .coupon-block-header {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(1.999rem, 4vw, 2.175rem);
    align-items: center;
    justify-self: center;
    align-self: center;
    transform: none;
    padding: 32px;
  }

  .coupon-text-wrapper {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.2fr 0.2fr 0.6fr;
    grid-template-rows: auto auto auto;
    width: 100%;
    padding-top: 18px;
  }

  .coupon-header {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: clamp(1.15rem, 4vw, 2.08rem);
    align-items: center;
    padding: 0 18px 0 18px;
    height: 100%;
    transform: none;
    padding-bottom: 0;
    padding-top: 8px;
  }

  .coupon-subheader {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: clamp(1.01rem, 1.5vw, 1.15rem);
    padding: 24px 18px 0 18px;
  }

  .coupon-p {
    display: flex;
    grid-column: 1 / 3;
    grid-row: 3;
    font-size: var(--p-3);
    font-family: var(--font-b);
    color: var(--font-smoke);

    justify-content: center;
    align-items: center;
    text-indent: 16px;
    padding: 18px 18px 24px 18px;
  }

  .coupon-2 {
    /* background-color: #585858; */
    background-color: #252a32;
    transform: translateX(-12px) rotate(3.8deg);
    transform-origin: 50% 50%;
  }

  .coupon-3 {
    /* background-color: #4a4a4a; */
    background-color: #1a1e22;
    transform: translateX(18px) rotate(2.5deg);
    transform-origin: 80% 40%;
  }

  .coupon-4 {
    background-color: #1a1c1e;
    transform: translateX(-24px) rotate(-3.2deg);
    transform-origin: 20% 25%;
  }

  .coupon-wrapper:hover .coupon-2 {
    animation: card2Bounce 0.6s ease-in-out forwards;
  }

  .coupon-wrapper:hover .coupon-3 {
    animation: card3Bounce 0.6s ease-in-out forwards;
  }

  .coupon-wrapper:hover .coupon-4 {
    animation: card4Bounce 0.6s ease-in-out forwards;
  }
}