.cm-comparison {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(112, 196, 235, .34);
  background: #071a33;
  color: #f5f9ff;
  padding: clamp(1.25rem, 3vw, 2.75rem);
}

.cm-comparison__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(17rem, .9fr);
  align-items: end;
  gap: clamp(1rem, 4vw, 4rem);
  padding-block: .5rem clamp(1.5rem, 3vw, 2.5rem);
}

.cm-comparison__title {
  max-width: 13ch;
  margin: 0;
  font: 800 clamp(2.25rem, 5vw, 5rem)/.9 "Proxima Nova", sans-serif;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.cm-comparison__intro {
  max-width: 62ch;
  margin: 0;
  color: #c8d8ea;
  font: 400 clamp(1rem, 1.4vw, 1.2rem)/1.5 "Myriad Pro", sans-serif;
}

.cm-comparison__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(151, 190, 224, .28);
  border-inline-start: 1px solid rgba(151, 190, 224, .28);
}

.cm-comparison__card {
  min-width: 0;
  border-inline-end: 1px solid rgba(151, 190, 224, .28);
  border-bottom: 1px solid rgba(151, 190, 224, .28);
  background: #0b2345;
}

.cm-comparison__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #06172d;
}

.cm-comparison__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}

.cm-comparison__card:hover .cm-comparison__media img { transform: scale(1.035); }

.cm-comparison__index {
  position: absolute;
  inset-block-start: .85rem;
  inset-inline-start: .85rem;
  display: grid;
  min-width: 2.5rem;
  min-height: 2.5rem;
  place-items: center;
  border: 1px solid #50c7e7;
  background: rgba(5, 20, 40, .9);
  color: #fff;
  font: 800 .78rem/1 "Proxima Nova", sans-serif;
  letter-spacing: .12em;
}

.cm-comparison__body { padding: clamp(1.15rem, 2.4vw, 2rem); }

.cm-comparison__family {
  margin: 0 0 .55rem;
  color: #62d7f0;
  font: 800 .72rem/1.2 "Proxima Nova", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.cm-comparison__name {
  margin: 0;
  font: 800 clamp(1.8rem, 3vw, 3rem)/.95 "Proxima Nova", sans-serif;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.cm-comparison__points {
  display: grid;
  gap: .65rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.cm-comparison__points li {
  position: relative;
  padding-inline-start: 1.45rem;
  color: #d8e4f1;
  font: 400 clamp(.95rem, 1.15vw, 1.08rem)/1.35 "Myriad Pro", sans-serif;
}

.cm-comparison__points li::before {
  content: "";
  position: absolute;
  inset-block-start: .43em;
  inset-inline-start: 0;
  width: .55rem;
  height: .55rem;
  border: 1px solid #50c7e7;
  transform: rotate(45deg);
}

.cm-comparison__link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1.4rem;
  border-bottom: 1px solid rgba(98, 215, 240, .65);
  padding-bottom: .35rem;
  color: #fff;
  font: 800 .8rem/1 "Proxima Nova", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}

.cm-comparison__link::after { content: "\2197"; font-size: 1.05rem; }
.cm-comparison__link:hover { color: #62d7f0; }
.cm-comparison__link:focus-visible { outline: 2px solid #62d7f0; outline-offset: 4px; }

[dir="rtl"] .cm-comparison { direction: rtl; }
[dir="rtl"] .cm-comparison__link::after { transform: scaleX(-1); }

@media (max-width: 760px) {
  .cm-comparison__head { grid-template-columns: 1fr; align-items: start; }
  .cm-comparison__title { max-width: 11ch; }
  .cm-comparison__grid { grid-template-columns: 1fr; }
  .cm-comparison__media { aspect-ratio: 4 / 2.1; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-comparison__media img { transition: none; }
}