mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
54 lines
734 B
SCSS
54 lines
734 B
SCSS
|
.bd-video {
|
||
|
--spacing: 1.5rem;
|
||
|
display: grid;
|
||
|
grid-template-columns: 1fr;
|
||
|
padding: var(--spacing);
|
||
|
|
||
|
&:not(:last-child) {
|
||
|
border-bottom: 2px solid var(--videos-light);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.bd-video-figure {
|
||
|
img,
|
||
|
video {
|
||
|
max-width: 100%;
|
||
|
vertical-align: top;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@include mobile {
|
||
|
.bd-video {
|
||
|
grid-gap: var(--spacing);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@include tablet {
|
||
|
.bd-video {
|
||
|
--spacing: 3rem;
|
||
|
grid-template-columns: 1fr 24em 4em calc(var(--container-width) - 28em) 1fr;
|
||
|
}
|
||
|
|
||
|
.bd-video-info {
|
||
|
grid-column: 2;
|
||
|
}
|
||
|
|
||
|
.bd-video-figure {
|
||
|
grid-column: 4 / span 2;
|
||
|
|
||
|
img {
|
||
|
max-width: 1440px;
|
||
|
}
|
||
|
|
||
|
video {
|
||
|
max-width: 1280px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@include desktop {
|
||
|
.bd-video {
|
||
|
--spacing: 4.5rem;
|
||
|
}
|
||
|
}
|