@layer addon { .article { .templateCover { padding-bottom: 0; padding-top: calc(var(--section) / 2); @media (max-width: 56em) { min-height: auto; } @media (--max-fablet) { min-height: auto; } .goBack { grid-column: span 12; @media (min-width: 56em) { grid-column: span 2; } @media (--min-fablet) { grid-column: span 2; } 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; } } } } } } } .container { row-gap: var(--padding); } .media { grid-column: 3 / span 8; position: relative; order: 2; border-radius: var(--border-radius); &:before { display: none; } } .inner { gap: var(--gutter); align-items: flex-start; z-index: 1; @media (max-width: 56em) { grid-column: span 12; } @media (--max-fablet) { grid-column: span 12; } .title { display: inline-block; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(45deg, var(--color3), var(--color1) 75%); text-transform: uppercase; font-size: var(--l-fontsize); line-height: var(--l-lineheight); text-align: left; padding-top: 10px; /* needed for diaeresis */ } .publication { font-weight: 500; } .tags { .tag { color: var(--color-dark); box-shadow: 0 0 0 1px var(--color-dark); } } } } .templateContent { padding-top: var(--padding); h1, h2, h3, h4 { text-transform: uppercase; font-size: var(--s-fontsize); line-height: var(--s-lineheight); margin: var(--gutter) 0; } p { margin-bottom: var(--gutter); } .line { height: 2px; background-color: var(--color-dark); } } } }