/* Composant CategoryHeader
============================================================ */
.subcategory-header {
width: 1330px;
max-width: 100%;
margin: 0 auto;
padding: 200px 15px 0 15px;
margin-bottom: 200px;
display: grid;
grid-template-columns: 5fr 7fr;
align-items: flex-start;
gap: 150px;
}
.subcategory-header .content {
position: relative;
z-index: 0;
}
.subcategory-header .content::before {
content: url('data:image/svg+xml,');
position: absolute;
z-index: -1;
top: -300px;
right: -400px;
}
.subcategory-header .title {
font-size: 4rem;
font-weight: 400;
line-height: 80px;
margin-bottom: 40px;
}
.subcategory-header .text {
max-width: 420px;
}
.subcategory-header .text p {
padding-bottom: 15px;
}
.subcategory-header .links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 20px 0;
}
.subcategory-header .links a + a {
border-top: 1px solid #B5DDD5;
}
.subcategory-header .links a::after {
content: url('data:image/svg+xml,');
line-height: 0;
}
.subcategory-header .image .inner {
width: 100%;
aspect-ratio: 1;
overflow: hidden;
mask-image: url('data:image/svg+xml,');
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.subcategory-header .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1450px) {
.subcategory-header {
gap: 30px;
}
}
@media (max-width: 992px) {
.subcategory-header {
grid-template-columns: 1fr;
gap: 80px;
padding-top: 30px;
margin-bottom: 25px;
}
.subcategory-header .content {
max-width: 600px;
margin: 0 auto;
}
.subcategory-header .content::before {
display: none;
}
.subcategory-header .title {
font-size: 2.8rem;
line-height: 1.1em;
}
.subcategory-header .image {
max-width: 600px;
margin: 0 auto;
}
}