ORIENT/themes/modern2/assets/new/styles/main/_main-news.scss

.main-news-inner {
  // @include flex;
  gap: 1.5rem;
  //
  display: grid;
  grid-template-columns: 71% auto;
  align-items: stretch;
}

.main-inner-content {
  @include stretch;
  @include flex(column);
  gap: 4.2rem;
}

.main-news-lead {
  width: 100%;
  // max-width: 71%;
  position: relative;
  @include flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.main-news-bg {
  @include imgStyle($objFit: cover);
}

.main-news-overlay {
  z-index: 1;
  @include stretch;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.main-news-info {
  padding: 0 2.7rem;
  z-index: 2;
  position: absolute;
  bottom: 3.2rem;
  gap: 1rem;
  left: 0rem;
  width: 100%;
  @include flex(column);
}

.main-news-info-title {
  @include flex;
  gap: 0.4rem;

  span {
    font-size: 1.4rem;
    color: $base-white;
  }

  h3 {
    font-weight: bold;
    font-size: 1.6rem;
    color: $base-red;
    letter-spacing: 0.1em;
  }

  h4 {
    font-size: 1.4rem;
    color: $base-white;
  }
}

.main-news-info-content {
  // font-size: 1.8rem;
  font-size: 2rem;
  color: $base-white;
  line-height: 2.179rem;
  font-weight: bold;
}

.main-news-container {
  padding-right: 0;
}

.main-news-min {
  @include stretch;
  // max-width: 29%;
  @include flex(column);
  gap: 1.7rem;

  //
  justify-content: space-between;
}

.main-news-min-item {
  position: relative;
  height: 30%;
}

.main-news-min-bg {
  @include imgStyle($objFit: cover);
  // height: 40rem;
}

.main-news-min-info {
  position: absolute;
  padding: 0 1.2rem;
  left: 0;
  bottom: 0.7rem;
  display: block;
  // font-size: 1.2rem;
  font-size: 1.5rem;
  // line-height: 1.6rem;
  line-height: 2rem;
  color: $base-white;
  z-index: 2;
  font-weight: bold;
  text-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
}

.mainNewsSwiper {
  display: none;
}

.photo-scroller {
  overflow: hidden;
  @include flex();
  align-items: center;
  grid-template-columns: 1fr;
  align-items: center;
  z-index: 9999999999999999999999999999999999999999999999999999999;
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
  @include transition-std;
  .photo-scroller-inner {
    transform: scale(0.9);
    @include transition-std;
  }

  &.active {
    @include transition-std;
    opacity: 1;
    pointer-events: all;
    .photo-scroller-inner {
      transform: scale(1);
      @include transition-std;
    }
  }
}

.mainAdvertSwiper {
  .swiper-slide {
    height: 17rem;
  }
}

.photoScrollerSwiper {
  width: 100%;
  height: 100%;
  margin: auto auto;

  .swiper-slide {
    @include flex;
    justify-content: center;
  }
}
.photo-scroller-inner {
  position: relative;
  padding: 2rem 5rem;
  display: grid;
}

.photo-scroller-item {
  @include imgStyle(70rem, 50rem);
  @include flex;
  justify-content: center;
  align-items: center;
}

.photo-scroller-closer {
  transform: scale(1) !important;
  position: absolute;
  top: -25%;
  right: 4rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.photo-scroller-next,
.photo-scroller-prev {
  top: 40% !important;
  img {
    pointer-events: none;
  }
}

// Media
@media screen and (max-width: 1070px) {
  .main-news-min-bg {
    height: 40rem;
  }
  .mainNewsSwiper {
    display: block;
  }
  .main-news-inner {
    display: block;
  }
  .main-news-lead {
    display: none;
  }
  .main-news-min {
    display: none;
  }
  .main-news-container {
    padding-right: 4rem;
  }
  .main-inner {
    @include flex(column);
  }
}

@media screen and (max-width: 950px) {
  .main-news-min {
    display: none;
  }
  .main-news-lead {
    max-width: unset;
  }
  .main-news-container {
    max-width: unset;
    padding: 0;
  }
  .main-news-info-title {
    font-size: 1.5rem;
  }
  .main-news-info-content {
    font-size: 1.7rem;
  }
  .main-inner-content {
    gap: 2.5rem;
  }
}

@media screen and (max-width: 500px) {
  .main-news-min-bg {
    height: 30rem;
  }
}