/* Rest */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
:root {

    --scale-factor: 1;
    --translate-factor: 0;

    --c-primary: #f0efef;
    --c-smoke: #cfcfcf;
    --c-dark-smoke: #cccccb;
    --c-gray: #999999;
    --c-green: #7ABA43;
    --c-pink: #DC85B8;
    --c-blue: #395DAA;
    --c-white: #ffffff;
    --c-gold: #AF9940;
    --c-text: #434343;
    --c-q-text: #666766;
    --c-dark-gray: #333333;

    --bg-gradient-0: linear-gradient(0, var(--c-smoke) 0%, var(--c-dark-smoke) 100%);
    --bg-gradient-45: linear-gradient(45deg, var(--c-smoke) 0%, var(--c-white) 100%);
    --bg-gradient-135: linear-gradient(135deg, var(--c-smoke) 0%, var(--c-white) 100%);

    

    --c-secondary: #f363b9;
    --c-text-light: #ffffff;
    --c-btn: #f79210;
}
@font-face {
  font-family: 'foco';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/Foco-Bold.ttf) format('truetype');
}

@font-face {
  font-family: 'din';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/DIN-Alternate-Bold.ttf) format('truetype');
}
html {
}

html, body {
  block-size: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  visibility: hidden;
  opacity: 0;
}

body {
  font-family: "foco", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  background-color: var(--c-primary);
  color: var(--c-text);
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  justify-content: center;
  align-items: center;
}

.content,
.content--shadow {
  aspect-ratio: 9 / 16;
  block-size: 100dvh;
  margin: auto;
  display: grid;
  grid-template-rows: repeat(11, 1fr);
  grid-template-columns: repeat(11, 1fr);
  scale: var(--scale-factor);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: rect(auto auto auto auto round 20px);
  grid-area: 1 / -1;
  translate: 0 var(--translate-factor);
}

.content--shadow {
  --shadow-color: 0deg 1% 82%;
  clip-path: none;
  border-radius: 20px;
  filter: drop-shadow(0px 0px 2px hsl(var(--shadow-color)));
  background: var(--c-primary);
}

.frame {
  grid-area: 1 / 1 / 12 / 12;
  visibility: hidden;
  opacity: 0;
  display: grid;
  grid-template-rows: repeat(11, 1fr);
  grid-template-columns: repeat(11, 1fr);
  z-index: 1;
}

.quiz__question {
  grid-area: 1 / 1 / 12 / 12;
  z-index: 1;
}

.quiz__answer {
  grid-area: 1 / 1 / 12 / 12;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}

.quiz__carousel {
  grid-area: 1 / 1 / 12 / 12;
  display: grid;
  grid-template-rows: repeat(11, 1fr);
  grid-template-columns: repeat(11, 1fr);

  .quiz__products {
    grid-area: 1 / 1 / 12 / 12;
    display: grid;
    grid-template-rows: repeat(11, 1fr);
    grid-template-columns: repeat(11, 1fr);
    z-index: 1;

    .quiz__product {
      grid-area: 1 / 1 / 12 / 12;
      display: grid;
      grid-template-rows: repeat(11, 1fr);
      grid-template-columns: repeat(11, 1fr);
      visibility: hidden;
      opacity: 0;
    }
  }

  .quiz__carousel-controls {
    grid-area: 5 / 2 / 7 / 11;
    display: flex;
    justify-content: space-between;

    .quiz__prev-product {
      visibility: hidden;
      opacity: 0;
    }
  }
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--c-white);
  padding: 12px;
  z-index: 100;

  display: none;

  @media screen and (min-height: 550px) {
    display: block;
  }
    
}

