/* =========================
   ATMOSPHERE
========================= */

.atmosphere-section{

  padding:90px 7%;

  background:#0f0f0f;

}

/* =========================
   HEAD
========================= */

.atmosphere-head{

  text-align:center;

  margin-bottom:48px;

}

.atmosphere-label{

  font-size:.78rem;

  letter-spacing:6px;

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

  margin-bottom:16px;

  text-transform:uppercase;

}

.atmosphere-title{

  font-size:
  clamp(2.1rem, 4vw, 3.8rem);

  line-height:1;

  font-weight:300;

  color:#fff;

  margin-bottom:16px;

}

.atmosphere-text{

  font-size:
  clamp(.95rem,1.4vw,1.08rem);

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

  max-width:620px;

  margin:auto;

  line-height:1.6;

}

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

.atmosphere-layout{

  display:grid;

  grid-template-columns:
  1.2fr .78fr;

  gap:16px;

  max-width:1280px;

  margin:auto;

}

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

.atmosphere-left{

  display:flex;

  flex-direction:column;

  gap:16px;

}

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

.atmosphere-right{

  display:flex;

  flex-direction:column;

  gap:16px;

}

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

.small-row{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:16px;

}

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

.media-card{

  position:relative;

  overflow:hidden;

  border-radius:22px;

  background:#171717;

}

/* =========================
   BIG VIDEO
========================= */

.big-video{

  height:390px;

}

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

.small-card{

  height:190px;

}

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

.right-card{

  height:288px;

}

/* =========================
   MEDIA
========================= */

.media-card img,
.media-card video{

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:.6s ease;

}

/* =========================
   HOVER
========================= */

.media-card:hover img,
.media-card:hover video{

  transform:scale(1.03);

}

/* =========================
   OVERLAY
========================= */

.media-card::after{

  content:"";

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    180deg,
    rgba(0,0,0,.02),
    rgba(0,0,0,.14)
  );

}

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

@media(max-width:991px){

  .atmosphere-layout{

    grid-template-columns:1fr;

  }

  .right-card{

    height:220px;

  }

}

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

@media(max-width:768px){

  .atmosphere-section{

    padding:75px 20px;

  }

  .atmosphere-head{

    margin-bottom:36px;

  }

  .atmosphere-title{

    font-size:2.3rem;

    line-height:1.05;

  }

  .atmosphere-text{

    font-size:.98rem;

  }

  .big-video{

    height:300px;

  }

  .small-card{

    height:170px;

  }

}

/* =========================
   EXTRA SMALL
========================= */

@media(max-width:560px){

  .small-row{

    grid-template-columns:1fr;

  }

  .big-video{

    height:250px;

  }

  .small-card,
  .right-card{

    height:210px;

  }

}