/* =====================================================
   CLASICOH KARLS ADVANTAGE SECTION
===================================================== */

.advantage-section {
  background: #F4F5E8;
  color: var(--black);

  padding:
    70px var(--page-padding) 80px;

  display: grid;

  grid-template-columns:
    minmax(300px, 0.85fr)
    minmax(0, 1.4fr);

  gap: 80px;

  align-items: start;

  width: 100%;
  overflow: hidden;
}


/* =====================================================
   LEFT SIDE
===================================================== */

.advantage-intro {
  position: static;

  min-width: 0;

  align-self: start;

  margin: 0;

  padding-top: 30px;
}

.advantage-intro h2 {
  margin:
    0 0 22px 0;

  max-width: 500px;

  color: var(--black);

  font-size:
    clamp(42px, 4.2vw, 62px);

  line-height: 1;

  letter-spacing: -0.05em;
}

.advantage-intro h2 span {
  display: block;

  color: #7d8200;
}

.advantage-description {
  max-width: 450px;

  margin: 0;

  color:
    rgba(4, 3, 21, 0.62);

  font-size: 15px;

  line-height: 1.65;
}


/* =====================================================
   RIGHT SIDE
===================================================== */

.advantage-list {
  width: 100%;

  min-width: 0;

  border-top:
    1px solid rgba(4, 3, 21, 0.16);
}

.advantage-item {
  width: 100%;

  min-height: 145px;

  padding:
    30px 0;

  display: grid;

  grid-template-columns:
    48px minmax(0, 1fr);

  gap: 22px;

  border-bottom:
    1px solid rgba(4, 3, 21, 0.16);

  transition:
    transform 0.25s ease;
}

.advantage-item:hover {
  transform:
    translateX(6px);
}


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

.advantage-icon {
  width: 42px;
  height: 42px;

  display: flex;

  align-items: flex-start;
  justify-content: center;

  color: #929800;

  font-size: 25px;

  font-weight: 700;

  line-height: 1;
}


/* =====================================================
   CONTENT
===================================================== */

.advantage-content {
  min-width: 0;
}

.advantage-content h3 {
  margin:
    0 0 12px 0;

  color: var(--black);

  font-size: 22px;

  line-height: 1.25;

  font-weight: 750;

  letter-spacing: -0.02em;
}

.advantage-content p {
  max-width: 720px;

  margin: 0;

  color:
    rgba(4, 3, 21, 0.62);

  font-size: 14px;

  line-height: 1.75;
}

.advantage-item:hover .advantage-content h3 {
  color: #777c00;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

  .advantage-section {
    display: block;

    padding:
      80px var(--page-padding);

    width: 100%;
  }

  .advantage-intro {
    position: static;

    width: 100%;

    max-width: 700px;

    margin-bottom: 50px;

    padding-top: 0;
  }

  .advantage-intro h2 {
    max-width: 700px;

    font-size:
      clamp(42px, 7vw, 58px);
  }

  .advantage-list {
    width: 100%;
  }

  .advantage-item {
    grid-template-columns:
      42px minmax(0, 1fr);

    gap: 20px;
  }
}


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

@media (max-width: 600px) {

  .advantage-section {
    display: block;

    width: 100%;

    padding:
      65px 18px;

    overflow: hidden;
  }

  .advantage-intro {
    position: static;

    width: 100%;

    max-width: none;

    margin:
      0 0 42px 0;

    padding-top: 0;
  }

  .advantage-intro h2 {
    width: 100%;

    max-width: none;

    margin-bottom: 18px;

    font-size: 38px;

    line-height: 1.04;

    letter-spacing: -0.04em;
  }

  .advantage-intro h2 span {
    display: inline;
  }

  .advantage-description {
    width: 100%;

    max-width: none;

    font-size: 15px;

    line-height: 1.65;
  }

  .advantage-list {
    width: 100%;

    border-top:
      1px solid rgba(4, 3, 21, 0.16);
  }

  .advantage-item {
    width: 100%;

    min-height: auto;

    padding:
      28px 0;

    grid-template-columns:
      32px minmax(0, 1fr);

    gap: 16px;

    transform: none;
  }

  .advantage-item:hover {
    transform: none;
  }

  .advantage-icon {
    width: 28px;
    height: 28px;

    font-size: 21px;

    justify-content: flex-start;
  }

  .advantage-content {
    width: 100%;

    min-width: 0;
  }

  .advantage-content h3 {
    margin-bottom: 10px;

    font-size: 20px;

    line-height: 1.3;
  }

  .advantage-content p {
    width: 100%;

    max-width: none;

    font-size: 14px;

    line-height: 1.7;
  }
}