@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --Moderate-violet: hsl(263, 55%, 52%);
  --Very-dark-grayish-blue: hsl(217, 19%, 35%);
  --Very-dark-blackish-blue: hsl(219, 29%, 14%);
  --White: hsl(0, 0%, 100%);
  --Light-gray: hsl(0, 0%, 81%);
  --Light-grayish-blue: hsl(210, 46%, 95%);
}

body {
  font-family: 'Barlow Semi Condensed', serif;
  padding-block: 5rem;
  padding-inline: 1.5rem;
  background: var(--Light-grayish-blue);
}

main {
  display: grid;
  justify-content: center;
  gap: 2rem;
  max-inline-size: 85rem;
  margin-inline: auto;
}

article {
  border-radius: 10px;
  padding-block: 1.5rem 2.3rem;
  padding-inline: 2.1rem;
  text-wrap-style: stable;
  box-shadow: 40px 60px 50px -47px rgba(72, 85, 106, 0.25);
}

.article-1 {
  position: relative;
  background-color: var(--Moderate-violet);
  isolation: isolate;
  overflow: clip;

  img {
    border: 2px solid rgb(157, 110, 215);
  }

  .user {
    .name {
      color: var(--Light-gray);
    }
  }

  .title {
    color: var(--White);
  }
  .summary {
    color: var(--Light-gray);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 7%;
    background-image: url('/images/bg-pattern-quotation.svg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 110px;
    aspect-ratio: 1;
    z-index: -1;
  }
}

.article-2 {
  background-color: var(--Very-dark-grayish-blue);

  .user {
    .name {
      color: var(--Light-gray);
    }
  }

  .title {
    color: var(--White);
  }
  .summary {
    color: var(--Light-gray);
  }
}

.article-3 {
  background-color: var(--White);

  .user {
    .name {
      color: var(--Very-dark-grayish-blue);
    }
  }

  .title {
    color: var(--Very-dark-blackish-blue);
  }
  .summary {
    color: var(--Very-dark-grayish-blue);
  }
}

.article-4 {
  background-color: var(--Very-dark-blackish-blue);

  img {
    border: 2px solid rgb(157, 110, 215);
  }

  .user {
    .name {
      color: var(--Light-gray);
    }
  }

  .title {
    color: var(--White);
  }
  .summary {
    color: var(--Light-gray);
  }
}

.article-5 {
  background-color: var(--White);

  .user {
    .name {
      color: var(--Very-dark-grayish-blue);
    }
  }

  .title {
    color: var(--Very-dark-blackish-blue);
  }
  .summary {
    color: var(--Very-dark-grayish-blue);
  }
}

.user {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 18px;

  img {
    display: block;
    width: 2.25rem;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
  }

  .name {
    line-height: 1.4;

    h2 {
      font-size: unset;
      font-weight: 600;
    }
    p {
      font-size: 0.88rem;
      opacity: 50%;
      font-weight: 500;
    }
  }
}

.title,
.summary {
  font-weight: 600;
  line-height: 1.4;
}

.title {
  font-size: 1.25rem;
  margin-block-end: 20px;
}

.summary {
  opacity: 70%;
  font-size: 0.88rem;
}

/* TABLET */
@media (width >= 48rem) {
  main {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .article-1 {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
  }
  .article-2 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
  .article-3 {
    grid-column: 3 / -1;
    grid-row: 2 / 3;
  }
  .article-4 {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
  }
  .article-5 {
    grid-column: 1 / -1;
    grid-row: 4 / -1;
  }
}

/* Desktop */
@media (width >= 75rem) {
  body {
    padding-block: unset;
    min-height: 100dvh;
    display: grid;
    place-content: center;
  }
  main {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .article-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .article-2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  .article-3 {
    grid-column: 1 / 2;
    grid-row: 2 / -1;
  }
  .article-4 {
    grid-column: 2 / 4;
    grid-row: 2 / -1;
  }
  .article-5 {
    grid-column: 4 / -1;
    grid-row: 1 / -1;
  }
}

footer {
  margin-inline: auto;
  text-align: center;
  padding-block-start: 1rem;
  font-size: 0.8rem;

  p:first-of-type {
    a {
      color: var(--Very-dark-grayish-blue);
      text-decoration: underline;
      text-underline-offset: 4px;
      transition: text-decoration 200ms ease allow-discrete;

      &:hover {
        text-decoration: none;
      }
    }
  }

  p:last-of-type {
    a {
      color: var(--Moderate-violet);
    }
    margin-block-start: 0.7rem;
  }
}