/**
* =============================================================================
*
* List section
*
* =============================================================================
*/
@layer projects {
@scope (.scope.list) to (.scope) {
:scope {
display: grid;
justify-items: center;
padding-block: calc(100 * var(--px-to-rem));
}
._inner {
display: grid;
gap: calc(100 * var(--px-to-rem));
inline-size: var(--content-width);
}
/* Item */
._salon {
display: grid;
gap: calc(50 * var(--px-to-rem));
grid-template-columns: repeat(2, 1fr);
}
._image {
aspect-ratio: 1 / 0.614;
background: #f7f2f2;
display: grid;
overflow: hidden;
place-items: center;
position: relative;
}
._image:not(:has(img))::after {
aspect-ratio: 458 / 150;
background: var(--color-accent);
content: '';
height: auto;
mask-image: url('data:image/svg+xml;utf-8,');
mask-position: center center;
mask-repeat: no-repeat;
mask-size: cover;
position: absolute;
width: 30%;
}
._image img {
height: 100%;
position: absolute;
}
._slug {
color: var(--color-accent);
font-family: var(--font-futura);
font-size: var(--font-size-50);
letter-spacing: 0.3em;
line-height: calc(16 * var(--px-to-rem));
text-transform: uppercase;
}
._name {
font-size: var(--font-size-400);
font-weight: var(--font-weight-medium);
letter-spacing: 0;
line-height: 1.6;
padding-top: calc(8 * var(--px-to-rem));
}
._address {
line-height: 2;
padding-top: calc(4 * var(--px-to-rem));
}
._traffic {
display: grid;
gap: calc(12 * var(--px-to-rem));
padding-top: calc(16 * var(--px-to-rem));
}
._traffic:not(:has(._traffic-item)) {
display: none;
}
._traffic-item {
--_icon-size: calc(20 * var(--px-to-rem));
--_gap: calc(10 * var(--px-to-rem));
font-size: var(--font-size-50);
padding-left: calc(var(--_icon-size) + var(--_gap));
position: relative;
}
._traffic-item::before {
aspect-ratio: 1 / 1;
background: var(--color-accent);
content: '';
left: 0;
mask-position: center center;
mask-repeat: no-repeat;
mask-size: cover;
position: absolute;
top: 0;
width: var(--_icon-size);
}
._traffic-item[data-icon='train']::before {
mask-image: url('data:image/svg+xml;utf-8,');
}
._traffic-item[data-icon='car']::before {
mask-image: url('data:image/svg+xml;utf-8,');
}
._traffic-heading {
color: var(--color-accent);
line-height: 1.5;
}
._traffic-description {
line-height: 2;
}
._more {
padding-top: calc(16 * var(--px-to-rem));
}
._cta {
background: var(--color-accent);
border: 1px solid transparent;
color: var(--color-white);
display: block;
font-size: var(--font-size-50);
font-weight: var(--font-weight-medium);
line-height: calc(16 * var(--px-to-rem));
padding-block: calc(8 * var(--px-to-rem));
text-align: center;
transition-duration: var(--duration-default);
transition-property: background, border-color, color, scale;
transition-timing-function: var(--ease-custom);
width: calc(150 * var(--px-to-rem));
}
._cta:active {
scale: 0.95;
}
@media (hover: hover) and (pointer: fine) {
._cta:hover {
background: transparent;
border-color: currentColor;
color: var(--color-accent);
}
}
@media (width <= 767px) {
:scope {
padding-block: calc(50 * var(--px-to-rem));
}
._inner {
gap: calc(40 * var(--px-to-rem));
}
._salon {
gap: calc(32 * var(--px-to-rem));
grid-template-columns: 1fr;
}
._image {
aspect-ratio: 16 / 9;
}
._name {
padding-top: calc(4 * var(--px-to-rem));
}
._address {
font-size: var(--font-size-50);
padding-top: 0;
}
._more {
padding-top: calc(32 * var(--px-to-rem));
}
._cta {
font-size: var(--font-size-300);
padding: calc(18 * var(--px-to-rem)) calc(48 * var(--px-to-rem));
width: 100%;
}
}
}
}