.lensfinder {
  --section-padding-block: 64px;
  --section-padding-inline: 20px;
  --heading-1: 32px;
  --heading-2: 26px;
  --heading-3: 20px;
  --bodycopy-1: 16px;
  --bodycopy-2: 14px;
  --bodycopy-3: 12px;
  --btn-height: 56px;
  --btn-padding-inline: 16px;
  font-size: 16px;
  font-family: "Noto Sans", sans-serif;
  line-height: 1.5;
}
.lensfinder * {
  box-sizing: border-box;
}
.lensfinder img {
  max-width: 100%;
  height: auto;
}
.lensfinder pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: inherit;
}
.lensfinder .lensfinder-btnstyle {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 405px;
  height: var(--btn-height);
  padding-inline: var(--btn-padding-inline);
  font-size: 16px;
  font-weight: normal;
  background-color: transparent;
  border: 1px solid #333;
  color: #333;
  cursor: pointer;
}
.lensfinder .lensfinder-btnstyle:disabled {
  opacity: 0.5;
}
.lensfinder .lensfinder-heading-1 {
  font-size: var(--heading-1);
}
.lensfinder .lensfinder-heading-2 {
  font-size: var(--heading-2);
}
.lensfinder .lensfinder-heading-3 {
  font-size: var(--heading-3);
}
.lensfinder .lensfinder-bodycopy-1 {
  font-size: var(--bodycopy-1);
}
.lensfinder .lensfinder-bodycopy-2 {
  font-size: var(--bodycopy-2);
}
.lensfinder .lensfinder-bodycopy-3 {
  font-size: var(--bodycopy-3);
}
.lensfinder__in > .lensfinder__section:nth-child(2n) {
  background-color: #f2f2f2;
}
.lensfinder__in > .lensfinder__section:nth-child(2n+1) {
  background-color: #fff;
}
.lensfinder__section {
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-inline);
}
.lensfinder__section__in {
  max-width: 1280px;
  margin-inline: auto;
}

@media (min-width: 641px), (min-device-width: 1281px) {
  .lensfinder__section {
    padding-block: var(--section-padding-block) calc(2 * var(--section-padding-block));
  }
}
@media (max-width: 640px) and (max-device-width: 1280px) {
  .lensfinder {
    --section-padding-block: 32px;
    --section-padding-inline: 24px;
    --heading-1: 14.5px;
    --heading-2: 14.5px;
    --heading-3: 18px;
    --bodycopy-1: 10px;
    --bodycopy-2: 10px;
    --btn-height: 44px;
    --btn-padding-inline: 20px;
  }
}
.lensfinder .lensfinder-start {
  --heading-font-size: 32px;
  --heading-margin-bottom: 32px;
  --bodycopy-font-size: 18px;
  --btn-margin-top: 64px;
  text-align: center;
  background-color: #fff;
  padding-block-end: var(--section-padding-block);
}
.lensfinder .lensfinder-start__heading {
  margin-bottom: var(--heading-margin-bottom);
  font-size: var(--heading-font-size);
}
.lensfinder .lensfinder-start__bodycopy {
  font-size: var(--bodycopy-font-size);
}
.lensfinder .lensfinder-start__btn-area {
  margin-top: var(--btn-margin-top);
}

