:root {
  --new-york-blue: #14264b;
  --new-york-grey: #efeaea;
}

/* **************** */
/* HOMEPAGE SECTION */
/* **************** */

/* Flex on feed title an background color grey */
.new-york-times .feed-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: none;
  background-color: var(--new-york-grey);
  padding: 1rem 1.5rem 0.5rem;
  margin-bottom: 0;
}

/* Changed size and color of H2 tag - also removed spacing */
.new-york-times .feed-title .title h2 {
  margin-bottom: 0;
  font-size: 34px;
  color: var(--new-york-blue);
  padding-right: 0;
}

/* Width of the New york times Logo and a liitle negative margin for alighment */
.new-york-times .feed-title .sponsor {
  width: 350px;
  margin-bottom: -5px;
  margin-right: -0.7rem;
}

/* Container background color */
.new-york-times .swiper-container {
  background-color: var(--new-york-blue);
  padding: 1.5rem 1.5rem;
}

/* Item size and color */
.new-york-times .item {
  gap: 2rem;
  border-bottom: 3px solid white;
  padding-bottom: 1.5rem;
}

/* Item image size */
.new-york-times .item .item-image {
  flex-basis: 20%;
  max-width: 20%;
}

/* Image Border radius and aspect ratio */
.new-york-times .item .item-image a img {
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
}

/* Item title size and color */
.new-york-times .item .item-description h3 {
  font-size: 40px;
  color: white;
  max-width: 35ch;
}

.new-york-times .item .item-description h3 a {
  transition: all 0.3s ease;
}

@media (hover: hover) {
  .new-york-times .item .item-description h3 a:hover {
    color: var(--new-york-grey);
  }
}

/* Item paragraph color and max line 2 */
.new-york-times .item .item-description p {
  color: white;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limits text to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden; /* Hides overflowed text */
  max-width: 55ch;
}

/* Button controls container */
.new-york-times .custom-controls {
  display: flex;
  padding: 1.5rem 0 0;
  align-items: center;
}

/* Pagination */
.new-york-times
  .custom-controls
  .slider-pagination.swiper-pagination-fraction
  .swiper-pagination-current {
  position: relative;
  color: white;
}

.new-york-times .custom-controls .slider-pagination .swiper-pagination-total {
  color: white;
  position: relative;
}

/* Text after the count */
.new-york-times
  .custom-controls
  .slider-pagination
  .swiper-pagination-total:after {
  content: "Articles";
  margin-left: 0.4rem;
}

/* Seperator after the current page */
.new-york-times
  .custom-controls
  .slider-pagination.swiper-pagination-fraction
  .swiper-pagination-current:after {
  content: "/";
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}

/* Arrow buttons size and background */
.new-york-times .custom-controls .slider-prev,
.new-york-times .custom-controls .slider-next {
  background-color: white;
  width: 40px;
  height: 35px;
}

.new-york-times .custom-controls .slider-next {
  margin-left: 0.5rem;
}

/* Arrows entities with position absolute */
.new-york-times .custom-controls .slider-next:after,
.new-york-times .custom-controls .slider-prev:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  margin-top: -0.1rem;
}

/* Entities code of arrows for both buttons */
.new-york-times .custom-controls .slider-next:after {
  content: "\2192";
}

.new-york-times .custom-controls .slider-prev:after {
  content: "\2190";
}

@media screen and (max-width: 1170px) {
  /* Item image size */
  .new-york-times .item .item-image {
    flex-basis: 30%;
    max-width: 30%;
  }
}

@media screen and (max-width: 769px) {
  .new-york-times .feed-title {
    padding-bottom: 0;
    padding-top: 1.5rem;
  }

  .new-york-times .feed-title .title {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
  }

  .new-york-times .feed-title .title h2 {
    padding-right: 0;
    line-height: 1.1;
  }

  .new-york-times .feed-title .sponsor {
    width: 350px;
    margin: -0.4rem auto;
  }

  .new-york-times .custom-controls .slider-prev,
  .new-york-times .custom-controls .slider-next {
    width: 45px;
    height: 40px;
  }
}

@media screen and (max-width: 670px) {
  /* Item image size */
  .new-york-times .item .item-image {
    flex-basis: 60%;
    max-width: 60%;
    margin: auto;
  }

  .new-york-times .item .item-content {
    padding: 1.5rem 0;
  }

  .new-york-times .item .item-description h3 {
    font-size: 30px;
    max-width: 35ch;
    text-align: center;
  }

  .new-york-times .item .item-description p {
    margin-bottom: 0;
  }
}

/* ******* */
/* ARTICLE */
/* ******* */
.article.new-york-times-article {
    position: relative;
}

/* Background gradient color for section */
    .article.new-york-times-article:after {
        /*        content: "";
        position: absolute;
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        display: block;
        width: 100vw;
        max-width: 1920px;
        height: 60vh;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        background: rgb(20, 38, 75);
        background: linear-gradient( 180deg, rgba(20, 38, 75, 1) 40%, rgba(20, 38, 75, 0.8) 60%, rgba(20, 38, 75, 0.4) 80%, rgba(255, 255, 255, 1) 100% );
        z-index: 1;
*/
        content: "";
        position: absolute;
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        display: block;
        width: 100vw;
        max-width: 1920px;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        background: rgb(20, 38, 75);
        background: linear-gradient( 180deg, rgba(20, 38, 75, 1) 40%, rgba(20, 38, 75, 0.8) 60%, rgba(20, 38, 75, 0.4) 80%, rgba(255, 255, 255, 1) 100% );
        z-index: 1;
    }

