@media screen and (max-width: 1000px) {
  header > nav > a {
    font-size: 0.7em;
  }

  .flip-card-back p {
    font-size: 0.8em;
  }
}

@media screen and (max-width: 900px) {
  .title {
    font-size: 1.2em;
  }

  .Article3 {
    overflow: scroll;
  }
}

@media screen and (max-width: 800px) {
  .RightDiv{
    display: none;
  }
  .LeftDiv{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20%;
    >a{font-size: 1em;
    text-align: center;}

    >p{
    text-align: center;}
  }

  .imgadv {
    width: 30%;
  }

  .flip-card {
    min-width: 160px;
  }

  .Article5 {
    height: auto;
    overflow: hidden;

    > h1 {
      padding: 5%;
    }
  }
}

@media screen and (max-width: 700px) {
  .LeftDiv a {
    font-size: 1em;
    width: 80%;
  }

  .advantages {
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
  }

  .advImages {
    width: 90%;
  }
  .imgadv {
    width: 10%;
  }

  .Article2 {
    overflow: scroll;
    height: 100vh;
  }

  .div1,
  .div2 {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .Article4 {
    padding: 5vh 2vw 5vh 2vw;
    height: auto;
  }

  .container {
    overflow: scroll;
    > div {
      &:hover {
        flex: 0 0 70vw;
      }
    }
  }

  .div1,
  .div2 {
    padding: 1vh;
    height: auto;
    width: 90vw;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .flip-card-inner,
  .flip-card-front,
  .flip-card-back {
    height: 20vh;
    
    border-radius: 5px;
  }

  .flip-card{
    width: 80vw;
    height: 20vh;
  }

  
  
}

@media screen and (max-width: 500px) {
  .Article4 {
    
    > p, h1 {
      text-align: center;
    }
  }
  .buttons {
    flex-wrap: wrap;
  }

  .logo-big {
    width: 80vw;
    height: auto;
  }
}