.logo {
  block-size: clamp(2rem, 5.647058823dvh, 3rem);
  margin: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

@media screen() {
  
}

.footer {
  grid-area: 1 / 1 / 12 / 12;
  display: grid;
  grid-template-rows: repeat(11, 1fr);
  grid-template-columns: repeat(11, 1fr);
  display: contents;

  .quiz__restart {
    font-size: clamp(4px, 1.62dvh, 97px);
    text-transform: uppercase;
    grid-area: 11 / 2 / 12 / 5;
    justify-self: start;
    align-self: start;
    margin-inline-start: -0.1dvh;
    margin-block-start: 1dvh;
    background-color: transparent;
    color: var(--c-gray);
    z-index: 1;
    visibility: hidden;
    opacity: 0;
  }

  .quiz__question-number {
    font-size: clamp(4px, 1.62dvh, 97px);
    text-transform: uppercase;
    grid-area: 11 / -4 / 12 / -2;
    justify-self: center;
    align-self: start;
    margin-inline-start: 1.5dvh;
    margin-block-start: 0.7dvh;
    color: var(--c-gray);
    z-index: 1;
    visibility: hidden;
    opacity: 0;
  }
}

.blades-bg {
  grid-area: 1 / 1 / 12 / 12;
  place-self: end center;
  z-index: 0;
  transform: translate(0, 22dvh);
  position: relative;
}

#startBtn {
  visibility: hidden;
  opacity: 0;
}

.timerLine {
  grid-area: 9 / 4 / 11 / 9;
  z-index: 3;
  width: 72%;
  margin-block-start: -2.23dvh;
  margin-inline-start: 3.6dvh;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.scaleWrap {
  grid-area: 1 / 1 / 12 / 12;
  display: grid;
  grid-template-rows: repeat(11, 1fr);
  grid-template-columns: repeat(11, 1fr);
  scale: 1.2;
}
.btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: var(--c-text);

  &:hover {
    filter: brightness(1.05);
  }

  &.btn__circle {
    position: relative;
    border-radius: 50%;
    aspect-ratio: 1;
    background-image: var(--bg-gradient-45);
    z-index: 1;
    &:where(:has(img)) {
      display: flex;
      place-content: center;
    }
    &::before {
      content: '';
      position: absolute;
      border-radius: inherit;
      aspect-ratio: inherit;
      inset: 2.461%;
      background-image: var(--bg-gradient-135);
      z-index: -1;
    }
    img {
      width: 60.8%;
      margin-inline-end: 1.25dvh;
    }
  }

  .btn__circle--answer {
    aspect-ratio: 1;
    block-size: 4dvh;
  }

  &.btn__hidden {
    grid-area: 1 / 1 / -1 / -1;
    z-index: 100;
    display: none;
  } 
}

/* Placeholder */
.placeholder {
  aspect-ratio: 9 / 16;
  grid-area: 1 / 1 / 12 / 12;
  width: 100%;
  z-index: -1;
}

/* Button */
.btn__bottom-center {
  grid-area: 8 / 4 / 11 / 9;
  justify-self: center;
  align-self: end;
  block-size: 18.4dvh;
  margin-block-end: 2dvh;
  z-index: 1;
  position: relative;

  .btn__text {
    display: inline-block;
    text-transform: capitalize;
    font-size: clamp(4px, 3.23dvh, 194px);
    line-height: 1;
    margin-block-end: 1dvh;
    pointer-events: none;
  }
}

/* Frame 1: Home */
.frame:nth-child(1) {
  z-index: 0;

  .frame-bg {
    grid-area: 1 / 1 / 12 / 12;
    width: 100%;
    z-index: 0;
  }
  /* Hero Text */
  .hero-text {
    grid-area: 6 / 2 / 8 / 11;
    text-align: center;
    font-size: clamp(4px, 5.92dvh, 355px);
    line-height: 1;
    align-self: start;
    margin-block-start: 1.09dvh;
    color: var(--c-white);
    z-index: 1;
  }

  .hero-text--small {
    grid-area: 8 / 2 / 9 / 11;
    text-align: center;
    font-size: clamp(4px, 4.31dvh, 258px);
    line-height: 1;
    align-self: start;
    color: var(--c-white);
    margin-block-start: -2.4dvh;
    z-index: 1;
  }
}

/* Timer */
.btn__timer {
  grid-area: 2 / 2 / 5 / 11;
  place-self: start center;
  block-size: 18.4dvh;
  aspect-ratio: 1;
  img {
    width: 100%;
  }
  z-index: 1;
} 

