.section-projects .project-list-block {
position: absolute !important;
left: 0;
right: 0;
}
.section-projects .section-content {
padding-top: calc(var(--page-margin-top) * 3);
padding-bottom: var(--page-margin-bottom);
}
.section-projects .section-content .section-wrap {
padding: 0;
}
.project-list-block.on-home .section-title {
padding-left: var(--content-margin-right);
padding-right: var(--content-margin-right);
}
.project-list-block.on-home .section-title h2{
margin-bottom: 1.5rem;
}
.project-list-block.on-home .view-all-projects {
padding-left: var(--content-margin-right);
padding-right: var(--content-margin-right);
}
.project-list-block .glide__slides {
margin: 0;
padding-bottom: 1rem;
}
.project-list-block-on-home .glide__slides {
height: 50vh;
}
.project-list-block .glide__slide {
position: relative;
opacity: 0.2;
transition: opacity 1000ms ease;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: 1fr min-content min-content min-content;
gap: 2rem;
margin: 0;
}
.project-list-block.on-home .glide__slide {
grid-template-columns: 3fr 1fr;
}
.project-list-block.not-on-home .glide__slide {
grid-template-columns: 3fr 2fr;
}
.project-list-block .glide__slide.glide__slide--active {
opacity: 1;
}
.project-list-block.on-home .glide__arrows {
position: absolute;
top: 0;
right: var(--content-margin-right);
}
.project-list-block.not-on-home .glide__arrows {
position: absolute;
top: 0;
right: 0;
}
.project-list-block .glide__arrow {
display: inline-block;
background: none;
width: 30px;
height: 25px;
cursor: pointer;
border: none;
}
.project-list-block .glide__arrow svg {
width: 100%;
height: 100%;
fill: none;
stroke: var(--lush-white);
stroke-width: 10px;
transition: stroke 400ms ease;
}
.project-list-block .glide__arrow:hover svg {
stroke: var(--accent-colour, var(--lush-blue));
}
.project-list-block .project-company-logo {
grid-column: 2/3;
grid-row: 1/2;
align-self: end;
}
.project-list-block .project-company-logo img {
width: 50%;
height: auto;
object-fit: contain;
}
.project-list-block .project-heading {
font-family: var(--font-main);
font-size: 2.2rem;
font-weight: var(--font-weight-h1);
line-height: 1.1em;
color: var(--text-colour-h1);
grid-column: 2/3;
grid-row: 2/3;
}
.project-list-block .project-description {
grid-column: 2/3;
grid-row: 3/4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; line-clamp: 4;
-webkit-box-orient: vertical;
}
.project-list-block .project-link {
grid-column: 2/3;
grid-row: 4/5;
padding: 1rem 0;
}
.project-list-block .project-link a {
border: 1px solid white;
text-decoration: none;
font-size: 1.2rem;
border-radius: 100vw;
padding: 0.7em 2em;
font-weight: bold;
transition: color 300ms ease, background-color 300ms ease, border 300ms ease;
}
.project-list-block .project-link a:hover {
color: var(--accent-colour, var(--lush-blue));
border: 1px solid var(--accent-colour, var(--lush-blue));
}
.project-list-block .project-heading a {
color: var(--lush-white);
text-decoration: none;
}
.project-list-block .project-heading a::after {
content: initial;
}
.project-list-block .project-poster {
grid-column: 1/2;
grid-row: 1/-1;
}
.project-list-block .project-poster img {
object-fit: cover;
width: 100%;
height: 100%;
aspect-ratio: 16/9;
}
@media (max-width: 1000px) {
.project-list-block .glide__slide {
grid-template-columns: 1fr;
grid-template-rows: 1fr min-content min-content min-content min-content;
}
.project-list-block.on-home .glide__slide {
grid-template-columns: 1fr;
}
.project-list-block.not-on-home .glide__slide {
grid-template-columns: 1fr;
}
.project-list-block .project-company-logo {
grid-row: 2/3;
padding: 0;
}
.project-list-block .project-company-logo img {
width: 30%;
}
.project-list-block .project-heading {
grid-row: 3/4
}
.project-list-block .project-description {
grid-row: 4/5
}
.project-list-block .project-link {
grid-row: 5/6
}
.project-list-block .project-company-logo,
.project-list-block .project-heading,
.project-list-block .project-description,
.project-list-block .project-link {
grid-column: 1/2;
}
.project-list-block .project-poster {
grid-row: 1/2;
}
}
@media (max-width: 500px) {
.project-list-block .glide__slide {
gap: 1rem;
}
.project-list-block .glide__slides {
padding-bottom: 1rem;
}
.project-list-block .project-heading {
font-size: 1.8rem;
}
}