.trending-now .trending-lock {
	max-width: 1309px;
	margin: 0 auto;
	justify-content: space-between;
}
.trending-now .left-feature img {
    width: 100%;
  height: 626px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.trending-now .scroll-item img {
 width: 100%;
 height: 302px;
 display: block;
 object-fit: cover;
 object-position: center;
}
.trending-now a {
  text-decoration: none;
}
.trending-now a:hover {
  opacity: 1;
}
.trending-now a:hover h2, .trending-now a:hover h3 {
  color: #7B3930;
}
.trending-now a:hover img {
  opacity: 0.6;
}
.trending-now a img {
  width: 31px;
  height: 15px;
  transition: all 0.5s;
}
.trending-now .scroll-meta h3 {
 font-size: 22px;
 font-style: normal;
 font-weight: 100;
 line-height: 115%;
 letter-spacing: -0.44px;
}
.trending-now .cat {
 color: #7B3930;
 font-family: "Haboro Serif";
 font-size: 14px;
 font-style: normal;
 font-weight: 100;
 line-height: normal;
 letter-spacing: 0.6px;
 text-transform: uppercase;
 margin: 15px 0 11px;
 display: block;
 transition: all 0.5s;
}
.trending-now a:hover .cat:before {
  content:"";
  display: inline-block;
  width:9px;
  height:9px;
  border-radius: 50%;
  background: #7B3930;
  margin:0 20px 0 0;
}
.trending-now .cat:before {
  content:"";
  display: inline-block;
  width:0;
  height:0;
  background: #7B3930;
  margin:0 0 0 0;
  transition: all 0.5s;
}
.trending-now .right-scroll .cat {
  margin: 12px 0 -1px;
}
.trending-now .right-scroll .scroll-inner a {
  border-bottom: 1px solid black;
  padding-bottom: 45px;
  margin-bottom: 26px;
}
.trending-now .right-scroll .scroll-inner a.scroll-item:last-child {
  border-bottom:none;
}
.trending-now .feature-meta h2 {
    padding: 0;
  color: black;
  display: block;
  font-size: 34px;
  font-style: normal;
  font-weight: 100;
  line-height: 110%;
  letter-spacing: -0.68px;
}

.trending-now .feature-meta h2, 
.trending-now .scroll-meta h3 {
  margin: 5px 0 0;
}

.trending-now .trending-block {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  overflow: hidden;
  width: 68.5%;
 height: 845px;
}
.trending-now .left-feature:after {
 content: "";
 display: block;
 width: 1px;
 height: 100%;
 background: black;
 position: absolute;
 top: 0;
 right: -46px;
}
.trending-now .left-feature {
    position: sticky;
  top: 0;
  width: 504px;
  align-self: start;
  padding-bottom: 45px;
}
.trending-now .col1 {
  display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 637px;
    margin-top: -10px;
}
.trending-now .col1 h2 {
  font-size: 68px;
  text-transform: uppercase;
  margin: 0 0 -8px;
  letter-spacing: -1.36px;
}
.trending-now .col1 .subtitle {
  display: flex;
    font-family: 'Haboro';
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}
.trending-now .col1 .button {
  display: flex;
      width: 160px;
      height: 25px;
      justify-content: space-between;
      transition: all 0.5s;
}
.trending-now .col1 .button:hover {
  opacity: 1;
  background-color: #F7EFE8;
}

.trending-now .col1 .dot {
    margin: 6px 15px 0 6px;
}
.trending-now .right-scroll {
  height: 100%;
  overflow-y: hidden; /* scrolling controlled by JS */
  width: 302px;
}

.trending-now .scroll-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.trending-now  {
    border-bottom: 1px solid black;
    padding: 79px 0 20px;
}
@media all and (max-width:1310px) {
  .trending-now .trending-lock {
    max-width:1200px;
  }
  .trending-now .trending-block {
    width: 75.5%;
  }
}
@media all and (max-width:1200px) {
  .trending-now .trending-lock {
    max-width: 1000px;
  }
  .trending-now .trending-block {
    width: 80.5%;
  }
  .trending-now .left-feature {
    width: 409px;
  }
}
@media all and (max-width:1040px) {
  .trending-now .trending-lock {
    max-width: 95%;
    display: block;
  }
  .trending-now .col1 {
    height: auto;
    margin: 0 auto 20px;
  }
  .trending-now .col1 .button {
    display: none;
  }
  .trending-now {
    padding: 40px 0 20px;
  }
  .trending-now .trending-block {
    width: 100%;
  }
  .trending-now .left-feature {
    width: 88%;
  }
  .trending-now .right-scroll{
    overflow:scroll;
  }
}
@media all and (max-width:768px) {
  .trending-now .trending-block {
    display:block;
  }
  .trending-now .left-feature {
    width: 100%;
  } 
  .trending-now .left-feature:after {
    display: none;
  }
  .trending-now .scroll-inner {
    gap: 20px;
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0;
    list-style: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    grid-auto-columns: calc((100% - (2 * 10px)) / 3);
  }
  .trending-now .right-scroll {
    overflow: initial;
    width: 100%;
  }
  .trending-now .trending-block {
    height:auto;
  }
  .trending-now .right-scroll .scroll-inner a {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 26px;
    min-width: calc((100% - (5 * 10px)) / 6);
    box-sizing: border-box;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
}
@media all and (max-width:650px) {
  .trending-now .scroll-inner {
    grid-auto-columns: calc((100% - (2 * 10px)) / 2.5);
  }
  .trending-now .trending-lock {
    max-width: 100%;
    display: block;
  }
  .trending-now .col1 {
    height: auto;
    margin: 0 auto 20px;
    max-width: 95%;
  }
  .trending-now .left-feature {
    width: 95%;
    margin: 0 auto 40px;
    border-bottom: 1px solid black;
    padding-bottom: 20px;
  }
  .trending-now .left-feature img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 4 / 5;
  }
  .trending-now .right-scroll {
    overflow: initial;
    width: 100%;
    padding-left: 2.5%;
  }
}
@media all and (max-width:550px) {
  .trending-now .scroll-inner {
    grid-auto-columns: calc((100% - (2 * 10px)) / 1.5);
  }
}