:root {
  --screenvalue: calc(calc((100vw * 100) / 192000));
  font-family: "Roboto", sans-serif;
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: start;
  align-content: center;
  width: calc(var(--screenvalue) * 1280);
  gap: calc(var(--screenvalue) * 24);
  margin: calc(var(--screenvalue) * 100) auto;
}

.w-6 {
  width: 45%;
  overflow: hidden;
}
.w-7 {
  width: 55%;
}

.featured-image {
  --py: calc(var(--screenvalue) * 45);
  --px: calc(var(--screenvalue) * 45);
  display: flex;
  position: relative;
  justify-content: center;
  padding: var(--py) var(--px);
  border: 0.5px solid #979797;
  border-radius: calc(var(--screenvalue) * 7.5);
  width: calc(var(--screenvalue) * 552);
  height: calc(var(--screenvalue) * 552);
}

.featured-image img {
  height: auto;
  object-fit: cover;
}

.selector-container {
  display: flex;
}
.selector-container img {
  --py: calc(var(--screenvalue) * 5);
  --px: calc(var(--screenvalue) * 10);
  width: calc(var(--screenvalue) * 75);
  height: calc(var(--screenvalue) * 75);
  border: 0.5px solid #979797;
  object-fit: cover;
  padding: var(--py) var(--px);
  border-radius: calc(var(--screenvalue) * 7.5);
  margin: calc(var(--screenvalue) * 25) calc(var(--screenvalue) * 25) 0 0;
}

.title-container {
  border-bottom: 0.5px solid #979797;
}

.title-container h1 {
  font-size: calc(var(--screenvalue) * 40);
  font-weight: 700;
  margin: 0;
  width: calc(var(--screenvalue) * 531);
}

.title-container p {
  font-size: calc(var(--screenvalue) * 36);
  display: flex;
  align-items: center;
  gap: calc(var(--screenvalue) * 7);
  font-weight: 400;
  margin: 0;
  padding-top: calc(var(--screenvalue) * 2.5);
  padding-bottom: calc(var(--screenvalue) * 10);
}

.description {
  font-size: calc(var(--screenvalue) * 20);
  font-weight: 300;
  line-height: calc(var(--screenvalue) * 22.5);
}

.description > p {
  margin-bottom: calc(var(--screenvalue) * 15);
}

.button-container {
  margin-top: calc(var(--screenvalue) * 25);
  margin-bottom: calc(var(--screenvalue) * 25);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--screenvalue) * 5);
}

.button-container h2 {
  font-size: calc(var(--screenvalue) * 20);
  font-weight: 700;
  margin-bottom: calc(var(--screenvalue) * 15);
  flex-basis: 100%;
}

.button-container a {
  width: calc(var(--screenvalue) * 125);
  display: flex;
  flex-direction: column;
  text-align: center;
  --py: calc(var(--screenvalue) * 17);
  padding: var(--py);
  border-radius: calc(var(--screenvalue) * 8.5);
  border-width: 1px;
  border: 1px solid #6366f1;
  font-size: calc(var(--screenvalue) * 18);
  font-weight: 400;
  color: #374151;
  background-color: white;
  margin-left: calc(var(--screenvalue) * 5);
}

.button-container .active {
  background-color: #6366f1 !important;
  color: white !important;
}

.button-container span {
  font-style: italic;
}

.buy-button {
  width: 100%;
  background-color: #6366f1;
  border-width: 0;
  color: white;
  height: calc(var(--screenvalue) * 55);
  font-size: calc(var(--screenvalue) * 28);
  font-weight: 400;
  margin-top: calc(var(--screenvalue) * 27.5);
}

.list > li {
  display: flex;
  align-items: center;
  gap: calc(var(--screenvalue) * 10);
  margin-top: calc(var(--screenvalue) * 10);
  font-size: calc(var(--screenvalue) * 20);
}
.list {
  width: 100%;
  margin: 0; /* To remove default bottom margin */
  padding: 0; /* To remove default left padding */
  padding-top: calc(var(--screenvalue) * 25);
}

.list > li > svg {
  width: calc(var(--screenvalue) * 25);
  height: calc(var(--screenvalue) * 25);
}

