/* Build 44: photographic comparison cards in section 01. */
.editorial-site .p-options > article{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  border:0;
  background-position:center;
  background-size:cover;
  box-shadow:0 24px 54px rgba(14,42,58,.12);
}
.editorial-site .p-options > article::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(8,29,39,.17) 0%,rgba(8,29,39,.35) 42%,rgba(8,29,39,.93) 100%);
}
.editorial-site .p-options > article::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(8,29,39,.42),transparent 62%);
}
.editorial-site .p-options > article:nth-child(1){
  background-image:url("assets/selection/hotel-a-shallow-water-v2.jpg");
  background-position:46% center;
}
.editorial-site .p-options > article:nth-child(2){
  background-image:url("assets/selection/hotel-b-waterpark-v1.jpg");
  background-position:58% 46%;
}
.editorial-site .p-options > article:nth-child(3){
  background-image:url("assets/selection/hotel-c-transfer-route-v3.jpg");
  background-position:center;
}
.editorial-site .p-options .p-option-label,
.editorial-site .p-options .p-chosen .p-option-label{
  color:rgba(255,255,255,.82);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.editorial-site .p-options h4,
.editorial-site .p-options li{
  color:#fff;
  text-shadow:0 1px 18px rgba(2,16,22,.2);
}
.editorial-site .p-options li{
  position:relative;
  padding-left:17px;
}
.editorial-site .p-options li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#86c9cd;
}
.editorial-site .p-options article > p,
.editorial-site .p-options .p-chosen > p{
  color:rgba(255,255,255,.72);
}
.editorial-site .p-recommendation{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.34);
}
.editorial-site .p-recommendation span{
  display:block;
  color:#9bd5d8;
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  line-height:1.4;
  text-transform:uppercase;
}
.editorial-site .p-recommendation p{
  max-width:38ch;
  margin-top:10px;
  color:#fff;
  font-size:15px;
  line-height:1.6;
}
.editorial-site .p-selection + .p-personal{
  border-top:0!important;
}
@media (min-width:1025px){
  .editorial-site .p-options > article{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:38px 42px 34px;
    min-height:265px;
  }
  .editorial-site .p-options .p-chosen{
    padding:64px 68px;
    min-height:550px;
  }
  .editorial-site .p-options .p-chosen h4{font-size:clamp(48px,4.2vw,68px);margin:25px 0 20px}
  .editorial-site .p-options .p-chosen li{font-size:19px;line-height:1.75}
  .editorial-site .p-options .p-chosen > p{font-size:15px}
  .editorial-site .p-options > article:not(.p-chosen) h4{font-size:clamp(34px,2.65vw,42px);margin:13px 0 10px}
  .editorial-site .p-options > article:not(.p-chosen) li{font-size:15.5px;line-height:1.5}
  .editorial-site .p-options > article:not(.p-chosen) > p{font-size:13.5px}
  .editorial-site .p-options > article:not(.p-chosen) .p-option-label{margin-bottom:0}
  .editorial-site .p-options > article:not(.p-chosen) ul{gap:3px}
  .editorial-site .p-options > article:not(.p-chosen) > p{margin-top:9px}
}
@media (min-width:721px) and (max-width:1024px){
  .editorial-site .p-options{
    grid-template-columns:1.1fr .9fr;
    grid-template-areas:"chosen second" "chosen third";
    gap:20px;
  }
  .editorial-site .p-options > article{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:32px;
    min-height:280px;
  }
  .editorial-site .p-options .p-chosen{
    grid-area:chosen;
    min-height:580px;
    padding:46px;
  }
  .editorial-site .p-options > article:nth-child(2){grid-area:second}
  .editorial-site .p-options > article:nth-child(3){grid-area:third}
  .editorial-site .p-options h4{font-size:34px}
  .editorial-site .p-options li{font-size:16px}
  .editorial-site .p-options article > p{font-size:14px}
  .editorial-site .p-recommendation{margin-top:22px;padding-top:17px}
  .editorial-site .p-recommendation p{font-size:14px}
}
@media (max-width:720px){
  .editorial-site .p-options{gap:18px}
  .editorial-site .p-options > article,
  .editorial-site .p-options .p-chosen{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:390px;
    padding:34px 28px 30px;
  }
  .editorial-site .p-options > article:nth-child(2),
  .editorial-site .p-options > article:nth-child(3){min-height:330px}
  .editorial-site .p-options .p-option-label{margin-bottom:14px}
  .editorial-site .p-options h4{font-size:34px;margin-bottom:18px}
  .editorial-site .p-options li{font-size:17px;line-height:1.65}
  .editorial-site .p-options article > p{font-size:14px;margin-top:16px}
  .editorial-site .p-recommendation{margin-top:24px;padding-top:18px}
  .editorial-site .p-recommendation p{font-size:15px;line-height:1.55}
}
@media (prefers-reduced-motion:no-preference){
  .editorial-site .p-options > article{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .editorial-site .p-options > article:hover{transform:translateY(-3px)}
}