:root {
  --margin-bottom: 2em;
  --font-size: clamp(20px, 2.5vw, 1.5em);
  --font-size-h3: clamp(28px, 2.5vw, 1.5em);
}
/* Start Article Card */

.article-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  border: solid 3px var(--color-white);
  border-radius: 1em;

  .thumbnail {
    display: flex;
    max-height: 120px;
    width: 100%;
    /* Workaround for rounded corners of the images -> to remove when images are changed */
    background-color: white;

    img {
      width: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .content {
    flex: 1;
    margin: 1.5rem;
    position: relative;

    display: grid;
    align-content: space-between;

    .category {
      font-family: var(--font-title-bold);
      font-size: 17px;
      margin: 0;
      z-index: 1;

      small {
        font-family: var(--font-title-regular);
        font-weight: 100;
      }
    }

    .decorator {
      position: absolute;
      top:0;
      right: 0;
      max-width: 45px;
      z-index: -1;
    }

    .article-title {
      font-size: var(--font-size-h3);
      margin: .5vw 0;
    }

    time {
      font-size: 80%;
    }

    .description {
      font-size: 18px;
      overflow: hidden;
      /* text-overflow: ellipsis;
      line-clamp: 3;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; */
    }

    footer {
      display: flex;
      justify-content: center;
    }
  }
  
  @media (min-width: 768px) {
    flex-direction: row;
    max-width: unset;

    .thumbnail {
      max-height: fit-content;
      width: 50%;
    }

    .category {
      position: absolute;
      top: 4px;
      right: 0;
    }
    .content {
      .decorator {
        top: 3rem;
      }
    }
  }

  @media (min-width: 1024px) {
    gap: 1em;

    .thumbnail {
      margin: 0;
      width: 40%;
    }
  }
}

/* -------------Start Hero ---------------- */
.hero .main-title {
  text-align: center;
}
/* -------------Start Hero ---------------- */
.this-week {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2em;
  margin-bottom: var(--margin-bottom);

  .article-card {
    border-color: var(--color-magenta);
    /* max-height: 350px; */
    margin-bottom: 4em;

    .content time {
      /* color: var(--color-magenta); */
      color: var(--color-oringe);
    }

    &:nth-of-type(2) {
      border-color: var(--color-oringe);
    }

    &:nth-of-type(3) {
      border-color: var(--color-yellow);
    }
  }

  @media (min-width: 1024px) {
    .article-card {
      width: 100%;
      max-width: 1080px;

      &:nth-child(even) {
        align-self: flex-start;
      }

      &:nth-child(odd) {
        align-self: flex-end;
      }
    }
  }
}

/* ------------- Start Latest News ---------------- */

.latest-news {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(
    129deg,
    var(--color-magenta) 0%,
    var(--color-oringe) 100%
  );
  margin-bottom: var(--margin-bottom);
  padding-bottom: 2em;

  .article-card {
    background: rgb(217 217 217 / 20%);
    border: none;
  }

  @media (min-width: 1024px) {
    .article-card {
      max-width: 1440px;
    }
  }
}

/* ------------- Start News Filter ----------------- */
/* Buttons */
.menu-articles {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2vh;
  margin-bottom: var(--margin-bottom);

  button.active {
    background-color: var(--color-magenta);
    border-color: var(--color-magenta);
  }
}

/* Article Container */
.filter-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  margin-bottom: var(--margin-bottom);

  .article-card {
    background-color: var(--color-dark-blue);

    .fa {
      margin-right: 5px;
      color: var(--color-magenta);
    }

    .content {
      .article-title {
        font-size: 24px;
      }

      .description {
        font-size: 16px;
      }
    }

  }

  @media (min-width: 768px) {
    .thumbnail {
      width: 40%;
    }
  }

  @media (min-width: 1024px) {
    flex-direction: row; 
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;

    /*or -> display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch; */

    .article-card {
      max-width: calc(50% - 2em);
    }
  }
}