/* =========================================================
   WHY ASSETS
========================================================= */

.why-assets {
  position: relative;

  z-index: 40;

  background: var(--white);

  padding:
    80px
    0;
}

.why-assets-spacer {
  height: 30vh;
}


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

.why-assets-header {
  width:
    calc(100% - 160px);

  margin:
    0 auto
    50px;
}

.why-assets-title {
  max-width:
    100%;

  font-size:
    var(--headline-lg);

  line-height:
    var(--line-tight);

  letter-spacing:
    var(--tracking-tight);

  font-weight:
    var(--weight-bold);

  color:
    var(--dark);

  text-wrap:
    balance;
}



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

.why-assets-split {
  display: flex;
  width: 70%;

  justify-content: space-between;

  align-items: flex-start;

  margin-bottom: var(--space-xl);
}

.why-assets-split-left {
  display: flex;

  flex-direction: column;

  gap: var(--space-sm);
}

.why-assets-split-right {
  text-align: right;
}

.why-assets-split-right h2 {
  margin: 0;
}



/* =========================================================
   GRID
========================================================= */

.why-assets-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    24px;

  width:
    calc(100% - 160px);

  margin:
    0 auto;
}


/* =========================================================
   CARD
========================================================= */

.why-assets-card {
  padding:
    36px;

  border-radius:
    36px;

  background:
    rgba(255,255,255,0.72);

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);

  border:
    1px solid rgba(255,255,255,0.6);

  box-shadow:
    0 20px 60px rgba(15,17,58,0.05);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.why-assets-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 30px 80px rgba(15,17,58,0.08);
}


/* =========================================================
   TITLE
========================================================= */

.why-assets-card-title {
  margin-bottom:
    28px;

  font-size:
    clamp(2rem, 2.4vw, 2.8rem);

  line-height:
    0.94;

  letter-spacing:
    -0.05em;

  font-weight:
    var(--weight-semibold);

  color:
    var(--dark);
}


/* =========================================================
   COPY
========================================================= */

.why-assets-copy {
  color:
    rgba(15,17,58,0.48);

  font-size:
    1.05rem;

  line-height:
    1.55;
}


/* =========================================================
   VISUAL
========================================================= */

.why-assets-visual {
  margin-top:
    48px;

  height:
    160px;

  overflow:
    hidden;

  border-radius:
    22px;

  background:
    rgba(15,17,58,0.03);
}

.why-assets-visual img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  display:
    block;
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

  .why-assets-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 980px) {

  .why-assets {
    padding:
      120px
      0;
  }

  .why-assets-header {
    width:
      calc(100% - 48px);

    margin-bottom:
      60px;
  }

.why-assets-split {
  flex-direction:
    column;

  gap:
    32px;
}

.why-assets-split-right {
  text-align:
    left;
}

  .why-assets-grid {
    width:
      calc(100% - 48px);

    grid-template-columns:
      1fr;
  }

}