/* Question / Answer */
.quiz__question,
.quiz__answer {
  display: grid;
  grid-template-rows: repeat(11, 1fr);
  grid-template-columns: repeat(11, 1fr);
}

.question-text {
  grid-area: 5 / 2 / 7 / 11;
  text-align: center;
  font-size: clamp(4px, 3.23dvh, 194px);
  line-height: 1.135;
  align-self: start;
  justify-self: center;
  color: var(--c-q-text);
}

.answer-bg {
  grid-area: 7 / 3 / 9 / 10;
  place-self: center;
  margin-block-start: 2dvh;
  z-index: 1;
}

.btn__circle--answer {
  grid-area: 7 / 3 / 9 / 10;
  block-size: 10.488dvh;
}

/* Answer */
.quiz__answer {
  .question-text {
    margin-block-start: 0;
    sup {
      font-size: clamp(4px, 1.99dvh, 118px);
      line-height: 1;
    }
  }
  img.answer-bg {
    width: 80%;
  }
}

.references {
  font-size: clamp(4px, 0.54dvh, 32px);
  grid-area: 9 / 3 / 9 / 10;
  place-self: start center;
  margin-block-start: 0.7dvh;
  z-index: 1;
  text-align: center;
  color: var(--c-gray);
}

/* Frame 2: Q&A 1 */
.frame:nth-child(2),
.frame:nth-child(3),
.frame:nth-child(4),
.frame:nth-child(4) {
  & > section {
    grid-area: 1 / 1 / 12 / 12;
    display: grid;
    grid-template-rows: repeat(11, 1fr);
    grid-template-columns: repeat(11, 1fr);
  }
}

.frame:nth-child(2) {
  .question-text {
    margin-block-start: -4.67dvh;
  }

  .answer-bg-text {
    grid-area: 7 / 3 / 9 / 10;
    place-self: center;
    margin-block-start: 2dvh;
    font-size: clamp(4px, 1.89dvh, 113px);
    z-index: 2;
    color: var(--c-q-text);
    text-transform: uppercase;
    pointer-events: none;
  }
}

.frame:nth-child(3) {
  .quiz__question {
    .question-text {
      margin-block-start: -3.24dvh;
    }
  }

  .quiz__answer {
    .question-text {
      margin-block-start: -4.37dvh;
    }

    .answer-bg {
      grid-area: 6 / 3 / 8 / 10;
      margin-inline: 2.58dvh;
      margin-block-start: 4.45dvh;
      margin-block-end: 0;
      width: 92%;
    }

    .answer-bg--tins {
      grid-area: 5 / 3 / 9 / 9;
      width: 100%;
      place-self: center;
      z-index: 1;
      margin-block-start: -3dvh;
      margin-inline-start: 2.7dvh;
    }

    .answer-title {
      grid-area: 8 / 3 / 9 / 10;
      font-size: clamp(4px, 2.15dvh, 129px);
      text-align: center;
      place-self: center;
      margin-block-start: -1dvh;
      color: var(--c-green);
    }

    .answer-paragraph {
      grid-area: 8 / 1 / 10 / 12;
      place-self: center;
      text-align: center;
      font-size: clamp(4px, 1.89dvh, 113px);
      line-height: 1.2;
      color: var(--c-dark-gray);

      sup {
        font-size: clamp(4px, 1.08dvh, 65px);
        line-height: 1;
      }
    }

    .references {
      grid-area: 9 / 3 / 10 / 10;
      place-self: center;
      margin-block-start: 2.2dvh;
    }
  }

  .answer-bg {
    grid-area: 7 / 2 / 9 / 11;
    margin-inline: 2.58dvh;
    margin-block-end: 3.4dvh;
  }

  .product-img {
    z-index: 1;
    width: 82.87%;
    place-self: start;
    pointer-events: none;
    scale: 1.3;
    translate: 0 -10px;
  }

  .product-img--green {
    grid-area: 7 / 2 / 9 / 6;
    margin-block-start: -1.85dvh;
    margin-inline-start: 1.28dvh;
    z-index: 2;
  }

  .product-img--green--bg {
    grid-area: 7 / 3 / 9 / 6;
    margin-block-start: 1.525dvh;
    margin-inline-start: 3.28dvh;
    width: 52%;
  }

  .product-img--blue {
    grid-area: 7 / 5 / 9 / 9;
    margin-block-start: -2.57dvh;
    margin-inline-start: -.7dvh;
    width: 89%;
  }

  .product-img--pink {
    grid-area: 7 / 8 / 9 / 12;
    margin-block-start: -3.3dvh;
    margin-inline-start: -4.60dvh;
    width: 96.5%;
  }
}