@media (max-width: 640px) and (max-device-width: 1280px) {
  .lensfinder .lensfinder-start {
    --heading-margin-bottom: 24px;
    --heading-font-size: 24px;
    --btn-margin-top: 48px;
  }
  .lensfinder .lensfinder-start__btn {
    width: fit-content;
  }
  .lensfinder .lensfinder-start__btn-area {
    margin-inline: 20px;
  }
}
.lensfinder .lensfinder-question {
  --heading-margin-bottom: 64px;
  --heading-text-margin-top: 64px;
  --heading-label-font-size: 26px;
  --heading-num-font-size: 32px;
  --heading-text-font-size: 32px;
  --options-gap: 48px 32px;
  --option-item-gap: 16px;
  --option-label-fontsize: 20px;
  --option-label-font-weight: 700;
  --option-icon-size: 24px;
}
.lensfinder .lensfinder-question__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--heading-margin-bottom);
}
.lensfinder .lensfinder-question__heading-label {
  font-weight: 700;
  font-size: var(--heading-label-font-size);
}
.lensfinder .lensfinder-question__heading-num {
  font-weight: 700;
  font-size: var(--heading-num-font-size);
}
.lensfinder .lensfinder-question__heading-text {
  margin-top: var(--heading-text-margin-top);
  font-size: var(--heading-text-font-size);
}
.lensfinder .lensfinder-question__options {
  display: grid;
  gap: var(--options-gap);
}
.lensfinder .lensfinder-question__option-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--option-item-gap);
  cursor: pointer;
}
.lensfinder .lensfinder-question__option-item:hover .lensfinder-question__option-img img {
  transform: scale(1.05);
}
.lensfinder .lensfinder-question__option-item:has(:focus-visible) {
  outline: auto;
}
.lensfinder .lensfinder-question__option-item.ng {
  display: none;
}
.lensfinder .lensfinder-question__option-input {
  position: absolute;
  opacity: 0;
}
.lensfinder .lensfinder-question__option-input:checked + .lensfinder-question__option-icon {
  background-color: #333;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAuMTYsMTcuMDFsLTQuNjMtNC42NGMtLjM5LS4zOS0uMzktMS4wMiwwLTEuNDEuMzktLjM5LDEuMDItLjM5LDEuNDEsMGwzLjIyLDMuMjIsNi45LTYuOWMuMzktLjM5LDEuMDItLjM5LDEuNDEsMCwuMzkuMzkuMzksMS4wMiwwLDEuNDFsLTguMzEsOC4zMVoiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBzdHlsZT0iZmlsbDpub25lOyIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
.lensfinder .lensfinder-question__option-icon {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: var(--option-icon-size);
  height: var(--option-icon-size);
  top: 10px;
  left: 10px;
  right: 10px;
  margin-inline-start: auto;
  background-color: #fff;
  border: 1px solid #333;
}
.lensfinder .lensfinder-question__option-img {
  order: -1;
  width: 100%;
  overflow: hidden;
}
.lensfinder .lensfinder-question__option-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
  transition: transform 0.2s;
}
.lensfinder .lensfinder-question__option-label {
  font-size: var(--option-label-fontsize);
  font-weight: var(--option-label-font-weight);
  text-align: center;
}

@media (max-width: 640px) and (max-device-width: 1280px) {
  .lensfinder .lensfinder-question {
    --heading-margin-bottom: 32px;
    --heading-text-margin-top: 32px;
    --heading-label-font-size: 19.2px;
    --heading-num-font-size: 19.2px;
    --heading-text-font-size: 14.5px;
    --option-label-fontsize: 11px;
    --option-label-font-weight: 400;
    --option-item-gap: 8px;
    --options-gap: 8px 10px;
    --option-icon-size: 18px;
  }
}
.lensfinder .lensfinder-q1 .lensfinder-question__option-img {
  aspect-ratio: 1;
}

@media (min-width: 641px), (min-device-width: 1281px) {
  .lensfinder .lensfinder-q1 .lensfinder-question__options {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) and (max-device-width: 1280px) {
  .lensfinder .lensfinder-q1 .lensfinder-question__options {
    grid-template-columns: repeat(2, 1fr);
  }
}
.lensfinder .lensfinder-q2 .lensfinder-question__option-img {
  aspect-ratio: 1;
}

@media (min-width: 641px), (min-device-width: 1281px) {
  .lensfinder .lensfinder-q2 .lensfinder-question__options {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 640px) and (max-device-width: 1280px) {
  .lensfinder .lensfinder-q2 .lensfinder-question__options {
    grid-template-columns: repeat(3, 1fr);
  }
}
.lensfinder .lensfinder-q3 .lensfinder-question__options {
  margin-inline: auto;
}
.lensfinder .lensfinder-q3 .lensfinder-question__option-img {
  aspect-ratio: 1;
}

@media (min-width: 641px), (min-device-width: 1281px) {
  .lensfinder .lensfinder-q3 .lensfinder-question__options {
    grid-template-columns: repeat(2, 1fr);
    width: calc(50% - 16px);
  }
}
@media (max-width: 640px) and (max-device-width: 1280px) {
  .lensfinder .lensfinder-q3 .lensfinder-question__options {
    grid-template-columns: repeat(2, 1fr);
    width: calc(66.6666666667% - 13.3333333333px + 10px);
  }
}
.lensfinder .lensfinder-result {
  --heading-gap: 64px 0;
  --heading-margin-bottom: 64px;
  --content-gap: 32px 32px;
  --content-heading-font-size: 32px;
}
.lensfinder .lensfinder-result__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--heading-gap);
  margin-bottom: var(--heading-margin-bottom);
  text-align: center;
}
.lensfinder .lensfinder-result__content {
  display: grid;
  gap: var(--content-gap);
}
.lensfinder .lensfinder-result__content-heading {
  font-size: var(--content-heading-font-size);
}
.lensfinder .lensfinder-result__content-img__img {
  width: 100%;
  aspect-ratio: 1;
}
.lensfinder .lensfinder-result__content-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lensfinder .lensfinder-result__content-img__caption {
  margin-top: 8px;
}
.lensfinder .lensfinder-result__content-img__caption-creator {
  display: inline-block;
}

