.battle {
  width: 1290px;
  margin: 0 auto 60px;
  position: relative;
  top: -30px;

  .intro {
    font-family: Lato-Black;
    font-size: 20px;
    line-height: 33px;
    color: var(--blue-500);
  }

  .carrousel {
    padding: 40px 0 0;
    position: relative;
    h2 {
      font-family: Lato-Black;
      font-size: 28px;
      line-height: 33px;
      background-repeat: no-repeat;
      padding: 0 0 0 70px;
      background-position: center left 10px;
    }

    .content {
      padding: 0 0 20px;
      .menu {
        width: 33.3%;
        display: inline-block;

        .item {
          background-image: url("img/icon_validate-10aceed4bbada50df829d9d770819a7b.svg");
          background-position: center left 15px;
          padding: 25px 0 25px 70px;
          background-repeat: no-repeat;
          color: var(--blue-500);
          font-size: 20px;
          line-height: 24px;
          font-family: Lato-Bold;
          border-bottom: solid 1px #dedede;
          cursor: pointer;

          .slide_mob {
            display: none;
          }
        }
      }

      .slide_desk {
        display: inline-block;
        width: 66.3%;
        vertical-align: top;
      }

      .slide {
        display: none;

        vertical-align: top;
        padding: 20px 0;

        .col {
          width: 49.6%;
          display: inline-block;
          vertical-align: top;
          text-align: center;
          min-height: 186px;
          padding-bottom: 13px;

          .title {
            font-family: Lato-Bold;
            font-size: 20px;
            line-height: 24px;
            color: black;
            padding: 10px 25px 20px;
          }

          p {
            padding: 0 30px;
            margin: 0;
            display: inline-block;
            color: var(--blue-500);
          }
        }

        .col_2 {
          border-left: solid 2px var(--blue-500);
        }
      }
    }

    .conclusion {
      font-size: 20px;
      line-height: 33px;

      strong {
        font-family: Lato-Black;
      }
    }
  }

  #carrousel_1 {
    h2 {
      color: #8f2b72;
      background-image: url("img/icon_cost-b1cd590b517bbd2adf0f8de4e6791ba2.webp");
    }

    .content {
      .menu {
        #item_1_1 {
          border-top: solid 1px #dedede;
          background-color: #dbbbd2;
        }
      }

      .slide {
        background-color: #f3e8f0;
      }

      .slide_desk {
        #slide_1_1 {
          display: inline-block;
        }
      }
    }

    .conclusion {
      color: #8f2b72;
    }
  }

  #carrousel_2 {
    h2 {
      color: #ec9968;
      background-image: url("img/icon_pleasure-dfa7d6a9e1254b0e232500bbf71de5ed.webp");
    }

    .content {
      .menu {
        #item_2_1 {
          border-top: solid 1px #dedede;
          background-color: #f9e1d2;
        }
      }

      .slide {
        background-color: #fdf5f0;
      }

      .slide_desk {
        #slide_2_1 {
          display: inline-block;
        }
      }
    }

    .conclusion {
      color: #ec9968;
    }
  }

  #carrousel_3 {
    h2 {
      color: #84bf6c;
      background-image: url("img/icon_autonomy-bfaf6334ced16e284aa78bca8bdd6bec.webp");
    }

    .content {
      .menu {
        #item_3_1 {
          border-top: solid 1px #dedede;
          background-color: #daecd3;
        }
      }

      .slide {
        background-color: #f3f9f0;
      }

      .slide_desk {
        #slide_3_1 {
          display: inline-block;
        }
      }
    }

    .conclusion {
      color: #84bf6c;
    }
  }

  .verdict {
    font-size: 20px;
    line-height: 33px;
    padding: 60px 0 70px;

    strong {
      font-family: Lato-Black;
      color: var(--blue-500);
    }
  }

  .sources {
    font-size: 12px;
    padding: 40px 0 0;
    border-top: solid 1px #dedede;

    a {
      color: black;
    }
  }

  @media (max-width: 1400px) {
    width: auto;
    margin: 0 60px;
  }

  @media (max-width: 1038px) {
    width: 80%;
    margin: 0 auto;

    .intro {
      font-size: 17px;
      line-height: 26px;
    }

    .carrousel {
      h2 {
        font-size: 25px;
        padding: 0 0 0 60px;
      }

      .content {
        .menu {
          .item {
            font-size: 16px;
            padding: 20px 0 20px 50px;
            background-size: 20px;
          }
        }

        .slide {
          top: 108px;
          .col {
            .title {
              font-size: 16px;
              line-height: 21px;
            }
          }
        }
      }

      .conclusion {
        font-size: 16px;
        line-height: 23px;
      }
    }

    .verdict {
      font-size: 16px;
      line-height: 23px;
    }
  }

  @media (max-width: 800px) {
    .carrousel {
      h2 {
        font-size: 21px;
        line-height: 27px;
        min-height: 35px;
        margin: 10px 0;
      }

      .content {
        padding: 0 0 5px;
        .menu {
          width: 100%;
        }

        .slide {
          position: static;
          width: 100%;

          .col {
            height: auto;
            .title {
              padding: 0 20px 15px;
            }
          }
        }
      }
    }

    #carrousel_1 {
      .content {
        .slide_desk {
          #slide_1_1 {
            display: none;
          }
        }

        #slidemob_1_1 {
          display: block;
        }
      }
    }

    #carrousel_2 {
      .content {
        .slide_desk {
          #slide_2_1 {
            display: none;
          }
        }

        #slidemob_2_1 {
          display: block;
        }
      }
    }

    #carrousel_3 {
      .content {
        .slide_desk {
          #slide_3_1 {
            display: none;
          }
        }

        #slidemob_3_1 {
          display: block;
        }
      }
    }
  }

  @media (max-width: 470px) {
    width: 85%;

    .intro {
      font-size: 15px;
      line-height: 23px;
    }

    .carrousel {
      padding: 25px 0 0;
      h2 {
        font-size: 18px;
        background-position: center left;
        padding: 0 0 0 45px;
        line-height: 23px;

        margin: 10px 0 15px;
      }

      .content {
        padding: 0 0 0px;
        .slide {
          .col {
            width: 49.3%;
            text-align: left;
            vertical-align: top;

            p {
              padding: 0 20px;
            }
          }
        }
      }

      .conclusion {
        font-size: 14px;
        line-height: 20px;
      }
    }

    .verdict {
      font-size: 14px;
      line-height: 20px;
      padding: 40px 0 30px;
    }

    .sources {
      font-size: 11px;
      padding: 30px 0 0;
    }
  }
}