.frame:nth-child(4) {
  .quiz__question {
    .question-text {
      margin-block-start: -1.55dvh;
    }
  }

  .quiz__answer {
    .question-text {
      margin-block-start: -5.79dvh;
    }

    .answer-bg {
      grid-area: 6 / 3 / 8 / 10;
      margin-inline: 2.58dvh;
      margin-block-start: 10.45dvh;
      margin-block-end: 0;
      width: 92%;
    }

    .answer-bg--tins {
      grid-area: 5 / 3 / 9 / 9;
      width: 100%;
      place-self: center;
      z-index: 1;
      margin-block-start: 1dvh;
      margin-inline-start: 6.7dvh;
    }

    .answer-title {
      grid-area: 8 / 3 / 9 / 10;
      font-size: clamp(4px, 2.15dvh, 129px);
      text-align: center;
      place-self: end center;
      color: var(--c-blue);
      margin-block-end: 1.4dvh;
    }

    .answer-paragraph {
      grid-area: 8 / 1 / 10 / 12;
      place-self: center;
      text-align: center;
      font-size: clamp(4px, 1.89dvh, 113px);
      line-height: 1.2;
      color: var(--c-dark-gray);
      margin-block-start: 4dvh;

      sup {
        font-size: clamp(4px, 1.08dvh, 65px);
        line-height: 1;
      }
    }

    .references {
      grid-area: 9 / 3 / 10 / 10;
      place-self: end center;
      margin-block-start: 0;
      margin-block-end: 1dvh;
    }
  }

  .answer-bg {
    grid-area: 7 / 2 / 9 / 11;
    margin-inline: 2.58dvh;
    margin-block-end: 3.4dvh;
  }

  .product-img {
    z-index: 1;
    width: 82.87%;
    place-self: start;
    pointer-events: none;
    scale: 1.3;
    translate: 0 -10px;
  }

  .product-img--green {
    grid-area: 7 / 2 / 9 / 6;
    margin-block-start: -1.85dvh;
    margin-inline-start: 1.28dvh;
    z-index: 2;
  }

  .product-img--green--bg {
    grid-area: 7 / 3 / 9 / 6;
    margin-block-start: 1.525dvh;
    margin-inline-start: 3.28dvh;
    width: 52%;
  }

  .product-img--blue {
    grid-area: 7 / 5 / 9 / 9;
    margin-block-start: -2.57dvh;
    margin-inline-start: -0.7dvh;
    width: 89%;
  }

  .product-img--pink {
    grid-area: 7 / 8 / 9 / 12;
    margin-block-start: -3.3dvh;
    margin-inline-start: -4.60dvh;
    width: 96.5%;
  }
}

