
  .Super-Offres {
    width: 600px;
    height: 280px;
     background-color: white;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-left: 20px;
    margin-top: 20px;
    flex-shrink: 0;
  }
  .CS{
    display: flex;
    padding-right: 30px;
 
  }
  .SOBS{

  }
  .BS{
    display: flex;
    margin-top: 20px;
    margin-left: 20px;
  }
  .Super-Offres-flex-card{
    height: 224px;
    margin-top: -10px;
    display: flex;
   justify-content: space-evenly;
  }
  
  .Super-Offres-card{
    height: 100%;
    width: 160px;
    border-radius: 10px;
  }
  .Super-Offres-card-image{
  height: 70%;
  margin-top: 10px;
  width: 100%;
  }
  .Super-Offres-card-image img{
  object-fit: cover;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  
  }
  .Super-Offres-card-price{
    height: 20%;
    margin-top: 5px;
  
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: .5rem;
  }
  .Super-Offres-card-new-price {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #000000;
    font-size: 18px;
  }
  .Super-Offres-card-old-price{
    color: #15A6DD;
    text-decoration: line-through;
  }
  .Super-Offres-header {
    padding: 10px 10px 10px 20px;
    height: 50px;
    width: 100%;
  }
  .Super-Offres-header-p {
    font-weight: bold;
    padding: 0px 0px 3px 0px;

    font-size: 20px;
  }
  .Super-Offres-header-p span {
    color: #15A6DD;
  }
  .Super-Offres-header-p-text {
    font: 1em sans-serif;
    color: rgb(63, 70, 71);

  }
  
  @media (min-width: 700px) and (max-width: 899px) {
    /* Zoom: 170% */
    .Super-Offres {
      width: 400px;
      height: 180px;
      margin-top: 13px;
      margin-left: 10px;
    }
    .BS{
      margin-top: 10px;
      width: 400px;
      margin-left: 1px;
    }

    .Super-Offres-card{
      height: 100%;
      width: 160px;
      margin-left: 20px;
    }
    .Super-Offres-card-image{
    height: 45%;
    margin-top: -15px;
    width: 90%;
    }
    .Super-Offres-card-price{
      height: 20%;
      margin-top: -5px;
    }
    .Super-Offres-card-new-price {
      font-size: 12px;
    }
    .Super-Offres-card-old-price{
        font-size: 12px;
    }
    .Super-Offres-header {
      padding: 10px 10px 10px 20px;
      height: 50px;
      width: 100%;
    }
    .Super-Offres-header-p-text{
      font-size: 10px;
    }
    .Super-Offres-header-p {
      font-size: 10px;
    }
  }
  
  @media (min-width: 900px) and (max-width: 1099px) {
    /* Zoom: 150% */
    .Super-Offres {
      width: 400px;
      height: 180px;
      margin-top: 14px;
      margin-left: 13px;
    }
    .BS{
      margin-top: 15px;
      width: 400px;
      margin-left: 1px;
    }

    .Super-Offres-card{
      height: 100%;
      width: 160px;
      margin-left: 20px;
    }
    .Super-Offres-card-image{
    height: 45%;
    margin-top: -15px;
    width: 90%;
    }
    .Super-Offres-card-price{
      height: 20%;
      margin-top: -5px;
    }
    .Super-Offres-card-new-price {
      font-size: 12px;
    }
    .Super-Offres-card-old-price{
        font-size: 12px;
    }
    .Super-Offres-header {
      padding: 10px 10px 10px 20px;
      height: 50px;
      width: 100%;
    }
    .Super-Offres-header-p-text{
      font-size: 10px;
    }
    .Super-Offres-header-p {
      font-size: 10px;
    }
  }
  
  @media (min-width: 1100px) and (max-width: 1199px) {
    /* Zoom: 130% */
    .Super-Offres {
      width: 470px;
      height: 210px;
      margin-top: 14px;
      margin-left: 13px;
    }
    .BS{
      margin-top: 15px;
      width: 470px;
      margin-left: 17px;
    }

    .Super-Offres-card{
      height: 100%;
      width: 160px;
      margin-left: 20px;
    }
    .Super-Offres-card-image{
    height: 50%;
    margin-top: -3px;
    width: 90%;
    }
    .Super-Offres-card-price{
      height: 20%;
      margin-top: -3px;
    }
    .Super-Offres-card-new-price {
      font-size: 14px;
    }
    .Super-Offres-header {
      padding: 10px 10px 10px 20px;
      height: 50px;
      width: 100%;
    }
    .Super-Offres-header-p-text{
      font-size: 12px;
    }
    .Super-Offres-header-p {
      font-size: 12px;
    }
  }
  
  @media (min-width: 1200px) and (max-width: 1299px) {
    /* Zoom: 120% */
    .Super-Offres {
      width: 500px;
      height: 230px;
      margin-top: 18px;
      margin-left: 13px;
    }
    .BS{
      margin-top: 15px;
      width: 500px;
      margin-left: 17px;
    }

    .Super-Offres-card{
      height: 100%;
      width: 160px;
      margin-left: 20px;
    }
    .Super-Offres-card-image{
    height: 60%;
    margin-top: -1px;
    width: 90%;
    }
    .Super-Offres-card-price{
      height: 20%;
      margin-top: -3px;
    }
    .Super-Offres-card-new-price {
      font-size: 14px;
    }
    .Super-Offres-header {
      padding: 10px 10px 10px 20px;
      height: 50px;
      width: 100%;
    }
    .Super-Offres-header-p {
      font-size: 14px;
    }
  }
  
  @media (min-width: 1300px) and (max-width: 1449px) {
    /* Zoom: 110% */
    .Super-Offres {
      width: 600px;
      height: 260px;
      margin-top: 18px;
      margin-left: 15px;
    }
    .BS{
      margin-top: 15px;
      margin-left: 17px;
    }

    .Super-Offres-card{
      height: 100%;
      width: 160px;
    }
    .Super-Offres-card-image{
    height: 70%;
    margin-top: -3px;
    width: 100%;
    }
    .Super-Offres-card-price{
      height: 20%;
      margin-top: -3px;
    }
    .Super-Offres-card-new-price {
      font-size: 18px;
    }
    .Super-Offres-header {
      padding: 10px 10px 10px 20px;
      height: 50px;
      width: 100%;
    }
    .Super-Offres-header-p {
      font-weight: bold;
      padding: 0px 0px 3px 0px;
  
      font-size: 18px;
    }

  }
  
  @media (min-width: 1450px) {
    /* Zoom: 100%*/
  }
  
  @media (min-width: 1650px) {
    /*Zoom: 90% */
  }
  
  @media (min-width: 1850px) {
    /*Zoom: 80% */
  }
  
  @media (min-width: 2050px) {
    /*Zoom: 60%*/
  }