@import './index.css' layer(index);

header {
  background-image: url(./images/mianagency.jpeg);
}

.centered {
  text-align: center;
  justify-items: center;
  grid-column: 1 / span 2;

  div {
    justify-content: center;
  }
}

.list {
  div {
    display: flex;
    gap: 10px;
  }
}

p > span {
  font-weight: 700;
}

.bloc {
  margin-block: 2rem;
  padding-block: 3rem;
  padding-inline: 1rem;

  &:nth-of-type(3n + 1) {
    background-color: rgb(248, 247, 247);
    color: black;
    border-radius: 15px;
  }

  .list {
    span {
      grid-column: 1 / span 2;
      text-align: center;
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .buttons {
    text-align: center;
  }
}

main {
  .content {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: initial;
    grid-auto-rows: minmax(200px, auto);
    gap: 2rem;

    h3 {
      text-align: center;
      line-height: 2;
      text-transform: uppercase;
      font-variant: small-caps;
      margin-bottom: 3rem;
    }

    h4 {
      text-align: center;
    }

    p {
      line-height: 3.5rem;
      padding-block: 1rem;
    }
  }

  .events {
    color: black;

    h3 {
      text-align: center;
    }
  }
}

@media screen and (max-width: 1024px) {
  main {
    .content {
      gap: 2rem;
    }
  }
}

@media screen and (max-width: 425px) {
  main {
    .events {
      .content {
        display: block;
      }
    }
  }
}

@media screen and (max-width: 425px) {
  main {
    .content {
      grid-template-columns: 1fr;

      .bloc {
        margin-block: 2rem;
        padding-block: 3rem;
        padding-inline: 2rem;
        text-align: justify;
        word-spacing: 5px;
      }
    }
  }
}