.banner{
    background:linear-gradient(60deg, rgb(86, 138, 117) 0%, rgb(36, 97, 167) 100%);
}
    
.banner__container{
    display:flex;  flex-direction:column;  justify-content:center;  align-items:center;  height:300px;
}

.banner__titulo{
    padding:1em;  font-size:1.4em;  font-weight:800;  text-align:center;  color:var(--cor-branco);
}

.banner__imagem__container{
    display:block;  overflow:hidden;
}

.banner__imagem{
    display:block;  width:auto;  height:auto;  object-fit:cover;
}

.visible-tablet{
    display:none;
}

@media screen and (min-width:768px) {
    .banner__container{
        display:flex;      flex-direction:row;      align-items:flex-start;  }

    .banner__titulo{
        margin:1.5em 0.5em 0 1em;      padding:0;      width:360px;      font-size:1.9em;      text-align:left;  }

    .banner__titulo span{
        -o-transition:all .2s linear;      -webkit-transition:all .2s linear;      -moz-transition:all .2s linear;      transition:all .2s linear;      display:inline-flex;      margin:1em 0;      color:var(--cor-branco);      background:url(/img/icon/double-arrow-right.svg) no-repeat 0.8em center;      background-size:1.5em;      font-size:0.6em;      line-height:normal;      padding:0.8em 1.1em 0.8em 2.7em;      border-radius:2px;      border:1px solid var(--cor-cinza-d1);      text-transform:uppercase;  }

    .visible-tablet{
        display:block;  }
}

@media screen and (min-width:992px) {
    .banner__link{
        display:flex;      width:100%;      justify-content:center;  }

    .banner__link:hover .banner__titulo span{
        background:var(--cor-preto) url(/img/icon/double-arrow-right.svg) no-repeat 0.8em center;      background-size:1.5em; 
    }

    .banner__container{
        max-width:950px;  }

    .banner__titulo{
        width:auto;      margin:1.2em 1em 0 0;      font-size:2.4em;  }

    .banner__imagem__container{
        overflow:initial;  }
}