/* =================================
   Pros & Cons
================================= */

.pros-cons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;

  /*margin: 42px 0;*/
}

/* =================================
   Card
================================= */

.pros-cons__box {
  position: relative;
  overflow: hidden;

  padding: 28px;

  border-radius: 24px;
  border: 1px solid rgba(246, 189, 59, 0.18);

  background:
    radial-gradient(circle at 100% 0%, rgba(246, 189, 59, 0.06), transparent 32%),
    linear-gradient(180deg, #111315 0%, #070809 100%);

  box-shadow:
    0 22px 56px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255,255,255,.03);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.pros-cons__box::before {
  content: '';

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #f6bd3b,
    #ffe18a,
    #f6bd3b,
    transparent
  );

  opacity: .8;
}

.pros-cons__box:hover {
  transform: translateY(-5px);

  border-color: rgba(246,189,59,.42);

  box-shadow:
    0 30px 70px rgba(0,0,0,.42),
    0 0 30px rgba(246,189,59,.08);
}

/* =================================
   Title
================================= */

.pros-cons__title {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 22px;

  color: #f8f8f8;

  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

.pros-cons__box--pros .pros-cons__title {
  color: #ffe18a;
}

.pros-cons__box--cons .pros-cons__title {
  color: #ff8d8d;
}

/* =================================
   List
================================= */

.pros-cons__box ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.pros-cons__box li {
  position: relative;

  margin-bottom: 14px;
  padding-left: 34px;

  color: rgba(255,255,255,.66);

  font-size: 15px;
  line-height: 1.75;
}

.pros-cons__box li:last-child {
  margin-bottom: 0;
}

/* =================================
   Icons
================================= */

.pros-cons__box--pros li::before,
.pros-cons__box--cons li::before {
  position: absolute;
  left: 0;
  top: 1px;

  width: 22px;
  height: 22px;

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

  border-radius: 50%;

  font-size: 12px;
  font-weight: 900;
}

.pros-cons__box--pros li::before {
  content: '✓';

  background: rgba(246,189,59,.12);
  border: 1px solid rgba(246,189,59,.24);

  color: #ffe18a;
}

.pros-cons__box--cons li::before {
  content: '✕';

  background: rgba(255,107,107,.10);
  border: 1px solid rgba(255,107,107,.22);

  color: #ff8d8d;
}

/* =================================
   Responsive
================================= */

@media (max-width:768px){

  .pros-cons{
    grid-template-columns:1fr;
    gap:18px;
  }

  .pros-cons__box{
    padding:22px;
    border-radius:20px;
  }

  .pros-cons__title{
    font-size:21px;
  }

  .pros-cons__box li{
    font-size:14px;
  }

}