@layer components {
@scope (.scope.staff-card) to (.scope) {
:scope {
display: grid;
gap: calc(24 * var(--px-to-rem));
}
._image {
aspect-ratio: 231 / 255;
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: 40%;
}
._image img {
height: 100%;
}
._main {
letter-spacing: 0;
}
._head {
border-bottom: 0.5px dashed var(--color-black);
display: grid;
gap: calc(10 * var(--px-to-rem));
padding-bottom: calc(24 * var(--px-to-rem));
}
._name {
font-size: var(--font-size-300);
font-weight: var(--font-weight-medium);
line-height: 1;
}
._position {
font-family: var(--font-noto-sans);
font-size: var(--font-size-50);
font-weight: var(--font-weight-light);
line-height: 2;
}
._body {
display: grid;
gap: calc(24 * var(--px-to-rem));
padding-bottom: calc(32 * var(--px-to-rem));
padding-top: calc(24 * var(--px-to-rem));
}
._message {
font-family: var(--font-noto-sans);
font-size: var(--font-size-50);
font-weight: var(--font-weight-light);
line-height: 2;
}
._tags {
display: flex;
flex-wrap: wrap;
gap: calc(12 * var(--px-to-rem));
}
._tag {
border: 1px solid currentColor;
border-radius: 5px;
color: var(--color-accent);
font-family: var(--font-noto-sans);
font-size: var(--font-size-50);
font-weight: var(--font-weight-medium);
line-height: 1;
padding: calc(8 * var(--px-to-rem)) calc(10 * var(--px-to-rem));
}
._tag::before {
content: '＃';
}
._instagram {
--_icon-size: calc(24 * var(--px-to-rem));
align-items: center;
background: var(--color-accent);
border: 1px solid var(--color-accent);
border-radius: 9999px;
color: var(--color-white);
display: grid;
font-family: var(--font-noto-sans);
gap: calc(16 * var(--px-to-rem));
grid-template-columns: var(--_icon-size) auto;
justify-content: center;
letter-spacing: 0.1em;
line-height: 1;
padding: calc(16 * var(--px-to-rem)) calc(40 * var(--px-to-rem));
transition-duration: var(--duration-default);
transition-property: background, border-color, color;
transition-timing-function: var(--ease-custom);
}
._instagram::before {
aspect-ratio: 1 / 1;
background: currentColor;
content: '';
mask-image: url('data:image/svg+xml;utf-8,');
mask-position: center center;
mask-repeat: no-repeat;
mask-size: cover;
}
@media (hover: hover) and (pointer: fine) {
._instagram:hover {
background: transparent;
border-color: currentColor;
color: var(--color-accent);
}
}
@media (width <= 767px) {
._head {
padding-bottom: calc(18 * var(--px-to-rem));
}
._name {
font-size: var(--font-size-200);
}
._body {
gap: calc(18 * var(--px-to-rem));
padding-top: calc(18 * var(--px-to-rem));
}
._message {
font-size: var(--font-size-25);
}
._tags {
gap: calc(8 * var(--px-to-rem));
}
._tag {
border: 1px solid currentColor;
font-size: calc(9 * var(--px-to-rem));
padding: calc(6 * var(--px-to-rem));
}
._instagram {
--_icon-size: calc(14.5 * var(--px-to-rem));
font-size: var(--font-size-50);
gap: calc(8 * var(--px-to-rem));
padding: calc(12 * var(--px-to-rem));
}
}
}
}