53 lines
814 B
CSS
53 lines
814 B
CSS
|
.cases {
|
||
|
|
padding: var(--section-gap) 0;
|
||
|
|
background-color: var(--color-dark);
|
||
|
|
color: var(--color-white);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cases__heading {
|
||
|
|
margin-bottom: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cases__grid {
|
||
|
|
row-gap: var(--grid-gutter);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cases__tile {
|
||
|
|
display: grid;
|
||
|
|
grid-template: 1fr / 1fr;
|
||
|
|
overflow: hidden;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cases__tile-image {
|
||
|
|
grid-area: 1 / 1;
|
||
|
|
width: 100%;
|
||
|
|
aspect-ratio: 4 / 3;
|
||
|
|
transition: transform 0.4s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cases__tile:hover .cases__tile-image {
|
||
|
|
transform: scale(1.03);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cases__tile-title {
|
||
|
|
grid-area: 1 / 1;
|
||
|
|
align-self: end;
|
||
|
|
padding: 24px;
|
||
|
|
color: var(--color-white);
|
||
|
|
mix-blend-mode: difference;
|
||
|
|
z-index: 1;
|
||
|
|
line-height: 1.2;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.cases__heading {
|
||
|
|
margin-bottom: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cases__tile-title {
|
||
|
|
padding: 16px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|