:root {
  --color-grey-text: #363636;
  --color-grey-container: #f5f5f5;
  --color-grey-hover: #dbdbdb;

  --color-red: #db0c0c;
  --color-white: #ffffff;

  --font-noto: "Noto Sans Condensed", sans-serif;
}

.story__readmore {
  max-width: 100vw;
  /* margin-inline: 3.2rem; */
  margin-block-end: 4rem;

  .swiper-wrapper {
    gap: 0rem;

    @media only screen and (min-width: 1025px) {
      column-gap: 2rem;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(5, auto);
    }

    .swiper-pagination {
      bottom: 0;
    }
  }

  .readmore__wrapper {
    @media only screen and (max-width: 1024px) {
      padding-block-end: 2.7rem;

      width: calc(100% - 4.8rem); /* spacing on the Bricks wrapper */

      &.stacked {
        .swiper-wrapper {
          display: flex;
          flex-flow: column;
          gap: 2rem;
        }
      }
    }
  }

  h2 {
    margin-block-end: 5rem;
  }

  .readmore__story {
    display: grid;

    grid-row: span 5;
    grid-template-rows: subgrid;

    padding: 2rem;

    /* background-color: var(--color-white); */
    background-color: var(--color-grey-container);

    h3 {
      font-size: 1.8rem;

      margin-block-end: 1rem;

      grid-row: 1;
    }

    .card__title {
      color: inherit;
      text-decoration: none;
      transition: color ease 0.3s;

      &:hover {
        color: var(--color-red);
      }
    }

    .card__excerpt {
      margin-block-end: 2.5rem;
      grid-row: 2;

      p {
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;

        margin-block-end: 0;
      }
    }

    img {
      height: auto;
      width: 100%;

      aspect-ratio: 220 / 146.74;

      object-fit: cover;

      grid-row: 3;
    }

    .card__tag-wrapper {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      gap: 1.6rem;

      list-style: none;

      padding: 0;

      grid-row: 4;

      align-content: flex-start;

      li {
        a {
          display: inline-block;

          line-height: 150%;
          padding: 0.8rem;

          background-color: var(--color-white);
          transition: background-color ease 0.3s;

          &:hover {
            background-color: var(--color-grey-hover);
          }
        }
      }
    }

    .card__read-more {
      grid-row: 5;

      font-size: 1.5rem;
      line-height: 150%;

      text-align: right;

      transition: color ease 0.3s;

      &:hover {
        color: var(--color-red);
      }
    }
  }
}