body.skin-layout .article.new-york-times-article:after
{
    width: 100%;
}

/* z-index so the content will be above the after background */
    .article.new-york-times-article .article-title,
    .article.new-york-times-article .right,
    .article.new-york-times-article .advert-mobile-container {
        z-index: 10;
    }

    .article.new-york-times-article .article .left {
        border-right: none;
        z-index: 10;
    }

/* Color of the title elements ( h1, p etc. ) */
    .article.new-york-times-article .article-title h1,
    .article.new-york-times-article .article-title .breadcrumb a,
    .article.new-york-times-article .article-title .author-social .author h5 a,
    .article.new-york-times-article

    .article-title
    .author-social
    .author
    h5
    .article-date,
    .article.new-york-times-article
    .article
    .article-title
    .author-social
    .author
    h5
    a
    span:first-of-type,
    .article-date,
    .article.new-york-times-article .article-title p {
        color: white;
    }

    .article.new-york-times-article .article-title .author-social .author h5 a:after {
        content: ", The New York Times"
    }

/* Borders with opacity on title */
    .article.new-york-times-article .article-title .author-social {
        border-top: 4px solid #eeeeee4a;
        border-bottom: 4px solid #eeeeee4a;
    }

/* Change the uppercase so the new york times will not be all capital letters */
.article.new-york-times-article .article-title .author-social .author h5 a {
  text-transform: none;
}

/* Social background changed to white */
    .article.new-york-times-article .social li a {
        background-color: white;
        border: none;
    }

/* Media for the background height */
@media screen and (max-width: 670px) {
/*    .article.new-york-times-article:after {
        height: 90vh;
    }*/
}

/* ******** */
/* CATEGORY */
/* ******** */

.new-york-times-cat .feed-container:not(.feed-container ~ .feed-container) {
  position: relative;
  background-color: transparent !important;
}

body.skin-layout .new-york-times-cat
.feed-container:not(.feed-container ~ .feed-container)::after {
    width: 100%;
}

/* Pick the first feed container class and add background grey color with fixed height */
.new-york-times-cat
  .feed-container:not(.feed-container ~ .feed-container)::after {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  display: block;
  width: 100vw;
  max-width: 1920px;
  height: 330px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  background-color: var(--new-york-grey);
  z-index: 1;
}

/* Changed margins so the spacing will be less among the elements and removed borders */
.new-york-times-cat .category-marquee {
  position: relative;
  z-index: 10;
  background-color: transparent;
  margin-bottom: 0;
}

.new-york-times-cat .category-marquee .feed-title-line {
  margin-bottom: 0 !important;
}

.new-york-times-cat .category-marquee .feed-title-line p {
  font-weight: 700;
  margin-bottom: 0;
}

.new-york-times-cat
  .feed-container:not(.feed-container ~ .feed-container)
  .grid {
  z-index: 10;
  border-bottom: none;
}

.new-york-times-cat
  .feed-container:not(.feed-container ~ .feed-container)
  .grid
  .item:after {
  border: none;
}

/* H1 background color change so it will be able to break the after grey line */
.new-york-times-cat .category-marquee h1 span {
  background-color: var(--new-york-grey);
  line-height: 1.1;
}

/* New york times logo with percent width */
.new-york-times-cat .category-marquee .news-york-logo {
  width: 30%;
  margin: auto;
}

@media screen and (max-width: 1170px) {
  /* Add background color on the category marquee section only now */
  .new-york-times-cat .category-marquee {
    background-color: var(--new-york-grey);
    padding: 20px;
    margin-bottom: 20px;
  }

  /* Remove the after background color on feed container */
  .new-york-times-cat
    .feed-container:not(.feed-container ~ .feed-container)::after {
    height: 0;
  }

  /* Bigger logo  */
  .new-york-times-cat .category-marquee .news-york-logo {
    width: 40%;
  }
}

@media screen and (max-width: 670px) {
  /* Added padding so the title will not be on the edge of the section */
  .new-york-times-cat .category-marquee {
    padding: 1.5rem 1.5rem 0;
  }

  /* Bigger logo */
  .new-york-times-cat .category-marquee .news-york-logo {
    width: 80%;
  }
}


.article.new-york-times-article .breadcrumb {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .article.new-york-times-article .breadcrumb span {
        /*background-color: white;*/
        padding: 0.3rem 1rem;
        font-size: 20px;
        font-weight: 700;
        /*color: var(--new-york-blue);*/
        color: #FFF;
    }

/* Media for the background height */
@media screen and (max-width: 670px) {
    .article.new-york-times-article:after {
        height: 64vh;
    }

    .article.new-york-times-article .breadcrumb {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .article.new-york-times-article .breadcrumb span {
        padding-left: 0;
        padding-top: 0;
        font-size: 18px;
        line-height: 1rem;
    }
}

@media screen and (min-width: 671px) {
    .article.new-york-times-article:after {
        height: 56vh;
    }
}

@media screen and (min-width: 2000px) {
    .article.new-york-times-article:after {
        height: 45vh;
    }
}

@media screen and (min-width: 3000px) {
    .article.new-york-times-article:after {
        height: 30vh;
    }
}


.infiniteContainer
.new-york-times-cat
.feed-container:not(.feed-container ~ .feed-container)::after {
    background-color: white;
}

.infiniteContainer .new-york-times-cat .category-marquee h1 span {
    background-color: white;
}