.payments-logos {
  margin-top: calc(var(--screenvalue) * 22.5);
  width: calc(var(--screenvalue) * 327);
}

.per-piece{
  display: block;
  text-align: center;
  font-size: calc(var(--screenvalue) * 12.5);
  font-weight: 300;
  margin-top: calc(var(--screenvalue) * 2.5);
}


@media screen and (max-width: 920px) {
  :root {
    --screenvalue: calc(calc((100vw * 100) / 81000));
  }
  .flex-container {
    flex-direction: column;
    width: calc(var(--screenvalue) * 790);
    gap: calc(var(--screenvalue) * 50);
    margin: calc(var(--screenvalue) * 100) auto;
  }
  .w-6 {
    width: 95%;
    margin: 0 auto;
  }
  .w-7 {
    width: 95%;
    margin: 0 auto;
  }
  .featured-image {
    width: calc(var(--screenvalue) * 550);
    height: calc(var(--screenvalue) * 710);
    margin: 0 auto;
    --py: calc(var(--screenvalue) * 50);
    --px: calc(var(--screenvalue) * 50);
    position: relative;
  }
  .selector-container {
    justify-content: center;
    flex-wrap: wrap;
  }
  .selector-container img {
    width: calc(var(--screenvalue) * 100);
    height: calc(var(--screenvalue) * 100);
    margin: calc(var(--screenvalue) * 10);
  }
  .title-container {
    width: calc(var(--screenvalue) * 650);
    margin: 0 auto;
  }
  .title-container h1 {
    font-size: calc(var(--screenvalue) * 55);
    width: calc(var(--screenvalue) * 650);
  }
  .title-container p {
    font-size: calc(var(--screenvalue) * 45);
    padding-top: calc(var(--screenvalue) * 5);
    padding-bottom: calc(var(--screenvalue) * 10);
  }
  .description {
    font-size: calc(var(--screenvalue) * 35);
    width: calc(var(--screenvalue) * 650);
    margin-left: auto;
    margin-right: auto;
    line-height: calc(var(--screenvalue) * 48);
  }

  .description > p {
    margin-bottom: calc(var(--screenvalue) * 45);
  }

  .button-container {
    width: calc(var(--screenvalue) * 680);
    margin: calc(var(--screenvalue) * 10) auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--screenvalue) * 10);
  }
  .button-container h2 {
    flex-basis: 100%;
    font-size: calc(var(--screenvalue) * 32);
    margin-top: calc(var(--screenvalue) * 26);
    margin-bottom: calc(var(--screenvalue) * 18);
  }
  .button-container a {
    white-space: nowrap;
    text-align: center;
    width: calc(var(--screenvalue) * 210);
    --py: calc(var(--screenvalue) * 20);
    padding: var(--py) calc(var(--screenvalue) * 8);
    border-radius: calc(var(--screenvalue) * 10);
    border-width: 1px;
    border-color: #6366f1;
    font-size: calc(var(--screenvalue) * 35);
  }
  .button-container span {
    font-style: italic;
  }
  .buy-button {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    display: flex;
    align-items: center;
    background-color: #6366f1;
    border-width: 0;
    color: white;
    height: calc(var(--screenvalue) * 110);
    font-size: calc(var(--screenvalue) * 40);
    font-weight: 400;
    margin-top: calc(var(--screenvalue) * 40);
  }
  .list {
    width: calc(var(--screenvalue) * 650);
    margin: calc(var(--screenvalue) * 0) auto;
    padding-top: calc(var(--screenvalue) * 10);
  }
  .list > li {
    font-size: calc(var(--screenvalue) * 24);
    width: calc(var(--screenvalue) * 650);
  }
  .list > li > svg {
    width: calc(var(--screenvalue) * 30);
    height: calc(var(--screenvalue) * 30);
  }
  .payments-logos {
    display: flex;
    justify-content: center;
    width: calc(var(--screenvalue) * 500);
    margin: calc(var(--screenvalue) * 20) auto;
  }
  .per-piece{
    text-align: center;
    font-size: calc(var(--screenvalue) * 22);
    font-weight: 300;
    margin-top: calc(var(--screenvalue) * 2.5);
  }
}


.svg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(var(--screenvalue) * 100);
  height: calc(var(--screenvalue) * 100);
}