.about-section {
position: relative;
}
.about-section-block {
position: relative;
z-index: 2;
margin-bottom: var(--space-3xl);
}
.about-section .quote {
margin-bottom: var(--space-3xl);
}
.dynamic-text {
display: flex;
flex-wrap: wrap;
}
.dynamic-text h2 {
font-size: var(--font-size-3xl);
margin-bottom: 40px;
font-weight: var(--font-weight-bold);
}
.about-tiles-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
width: 100%;
margin: 0;
}
.about-tile {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
background: var(--color-sable);
border-radius: var(--border-radius);
padding: var(--space-xl);
}
.about-tile_icon {
margin-bottom: var(--space-md);
}
.about-tile_icon img {
width: 100px;
height: auto;
}
.about-tile_content {
display: flex;
flex-direction: column;
flex: 1;
text-decoration: none;
}
h3.about-tile_titre {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: var(--line-height);
margin-bottom: var(--space-md);
}
.about-tile_description {
margin-bottom: var(--space-lg);
font-size: var(--font-size-sm);
}
.about-tile_link {
margin-top: auto;
font-size: var(--font-size-sm);
color: var(--color-primary);
font-weight: var(--font-weight-bold);
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
.about-tile_link:hover {
color: var(--color-accent);
}
.about-tile_link svg {
transition: transform 0.3s ease;
}
.about-tile_link:hover svg {
transform: translateX(4px);
}  @media screen and (max-width: 1024px) {
.about-tiles-grid {
gap: 32px;
}
.about-tile_icon img {
width: 80px;
}
.about-section .quote svg {
width: 80px;
}
.about-section .quote {
margin-bottom: var(--space-2xl);
}
.dynamic-text h2 {
font-size: var(--font-size-2xl);
}
} @media screen and (max-width: 768px) {
.dynamic-text h2 {
margin-bottom: 24px;
font-size: var(--font-size-xl);
}
.about-section-block {
margin-bottom: var(--space-xl);
}
.about-section .quote {
margin-bottom: var(--space-xl);
}
.about-tiles-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
h3.about-tile_titre {
font-size: var(--font-size-lg);
}
.about-tile_icon img {
width: 70px;
}
.about-section .quote svg {
width: 70px;
}
} @media screen and (max-width: 480px) {
.about-tiles-grid {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.about-tile_icon img {
width: 60px;
}
.about-section .quote {
margin-bottom: var(--space-md);
}
.about-section .quote svg {
width: 60px;
}
h3.about-tile_titre {
margin-bottom: var(--space-md);
}
.about-tile_description {
margin-bottom: var(--space-md);
}
}