<section class="supt-section-downloads">
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<h2 class="supt-section-downloads__title">Download our Sustainability Reports</h2>
</div>
<div class="col-12 col-md-7 offset-md-1">
<div class="supt-section-downloads__files">
<a href="/sites/gv/files/flmngr/esg/2024-sustainability-report.pdf" class="supt-section-downloads__file">
<span class="supt-section-downloads__file__content">
<p class="supt-section-downloads__file__title">Download 2024 Sustainability Report</p>
<p class="supt-section-downloads__file__infos">PDF (233.7 KB)</p>
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 17" fill="none">
<path d="M2 7L7.64645 12.6464C7.84171 12.8417 8.15829 12.8417 8.35355 12.6464L14 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M8.02818 0.778183L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M15.005 16L1.00501 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</a>
<a href="/sites/gv/files/flmngr/esg/2023-sustainability-report.pdf" class="supt-section-downloads__file">
<span class="supt-section-downloads__file__content">
<p class="supt-section-downloads__file__title">Download 2023 Sustainability Report</p>
<p class="supt-section-downloads__file__infos">PDF (1.9 MB)</p>
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 17" fill="none">
<path d="M2 7L7.64645 12.6464C7.84171 12.8417 8.15829 12.8417 8.35355 12.6464L14 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M8.02818 0.778183L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M15.005 16L1.00501 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</a>
<a href="/sites/gv/files/flmngr/esg/2022-sustainability-report.pdf" class="supt-section-downloads__file">
<span class="supt-section-downloads__file__content">
<p class="supt-section-downloads__file__title">Download 2022 Sustainability Report</p>
<p class="supt-section-downloads__file__infos">PDF (120.2 KB)</p>
</span>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 17" fill="none">
<path d="M2 7L7.64645 12.6464C7.84171 12.8417 8.15829 12.8417 8.35355 12.6464L14 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M8.02818 0.778183L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M15.005 16L1.00501 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
No notes defined.
<section class="supt-section-downloads">
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<h2 class="supt-section-downloads__title">{{ title }}</h2>
</div>
<div class="col-12 col-md-7 offset-md-1">
<div class="supt-section-downloads__files">
{% for file in files %}
<a href="{{ file.url }}" class="supt-section-downloads__file">
<span class="supt-section-downloads__file__content">
<p class="supt-section-downloads__file__title">{{ file.title }}</p>
<p class="supt-section-downloads__file__infos">{{ file.infos }}</p>
</span>
{% include '02-icons/download-icon.twig' %}
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{
"title": "Download our Sustainability Reports",
"files": [
{
"title": "Download 2024 Sustainability Report",
"infos": "PDF (233.7 KB)",
"url": "/sites/gv/files/flmngr/esg/2024-sustainability-report.pdf"
},
{
"title": "Download 2023 Sustainability Report",
"infos": "PDF (1.9 MB)",
"url": "/sites/gv/files/flmngr/esg/2023-sustainability-report.pdf"
},
{
"title": "Download 2022 Sustainability Report",
"infos": "PDF (120.2 KB)",
"url": "/sites/gv/files/flmngr/esg/2022-sustainability-report.pdf"
}
]
}
.supt-section-downloads {
@mixin clamp padding-block, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
background-color: $color-grey-background;
&__title {
@extend %t-h2;
margin-bottom: 0;
}
&__files {
margin-top: $spacing-8;
@media (min-width: $breakpoint-md) {
margin-top: 0;
}
}
&__file {
@mixin clamp gap, $spacing-4, $spacing-8, $breakpoint-xs, $breakpoint-xl;
display: flex;
align-items: center;
justify-content: space-between;
padding: $spacing-4 $spacing-1-5;
border-top: 1px solid $color-grey-3;
border-bottom: 1px solid $color-grey-3;
position: relative;
@media (min-width: $breakpoint-md) {
padding: $spacing-5 $spacing-1-5;
}
&::before,
&::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 1px;
background-color: $color-main;
transform-origin: right;
transform: scaleX(0);
transition: transform $transition-mid ease-in-out;
}
&::before {
top: -1px;
}
&::after {
bottom: -1px;
}
&__content {
display: flex;
flex-direction: column;
}
&__title {
@extend %t-body-sm;
font-weight: $font-weight-medium;
transition: color $transition-fast;
}
&__infos {
@extend %t-body-xs-uppercase;
color: $color-grey-5;
}
svg {
@mixin clamp width, 12px, 16px, $breakpoint-xs, $breakpoint-xl;
height: auto;
display: block;
color: $color-main;
}
&:not(:first-child) {
border-top: 0;
}
&:hover,
&:focus-visible {
.supt-section-downloads__file__title {
color: $color-main;
}
&::before,
&::after {
transform-origin: left;
transform: scaleX(1);
}
}
}
}