.page-home {
display: flex;
flex-direction: column;
} .page-home .hero {
width: 100%;
position: relative;
}
.page-home .hero .hero-picture {
display: flex;
height: 40rem;
}
.page-home .hero .hero-picture .hero-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-home .hero .btn-cat {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 13rem;
animation: cta-pulse 1.5s ease-in-out infinite;
}
.page-home .hero .btn-cat img {
width: 100%;
transition: filter 0.3s ease;
height: 100%;
}
.page-home .hero .btn-cat:hover img {
filter: brightness(0.9);
}
@keyframes cta-pulse {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.08);
}
} .page-home .products {
padding-top: 4rem;
padding-bottom: 4rem;
background-color: var(--lite);
}
.page-home .products .cover {
display: flex;
flex-direction: column;
}
.page-home .products .title {
display: flex;
margin: auto;
font-size: 1.5rem;
color: var(--black);
text-transform: uppercase;
margin-bottom: 4rem;
font-family: "Gotham Rounded", sans-serif;
}
.page-home .products .list-category {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.page-home .products .list-category > * {
flex: 0 0 calc((100% - 4rem) / 3);
}
.page-home .products .list-category .cat {
width: 100%;
height: 25rem;
background-color: var(--lite);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.page-home .products .list-category .cat img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-home .products .list-category .cat span {
padding: 1rem;
background-color: #000000b0;
color: var(--white);
width: 80%;
text-align: center;
font-size: 0.85rem;
text-transform: uppercase;
position: absolute;
transition: all 0.3s ease;
font-family: "Gotham Rounded", sans-serif;
}
.page-home .products .list-category .cat:hover span {
background-color: var(--white);
color: var(--black);
} @media (max-width: 100rem) { }
@media (max-width: 75rem) { }
@media (max-width: 62rem) { }
@media (max-width: 48rem) { .page-home .hero .hero-picture {
height: auto;
}
.page-home .products .list-category > * {
flex: 0 0 calc((100% - 2rem) / 2);
}
}
@media (max-width: 36rem) { .page-home .products {
padding-top: 2rem;
padding-bottom: 2rem;
}
.page-home .products .title {
font-size: 1rem;
margin-bottom: 2rem;
}
.page-home .products .list-category {
gap: 1rem;
}
.page-home .products .list-category > * {
flex: 0 0 calc((100% - 1rem) / 2);
}
.page-home .products .list-category .cat {
height: 18rem;
}
.page-home .products .list-category .cat span {
font-size: 0.75rem;
}
.page-home .hero .btn-cat {
width: 11rem;
}
.page-home .hero .hero-picture {
height: 24rem;
}
.page-home .hero .btn-cat {
width: 8rem;
}
}