.frame:nth-child(5) {
  .quiz__question {
    .question-text {
      grid-area: 4 / 2 / 5 / 11;
      align-self: end;
      margin-block-end: -0.5dvh;
    }
  }

  .quiz__answer {
    .question-text {
      margin-block-start: 2.04dvh;
      grid-area: 4 / 2 / 7 / 11;
      color: var(--c-q-text);
    }
    .answer-text--04 {
      color: var(--c-white);
    }
  }
  
  .answer-bg {
    grid-area: 5 / 2 / 10 / 11;
    place-self: center;
    z-index: 1;
    width: 88%;
    margin-block-start: 3dvh;
  }

  .answer-text {
    /* font-family: "din", sans-serif; windows rendering looks bad */
    font-size: clamp(4px, 1.89dvh, 96px);
    color: var(--c-gray);
    text-align: left;
    line-height: 1.25;
    z-index: 1;
    pointer-events: none;
    color: var(--c-dark-gray);

    sup {
      font-size: clamp(4px, 0.81dvh, 48px);
      line-height: 1;
    }
  }

  .answer-text--01 {
    grid-area: 6 / 4 / 6 / 11;
    margin-inline-start: 1.9dvh;
    margin-block-start: -3.2dvh;
  }

  .answer-text--02 {
    grid-area: 7 / 4 / 7 / 11;
    margin-inline-start: 1.9dvh;
    margin-block-start: -2.6dvh;
  }

  .answer-text--03 {
    grid-area: 8 / 4 / 8 / 11;
    margin-inline-start: 1.9dvh;
    margin-block-start: -0.8dvh;
  }

  .answer-text--04 {
    grid-area: 9 / 7 / 9 / 11;
    margin-inline-start: 2.3dvh;
    margin-block-start: 1.4dvh;
  }

  .references {
    grid-area: 10 / 3 / 10 / 10;
    place-self: start center;
    margin-block-start: -1dvh;
  }
}

.frame:nth-child(6) {
  .question-header {
    font-size: clamp(4px, 2.69dvh, 161px);
    color: var(--c-gray);
    text-transform: uppercase;
    line-height: 1;
  }

  .question-header--01 {
    grid-area: 1 / 1 / 2 / 12;
    place-self: end center;
    margin-block-end: -1.58dvh;
  }

  .question-header--02 {
    grid-area: 3 / 4 / 4 / 9;
    justify-self: center;
    margin-block-start: 1.6dvh;
  }

  .quiz__results--score {
    color: var(--c-q-text);
    font-size: clamp(4px, 4.55dvh, 274px);
    grid-area: 2 / 1 / 3 / 12;
    justify-self: center;
    margin-block-start: 1.12dvh;
  }

  .question-text {
    font-size: clamp(4px, 2.42dvh, 145px);
    grid-area: 3 / 2 / 6 / 11;
    place-self: center;
    line-height: 3.23dvh;
    margin-block-start: -3.8dvh;
    sup {
      font-size: clamp(4px, 0.81dvh, 48px);
      line-height: 1;
    }
  }

  .results-bg {
    grid-area: 5 / 2 / 9 / 11;
    place-self: center;
    width: 100%;
    margin-block-start: -1.8dvh;
    margin-inline-start: 0.48dvh;
  }

  .references {
    grid-area: 10 / 3 / 10 / 10;
    place-self: start center;
    margin-block-start: 0.5dvh;
  }

  .results-learnmore {
    grid-area: 9 / 2 / 11 / 11;
    width: 79.8%;
    place-self: start center;
    margin-block-start: -0.25dvh;
    z-index: 1;
  }

  .results-learnmore-text {
    grid-area: 9 / 2 / 10 / 11;
    color: var(--c-gold);
    font-size: clamp(4px, 2.69dvh, 161px);
    line-height: 1;
    place-self: center;
    margin-block-end: 1.4dvh;
    pointer-events: none;
    z-index: 2;
  }

  .results-learnmore-img {
    grid-area: 10 / 2 / 11 / 11;
    width: 100%;
    place-self: center;
    margin-block-start: -1.5dvh;
    pointer-events: none;
    z-index: 2;
  }

  .results-learnmore-img--tin-g-1 {
    grid-area: 8 / 3 / 10 / 5;
    place-self: end;
    margin-block-end: 2.32dvh;
    width: 67%;
    margin-inline-end: -0.27dvh;
  }

  .results-learnmore-img--tin-g-2 {
    grid-area: 8 / 3 / 10 / 6;
    place-self: end start;
    margin-block-end: 0;
    width: 94%;
    margin-inline-start: -2.24dvh;
    margin-block-start: 0;
  }

  .results-learnmore-img--tin-b {
    grid-area: 8 / 8 / 10 / 11;
    place-self: end;
    margin-block-end: 0;
    margin-inline-end: 1.9dvh;
    width: 95%;
  }

  .results-learnmore-img--tin-p {
    grid-area: 8 / 7 / 10 / 10;
    place-self: end;
    margin-block-end: 1.542dvh;
    margin-inline-end: 1.72dvh;
    width: 83%;
  }
}


