.carousel-wrapper{
    height:400px;
    position:relative;
    width:100%;
    margin:0 auto;
  }
  @media (min-width: 320px) {
    .carousel-wrapper{
        height:100px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 375px) {
    .carousel-wrapper{
        height:120px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 425px) {
    .carousel-wrapper{
        height:135px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 760px) {
    .carousel-wrapper{
        height:240px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 768px) {
    .carousel-wrapper{
        height:240px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 812px) {
    .carousel-wrapper{
        height:255px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 851px) {
    .carousel-wrapper{
        height:265px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 854px) {
    .carousel-wrapper{
        height:270px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 1024px) {
    .carousel-wrapper{
        height:320px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 1360px) {
    .carousel-wrapper{
        height:425px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 1412px) {
    .carousel-wrapper{
        height:445px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 1440px) {
    .carousel-wrapper{
        height:455px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  @media (min-width: 1920px) {
    .carousel-wrapper{
        height:600px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }

  @media (min-width: 2560px) {
    .carousel-wrapper{
        height:800px;
        position:relative;
        width:100%;
        margin:0 auto;
      }
  }
  .carousel-item{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:25px 50px;
    opacity:0;
    transition: all 0.5s ease-in-out;
  }
  .arrow{
    border: solid black;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 12px;
  }
  
  .arrow-prev{
    left:30px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(135deg);
  }
   
  .arrow-next{
    right:30px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(-45deg);
    }
  
  .light{
    color:white;
  }
  
  @media (max-width: 480px) {
        .arrow, .light .arrow {
          background-size: 10px;
          background-position: 10px 50%;
        }
      }
  
  /*Select every element*/
  [id^="item"] {
      display: none;
    }
  
  .item-1 {
      z-index: 2;
      opacity: 1;
    background:url('../banner/imagens/tapete-colecao-3.webp');
    background-size:cover;
    }
  .item-2{
    background:url('../banner/imagens/ofertas-de-mantas-2.webp');
     background-size:cover;
  }
  .item-3{
    background:url('../banner/imagens/loja-textil-oliveira-1.webp');
     background-size:cover;
  }
  
  *:target ~ .item-1 {
      opacity: 0;
    }
  
  #item-1:target ~ .item-1 {
      opacity: 1;
    }
  
  #item-2:target ~ .item-2, #item-3:target ~ .item-3 {
      z-index: 3;
      opacity: 1;
    }