styles.css

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  color: white;
  background-color: black;

  ul {
    padding-left: 0;
    list-style-type: none;
  }

  header {
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.7), rgba(0, 0, 0, 0.7)),
      url(images/bg-featured-home.webp);
    background-size: cover;
    background-position: center;

    @media screen and (max-width: 425px) {
      background-size: auto;
      background-position: 65%;
      padding-bottom: 65px;
    }

    div {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      padding: 0px 25px 70px 0px;

      @media screen and (max-width: 425px) {
        display: flex;
        align-items: flex-end;
        padding: 50px 0px 25px 0px;
      }

      h1 {
        width: 300px;
        font-size: large;

        @media screen and (max-width: 425px) {
          width: 250px;
          font-size: 25px;
        }
      }
    }
    img {
      padding: 25px 0px 0px 25px;
    }
  }
  main {
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
    > div {
      display: flex;
      justify-content: space-between;

      section {
        margin: 25px;
        h2 {
          background-color: #102223;
          padding: 5px 0px 5px 25px;
        }

        &#lastNews {
          width: 50%;

          @media screen and (max-width: 425px) {
            width: 100%;
            margin: 0;
          }

          ul {
            display: flex;
            flex-wrap: wrap;

            li {
              display: flex;
              justify-content: space-evenly;
              margin-top: 25px;
              width: 50%;

              img {
                width: 60px;
                height: 60px;
              }

              div {
                padding-left: 10px;
                h3 {
                  margin: 0;
                  color: white;
                }
                a {
                  color: #6df2fc;
                }
                p {
                  font-size: xx-small;
                  margin: 10px 0px 0px 0px;
                  color: #74a1a3;
                }
              }
            }
          }
        }
        &#focusNews {
          width: 40%;
          @media screen and (max-width: 425px) {
            width: 100%;
            margin: 0;
          }

          ul {
            li {
              display: flex;
              align-items: center;
              img {
                height: 6rem;
              }
              div {
                padding: 0.5rem;
                a {
                  color: #6df2fc;
                }
                p {
                  font-size: xx-small;
                  color: #74a1a3;
                }
              }
            }
          }
        }

        &#gallery {
          width: 50%;
          @media screen and (max-width: 425px) {
            width: 100%;
            margin: 0;
            flex-direction: row;
          }

          h2 {
            margin: 0;
          }

          div {
            @media screen and (max-width: 425px) {
              width: 100%;
              flex-direction: row;
            }

            display: flex;
            justify-content: space-around;
            background-color: #74a1a3;

            img {
              padding: 10px 3px 10px 3px;
              width: 30%;
              object-fit: cover;
            }
          }
        }

        &#contacts {
          width: 40%;
          h2 {
            margin: 0;
          }

          @media screen and (max-width: 425px) {
            width: 100%;
            margin: 25px 0px 25px 0px;
            flex-direction: row;
          }

          div {
            @media screen and (max-width: 425px) {
              flex-direction: row;
            }
            height: 3rem;
            background-color: #74a1a3;
            display: flex;
            align-items: center;
            justify-content: space-around;

            a {
              text-decoration: none;
              color: white;
            }
          }
        }
      }
    }
  }

  footer {
    background-color: #102223;
    display: flex;
    justify-content: space-between;

    ul {
      width: 350px;
      list-style-type: none;
      padding: 0;

      li {
        display: flex;
        justify-content: space-around;
        a {
          color: white;
          font-size: small;
          text-decoration: none;
        }
      }
    }
    p {
      font-size: small;
    }
  }
}

@media screen and (max-width: 425px) {
  /* Styles pour les écrans de largeur maximale de 425px */
  div {
    width: 100%;
    flex-direction: column;
  }
}