@media (min-width: 641px), (min-device-width: 1281px) {
  .lensfinder .lensfinder-result__content {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
  }
  .lensfinder .lensfinder-result__content-img {
    order: -1;
    grid-row: span 2;
  }
}
@media (max-width: 640px) and (max-device-width: 1280px) {
  .lensfinder .lensfinder-result {
    --heading-gap: 0px;
    --heading-margin-bottom: 32px;
    --content-gap: 0px 20px;
    --content-heading-font-size: 14.5px;
  }
  .lensfinder .lensfinder-result__content-heading {
    margin-top: 16px;
  }
  .lensfinder .lensfinder-result__content-img {
    order: -1;
  }
  .lensfinder .lensfinder-result__content-img__caption {
    text-align: center;
  }
}
.lensfinder .lensfinder-result__lens {
  --lens-padding-block-start: 64px;
  --lens-padding-block-end: 64px;
  --lens-heading-margin-bottom: 64px;
  --list-gap: 64px 32px;
  --item-width: calc((100% - 20px * 3) / 4);
  --item-heading-gap: 16px;
  --item-model-font-size: 16px;
  --item-name-font-size:16px;
  --img-margin-bottom: 16px;
  --btn-margin-top: 64px;
  padding-block: var(--lens-padding-block-start) var(--lens-padding-block-end);
  margin-top: var(--lens-padding-block-start);
  border-block: 1px solid #ccc;
}
.lensfinder .lensfinder-result__lens-heading {
  margin-bottom: var(--lens-heading-margin-bottom);
  text-align: center;
}
.lensfinder .lensfinder-result__lens-list {
  display: grid;
  gap: var(--list-gap);
}
.lensfinder .lensfinder-result__lens-item {
  position: relative;
}
.lensfinder .lensfinder-result__lens-item-heading {
  flex-grow: 1;
  display: flex;
  gap: var(--item-heading-gap);
  flex-direction: column;
  text-align: center;
}
.lensfinder .lensfinder-result__lens-model {
  font-size: var(--item-model-font-size);
  font-weight: 700;
}
.lensfinder .lensfinder-result__lens-name {
  font-size: var(--item-name-font-size);
}
.lensfinder .lensfinder-result__lens-img {
  order: -1;
  max-width: 296px;
  width: 100%;
  margin-bottom: var(--img-margin-bottom);
  justify-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lensfinder .lensfinder-result__lens-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
}
.lensfinder .lensfinder-result__lens-btn-area {
  margin-inline: auto;
  margin-top: var(--btn-margin-top);
}
.lensfinder .lensfinder-result__lens-btn::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@media (min-width: 641px), (min-device-width: 1281px) {
  .lensfinder .lensfinder-result__lens-list {
    grid-template-columns: repeat(4, 1fr);
    margin-inline: auto;
  }
  .lensfinder .lensfinder-result__lens-item {
    grid-row: span 3;
    display: grid;
    gap: 0;
    grid-template-rows: subgrid;
  }
  .lensfinder .lensfinder-result__lens-name {
    font-weight: 700;
  }
  .lensfinder .lensfinder-result__lens-img {
    aspect-ratio: 1;
  }
  .lensfinder .lensfinder-result__lens-btn-area {
    width: calc(100% - 40px);
  }
}
@media (max-width: 640px) and (max-device-width: 1280px) {
  .lensfinder .lensfinder-result__lens {
    --list-gap: 32px 16px;
    --lens-padding-block-start: 16px;
    --lens-padding-block-end: 32px;
    --lens-heading-margin-bottom: 0px;
    --item-width: 100%;
    --item-heading-gap: 0px;
    --item-model-font-size: 19.2px;
    --item-name-font-size:13px;
    --img-margin-bottom: 0px;
    --btn-margin-top: 8px;
  }
  .lensfinder .lensfinder-result__lens-list {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  }
  .lensfinder .lensfinder-result__lens-item {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .lensfinder .lensfinder-result__lens-btn-area {
    width: 100%;
  }
  .lensfinder .lensfinder-result__lens-btn {
    padding-inline: 4px;
  }
}