Quando uso @media para desktop o card desaparece, não encontrei o erro, segue meu código: CSS:
.carrossel__titulo{
color: var(--laranja);
background-color: var(--branco);
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
padding: 1em 0 0.5em 0;
}
.swiper-slide img{
width: 100%;
}
.swiper-button-prev,
.swiper-button-next{
display: none;
}
.swiper-pagination{
position: initial;
margin: 0.5em 0;
}
.card__descricao{
display: flex;
justify-content: space-between;
margin-bottom: 0.5em;
}
.card__botoes{
display: flex;
justify-content: space-between;
}
.botoes{
display: flex;
}
.card{
background: var(--branco);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
margin: 1em;
padding: 1em;
}
.descricao__titulo{
color: var(--laranja);
font-weight: 700;
}
.descricao__titulo-livro{
color: var(--azul);
font-size: 18px;
font-weight: 700;
margin: 0.5em 0;
}
.descricao__texto{
font-size: 14px;
}
.botoes__item{
margin: 0 0.5em;
}
.botoes__ancora{
text-decoration: none;
background-color: var(--laranja);
padding: 1em 2.2em;
color: var(--branco);
font-weight: 700;
}
@media screen and (min-width: 1024px){
.carrossel__titulo{
font-size: 26px;
}
.swiper-pagination{
margin: 2em 0 3em 0;
}
.swiper{
width: 60%;
}
.swiper-button-pev,
.swiper-button-next{
display: block;
top: 35%;
}
.card{
width: 65%;
margin: 2em auto;
}
}
@media screen and (min-width: 1728px) {
.carrossel__container {
display: flex;
margin: 0 20vw 3em 20vw;
}
}
HTML:
<section class="carrossel">
<h2 class="carrossel__titulo">Novos Lançamentos</h2>
<!-- Slider main container -->
<div class="carrossel__container">
<div class="swiper">
<!-- If we need pagination -->
<div class="swiper-pagination">
</div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/ApacheKafka.svg"
alt="Livro sobre apache kafka e spring boot da Alura Books"></div>
<div class="swiper-slide"><img src="img/Lideranc╠ºa.svg" alt="Livro sobre Liderança da Alura Books">
</div>
<div class="swiper-slide"><img src="img/Javascript.svg"
alt="Livro sobre JavaScipt assertivo da Alura Books"></div>
<div class="swiper-slide"><img src="img/Guia Front-end.svg"
alt="Livro sobre Front End da Alura Books">
</div>
<div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre Portugol da Alura Books">
</div>
<div class="swiper-slide"><img src="img/Acessibilidade.svg"
alt="Livro sobre Acessibilidade da Alura Books"></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="card">
<div class="card__descricao">
<div class="descricao">
<h3 class="descricao__titulo">Talvez você também se interesse por...</h3>
<h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
<p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.
</p>
</div>
<img class="descricao__imagem" src="img/Angular.svg" alt="">
</div>
<div class="card__botoes">
<ul class="botoes">
<li class="botoes__item">
<img src="img/Favoritos.svg" alt="">
</li>
<li class="botoes__item">
<img src="img/Compras.svg" alt="">
</li>
</ul>
<a href="#" class="botoes__ancora">Saiba Mais</a>
</div>
</div>
</div>
</div>
</section>