.frame:nth-child(7) {
  .product--legend-a {
    grid-area: 1 / 2 / 2 / 11;
    width: 95%;
    margin-block-start: 5.3dvh;
    margin-inline-start: 0.61dvh;
  }

  .product--legend-b {
    grid-area: 1 / 2 / 2 / 11;
    width: 95%;
    margin-block-start: 5.783dvh;
    margin-inline-start: 0.61dvh;
  }

  .quiz__carousel-controls {
    display: contents;
  }

  .quiz__next-product {
    grid-area: 6 / 9 / 8 / 12;
    width: 51%;
    place-self: start center;
    margin-block-start: 1.53dvh;
    margin-inline-start: 0.7dvh;
    z-index: 10;
  }

  .quiz__prev-product {
    grid-area: 6 / 1 / 8 / 4;
    width: 51%;
    place-self: start center;
    margin-block-start: 1.53dvh;
    margin-inline-start: 0.7dvh;
    z-index: 10;
  }

  .product-chart {
    grid-area: 2 / 2 / 4 / 11;
    width: 97%;
    place-self: center;
  }

  .quiz__products {
    .product-title {
      grid-area: 8 / 3 / 10 / 10;
      font-size: clamp(4px, 2.96dvh, 178px);
      text-align: center;
      place-self: center;
      margin-block-start: -4.69dvh;
      line-height: 1.23;
      color: var(--c-green);
    }

    .product-paragraph {
      grid-area: 9 / 1 / 10 / 12;
      place-self: center;
      text-align: center;
      font-size: clamp(4px, 1.89dvh, 113px);
      line-height: 1.2;
      color: var(--c-dark-gray);
      margin-block-start: 1.8dvh;

      sup {
        font-size: clamp(4px, 1.08dvh, 65px);
        line-height: 1;
      }
    }

    .product-btn-text--next {
      grid-area: 7 / 9 / 8 / 11;
      text-align: right;
      margin-block-start: 0.9dvh;
      line-height: 1.1;
      color: var(--c-gray);
      font-size: clamp(4px, 1.70dvh, 65px);
    }

    .product-btn-text--prev {
      grid-area: 7 / 2 / 8 / 5;
      text-align: left;
      margin-block-start: 0.9dvh;
      line-height: 1.1;
      color: var(--c-gray);
      margin-inline-start: 0.5dvh;
      font-size: clamp(4px, 1.70dvh, 65px);
    }

    .references {
      grid-area: 10 / 3 / 11 / 10;
    }
  }

  .quiz__products > .quiz__product:nth-of-type(1) {
    .product-img--01 {
      grid-area: 4 / 1 / 9 / 12;
      margin-inline-start: -3.88dvh;
      width: 90%;
      margin-block-start: -2.9dvh;
      z-index: 2;
    }

    .product-img--02 {
      grid-area: 5 / 5 / 9 / 11;
      margin-inline-start: 1.65dvh;
      width: 78%;
      margin-block-start: -2dvh;
    }
  }

  .quiz__products > .quiz__product:nth-of-type(2) {
    .product-title {
      color: var(--c-pink);
    }

    .product-img--01 {
      grid-area: 3 / 1 / 8 / 12;
      margin-inline-start: 0;
      width: 100%;
      margin-block-start: 2.9dvh;
      z-index: 2;
    }

    .product-chart {
      grid-area: 2 / 2 / 4 / 5;
      width: 68%;
      place-self: center start;
      margin-block-start: -1.5dvh;
      margin-inline-start: 1dvh;
    }
  }

  .quiz__products > .quiz__product:nth-of-type(3) {
    .product-title {
      color: var(--c-blue);
    }

    .product-img--01 {
      grid-area: 3 / 1 / 8 / 12;
      margin-inline-start: 2.98dvh;
      width: 95%;
      margin-block-start: 4.13dvh;
      z-index: 2;
    }

    .product-chart {
      grid-area: 2 / 4 / 4 / 7;
      width: 68%;
      place-self: center start;
      margin-block-start: -1.5dvh;
      margin-inline-start: 2dvh;
    }
  }

}