/* =========================================================
   Mizunara Studio
   Component / Comparison
========================================================= */

/* =========================================================
   TABLE
========================================================= */

.comparison-table {
  max-width: 850px;

  margin:
    45px
    auto
    0;

  overflow: hidden;

  border-radius: 28px;
}

/* =========================================================
   ROW
========================================================= */

.comparison-row {
  display: grid;

  grid-template-columns:
    2fr
    1fr
    1fr;

  align-items: center;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.28);
}

.comparison-row:last-child {
  border-bottom: none;
}

.comparison-row div {
  padding:
    14px
    20px;

  text-align: center;
}

.comparison-row div:first-child {
  text-align: left;

  font-weight: 500;
}

/* =========================================================
   HEADER
========================================================= */

.comparison-head {
  background:
    rgba(255, 255, 255, 0.45);

  font-weight: 700;
}

/* =========================================================
   ICON
========================================================= */

.compare-icon {
  display: block;

  width: 34px;
  height: 34px;

  margin:
    0
    auto;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .comparison-table {
    width: 100%;

    overflow: hidden;
  }

  .comparison-row {
    min-width: 0;

    grid-template-columns:
      1.4fr
      0.8fr
      0.8fr;
  }

  .comparison-row div {
    padding:
      12px
      8px;

    font-size: 0.82rem;
  }

  .comparison-row div:first-child {
    font-size: 0.82rem;
  }

  .compare-icon {
    width: 20px;
    height: 20px;
  }
}