97 lines
No EOL
1.9 KiB
CSS
97 lines
No EOL
1.9 KiB
CSS
.now__section--header {
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.media__grid {
|
|
display: grid;
|
|
gap: .5rem;
|
|
}
|
|
|
|
.media__grid.square {
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
}
|
|
|
|
.media__grid.vertical {
|
|
grid-template-columns: repeat(3,minmax(0,1fr));
|
|
}
|
|
|
|
.media__grid.vertical .item__wrapper {
|
|
max-width: 193px;
|
|
}
|
|
|
|
.media__grid .item__wrapper {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
border: 1px solid var(--blue-600);
|
|
border-radius: var(--rounded-lg);
|
|
overflow: hidden;
|
|
transition-property: border-color;
|
|
transition-timing-function: var(--transition-ease-in-out);
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
.media__grid .item__wrapper:hover {
|
|
border-color: var(--blue-800)
|
|
}
|
|
|
|
.media__grid .item__cover {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: var(--rounded-sm);
|
|
}
|
|
|
|
.media__grid .item__cover.gradient {
|
|
background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.75));
|
|
}
|
|
|
|
.media__grid .item__meta-text {
|
|
position: absolute;
|
|
padding: 0 .375rem;
|
|
width: 90%;
|
|
bottom: .375rem;
|
|
}
|
|
|
|
.media__grid .item__meta-text .header,
|
|
.media__grid .item__meta-text .subheader {
|
|
color: var(--white);
|
|
font-size: var(--font-size-xs);
|
|
line-height: var(--line-height-xs);
|
|
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
|
}
|
|
|
|
.media__grid .item__image,
|
|
.media__grid .item__image > * {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.media__grid.square {
|
|
grid-template-columns: repeat(4,minmax(0,1fr));
|
|
}
|
|
|
|
.media__grid.vertical {
|
|
grid-template-columns: repeat(6,minmax(0,1fr));
|
|
}
|
|
|
|
.media__grid.vertical .item__wrapper {
|
|
max-width: 121px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.media__grid .item__wrapper {
|
|
border-color: var(--blue-400);
|
|
}
|
|
|
|
.media__grid .item__wrapper:hover,
|
|
.media__grid .item__wrapper:focus,
|
|
.media__grid .item__wrapper:active {
|
|
border-color: var(--blue-200);
|
|
}
|
|
} |