.benefits-page {
  --b: 1px;
  background: var(--paper);
}

.benefits-main {
  background: var(--paper);
  padding: calc(70.5 * var(--b)) var(--gutter) calc(180 * var(--b));
}

.title-mobile,
.copy-mobile {
  display: none;
}

.benefits-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(34.35 * var(--b));
  width: min(100%, calc(1728 * var(--b)));
  margin: 0 auto;
  text-align: center;
}

.benefits-intro h1 {
  color: #002a4b;
  font-size: calc(72 * var(--b));
  line-height: calc(86.4 * var(--b));
}

.benefits-intro p {
  max-width: calc(1008 * var(--b));
  color: #42474e;
  font-size: calc(27 * var(--b));
  line-height: calc(43.2 * var(--b));
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows:
    calc(600 * var(--b))
    calc(750 * var(--b))
    calc(525 * var(--b))
    calc(675 * var(--b))
    calc(450 * var(--b));
  gap: calc(36 * var(--b));
  width: min(100%, calc(1728 * var(--b)));
  margin: calc(96 * var(--b)) auto 0;
  padding-bottom: calc(84 * var(--b));
}

.benefit-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: calc(18 * var(--b));
  background: #d9e6f8;
  box-shadow: 0 calc(1.5 * var(--b)) calc(3 * var(--b)) rgba(0, 0, 0, 0.05);
}

.benefit-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0, 42, 75, 0.9) 0%,
    rgba(0, 42, 75, 0.4) 50%,
    rgba(0, 42, 75, 0) 100%
  );
  content: "";
}

.benefit-art,
.benefit-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.benefit-art img {
  max-width: none;
  object-fit: cover;
}

.benefit-content {
  position: absolute;
  right: calc(48 * var(--b));
  bottom: calc(48 * var(--b));
  left: calc(48 * var(--b));
  z-index: 1;
  color: #ffffff;
}

.benefit-icon {
  width: auto;
  max-width: calc(72 * var(--b));
  height: auto;
  max-height: calc(44 * var(--b));
  margin-bottom: calc(24 * var(--b));
  object-fit: contain;
}

.benefit-card h3 {
  color: #ffffff;
  font-size: calc(48 * var(--b));
  font-weight: 600;
  line-height: calc(62.4 * var(--b));
}

.benefit-card p {
  max-width: calc(864 * var(--b));
  margin-top: calc(12 * var(--b));
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(24 * var(--b));
  line-height: calc(36 * var(--b));
}

.benefit-card-flexible {
  grid-column: 1 / span 8;
  grid-row: 1;
}

.benefit-card-remuneration {
  grid-column: 9 / span 4;
  grid-row: 1;
}

.benefit-card-career {
  grid-column: 1 / span 4;
  grid-row: 2;
}

.benefit-card-education {
  grid-column: 5 / span 4;
  grid-row: 2;
}

.benefit-card-medical {
  grid-column: 9 / span 4;
  grid-row: 2;
}

.benefit-card-compensation {
  grid-column: 1 / span 6;
  grid-row: 3;
}

.benefit-card-paternity {
  grid-column: 7 / span 6;
  grid-row: 3;
}

.benefit-card-birthday {
  grid-column: 1 / span 3;
  grid-row: 4;
}

.benefit-card-travel {
  grid-column: 4 / span 9;
  grid-row: 4;
}

.benefit-card-travel h3 {
  max-width: calc(900 * var(--b));
  font-size: calc(72 * var(--b));
  font-weight: 700;
  line-height: calc(86.4 * var(--b));
}

.benefit-card-team {
  grid-column: 1 / span 12;
  grid-row: 5;
}

.benefit-card-team .benefit-content {
  display: flex;
  align-items: center;
  gap: calc(36 * var(--b));
}

.benefit-card-team .benefit-icon {
  flex: 0 0 auto;
  max-width: calc(69 * var(--b));
  max-height: calc(31.442 * var(--b));
  margin-bottom: 0;
}

.benefit-card-team p {
  margin-top: 0;
}

@media (min-width: 1101px) and (max-width: 1919.98px) {
  .benefits-page {
    --b: var(--d);
  }
}

@media (max-width: 1100px) {
  .benefits-page {
    --b: var(--m);
  }

  .benefits-main {
    padding: calc(30.769 * var(--m)) var(--gutter) calc(226.346 * var(--m));
  }

  .title-pc,
  .copy-pc {
    display: none;
  }

  .title-mobile,
  .copy-mobile {
    display: inline;
  }

  .benefits-intro {
    gap: calc(15.385 * var(--m));
    width: min(100%, calc(673.077 * var(--m)));
  }

  .benefits-intro h1 {
    font-size: calc(53.846 * var(--m));
    font-weight: 600;
    line-height: calc(70 * var(--m));
  }

  .benefits-intro p {
    max-width: calc(615.385 * var(--m));
    font-size: calc(30.769 * var(--m));
    line-height: calc(46.154 * var(--m));
  }

  .benefits-grid {
    display: flex;
    flex-direction: column;
    gap: calc(46.154 * var(--m));
    width: min(100%, calc(673.077 * var(--m)));
    margin-top: calc(76.923 * var(--m));
    padding-bottom: 0;
  }

  .benefit-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: calc(1.923 * var(--m)) solid rgba(211, 228, 254, 0.3);
    border-radius: calc(23.077 * var(--m));
    background: #ffffff;
    padding: calc(1.923 * var(--m));
    box-shadow: 0 calc(7.692 * var(--m)) calc(38.462 * var(--m))
      calc(-3.846 * var(--m)) rgba(0, 42, 75, 0.08);
  }

  .benefit-card::after {
    display: none;
  }

  .benefit-art {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
    height: calc(369.231 * var(--m));
    overflow: hidden;
  }

  .benefit-art img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .benefit-content {
    position: relative;
    inset: auto;
    display: block;
    padding: calc(46.154 * var(--m));
    color: #002a4b;
  }

  .benefit-icon,
  .benefit-card p {
    display: none;
  }

  .benefit-card h3,
  .benefit-card-travel h3,
  .benefit-card-team h3 {
    max-width: none;
    color: #002a4b;
    font-size: calc(34.615 * var(--m));
    font-weight: 700;
    line-height: calc(55.385 * var(--m));
  }

  .benefit-card-team .benefit-content {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .benefits-main {
    padding-bottom: calc(60.346 * var(--m));
  }
}