.guiz-wrapper {
  padding-top: 50px;
  padding-bottom: clamp(
    50px,
    50px + (130 - 50) * ((100vw - 320px) / (1920 - 320)),
    130px
  );
}
#quiz-intro {
  background-color: #f5eedf;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  position: relative;
  overflow: hidden;
}
.quiz-intro-media {
  flex: 0 0 auto;
  min-width: 150px;
  max-width: 50%;
}
.quiz-intro-content {
  --y-p: 50px;
  --x-p: 30px;
  flex: 1;
  min-width: 230px;
  padding: var(--y-p) var(--x-p) var(--y-p) 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.quiz-intro-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.quiz-question {
  text-align: center;
  margin-bottom: 20px;
  display: none;
}
.quiz-question.active {
  display: block;
}
.quiz-question h2 {
}
.quiz-question p,
.quiz-question p:not(:last-child) {
  margin-top: 0;
  margin-bottom: 30px;
}

.quiz-options {
  list-style-type: none;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.quiz-options li {
  margin-bottom: 10px;
  flex: 0 0 auto;
  max-width: 100%;
  overflow-wrap: break-word;
  background-color: #ffffff;
}
.quiz-options li label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  background-color: #f5f5f5;
  transition: background-color 0.2s ease-in-out;
}
.quiz-options li label:hover,
.quiz-options li label:has(input[type="radio"]:checked) {
  background-color: #e5f7fa;
}

.quiz-navigation {
  text-align: center;
}

.quiz-link {
  display: inline-block;
  padding: 10px 20px;
  background: #0073aa;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 10px;
}
.quiz-link:hover {
  background: #005d82;
}
#quiz-results {
  text-align: center;
  margin-top: 20px;
  display: none;
}
.quiz-progress {
  width: 100%;
  height: 10px;
  background: #f5eede;
  margin-bottom: 20px;
  position: relative;
}
.quiz-progress-bar {
  height: 100%;
  background: #4393a5;
  transition: width 0.3s;
}
.quiz-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: clamp(20px, 20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)), 40px);
}
.quiz-item {
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  position: relative;
  overflow: hidden;
}
.quiz-item:before,
.quiz-item:after {
  content: "";
  display: block;
  position: absolute;
}
.quiz-item:before {
  background: url(./img/idecor1-min.png) 0 0 no-repeat;
  left: 50%;
  top: 50px;
  width: 62px;
  height: 76px;
}
.quiz-item:after {
  background: url(./img/idecor2-min.png) 0 0 no-repeat;
  right: 0;
  bottom: 50px;
  width: 60px;
  height: 70px;
}
.quiz-item-media,
.quiz-item-content {
  position: relative;
  z-index: 1;
}
.quiz-item-media {
  flex: 0 0 auto; /* Не розтягується, але зберігає розмір */
  min-width: 150px; /* Мінімальна ширина для колонок */
  max-width: 50%; /* Максимум 50% у колонках */
}
.quiz-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.quiz-item-content {
  --y-p: 50px;
  --x-p: 30px;
  flex: 1;
  min-width: 230px;
  padding: var(--y-p) var(--x-p) var(--y-p) 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quiz-item-content h2 {
  margin-top: 0;
  margin-bottom: 20px;
}
.quiz-item-descroption {
}
.quiz-item-action {
  margin-top: 10px;
}

.quiz-result-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  text-align: left;
}
.quiz-result-item-media {
  flex: 0 0 40%;
}
.quiz-result-item-content {
  flex: 0 0 50%;
}
.quiz-result-item-product {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}
.quiz-result-item-product-data {
  flex: 1;
  text-align: left;
}
.quiz-result-item-product-media {
  max-width: 300px;
  margin: 0 auto;
}
.quiz-result-item-product-media img {
  margin: auto;
}
.quiz-result-item .btn2 {
  margin-top: 30px;
}
.btn6,
.btn7 {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  text-decoration: none;
  text-align: center;
  padding: 18px 35px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.btn6 {
  border: 1px solid #307094;
  background-color: #307094;
  color: #f4f4f4;
}
.btn6:hover {
  background-color: #ffffff;
  color: #307094;
}
.btn7 {
  border: 1px solid #307094;
  background-color: #ffffff;
  color: #307094;
}
.btn7:hover {
  background-color: #307094;
  color: #ffffff;
}
@media (max-width: 1219px) and (min-width: 882px) {
  .quiz-item {
    align-items: baseline;
  }
  .quiz-item-media {
    max-width: 100%;
  }
  .quiz-item-content {
    padding: 0 var(--x-p) var(--y-p) var(--x-p);
  }
}

@media (max-width: 659px) {
  .quiz-item {
    align-items: baseline;
  }
  .quiz-item-media {
    max-width: 100%;
  }
  .quiz-item-content {
    padding: 0 var(--x-p) var(--y-p) var(--x-p);
  }
}
@media (max-width: 881px) {
  .quiz-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .btn6,
  .btn7 {
    padding: 12px 18px;
  }
  .quiz-result-item-media,
  .quiz-result-item-content {
    flex: 0 0 100%;
  }
}
@media (max-width: 559px) {
  #quiz-intro {
    gap: 20px;
    padding-top: 20px;
  }
  .quiz-intro-media {
    margin: auto;
    max-width: 280px;
  }
  .quiz-intro-content {
    padding: 0 var(--x-p) var(--y-p) var(--x-p);
  }
}