@layer addon { .collectionPerson { grid-column: 1 / span 4; padding: 0; height: fit-content; display: flex; flex-direction: column; gap: var(--padding); } .intro { grid-column: span 8; } .collectionJobPosting { grid-column: 6 / span 7; padding: 0; .grid { order: unset!important; } article { grid-column: span 6; } } .collectionPerson, .collectionJobPosting { .container { grid-column: full-start / full-end; } } .templateCollection { @media (max-width: 56em) { grid-column: span 12; } @media (--max-fablet) { grid-column: span 12; } } .templatePersonDetail { padding: calc(var(--section) / 2) 0 var(--section); .container { align-items: flex-start; .goBack { grid-column: span 12; button { display: flex; align-items: center; height: fit-content; gap: calc(var(--gutter) / 2); cursor: pointer; color: var(--font-color); .icon { .transparent { opacity: 0.2; } } &:hover { @media (hover: hover) { .icon:last-of-type { path { fill: var(--color-light); transition: var(--transition); &.transparent { fill: var(--color2); opacity: 1; } } } } } } } .intro { padding-bottom: var(--gutter); } } .collectionPerson { @media (max-width: 56em) { grid-column: span 12; } @media (--max-fablet) { grid-column: span 12; } .block { justify-content: center; align-items: center; @media (min-width: 56em) { aspect-ratio: 3 / 4; } @media (--min-fablet) { aspect-ratio: 3 / 4; } } .inner { width: 100%; .header { .title { font-size: var(--m-fontsize); line-height: var(--m-lineheight); } .subTitle { font-size: var(--fontsize); line-height: var(--lineheight); margin-top: 0; } } .description { font-size: var(--xs-fontsize); } .footer { .contactPoints { display: flex; flex-wrap: wrap; flex-direction: column; max-width: fit-content; gap: calc(var(--padding) / 4); .button { font-size: var(--xs-fontsize); padding: 0; &:after { display: none; } .icon { display: none; } .text { padding-left: 0; } &:hover { @media (hover: hover) { background-color: transparent; color: var(--color-light); } } } } .button { width: fit-content; } } .playButton { position: absolute; bottom: calc(var(--padding) /2 ); right: calc(var(--padding) /2 ); } } } .videoPlaying { .playButton { .icon { &.play {opacity: 0;} &.pause {opacity: 1;} } &:hover { @media (hover: hover) { opacity: 1; } } &:after { opacity: 0; } } video { position: absolute; top: 0; object-position: top; } } } }