Files
web/packages/design-system/lib/components/VideoPlayer/VideoWithCard/videoWithCard.module.css
Rasmus Langvad d0546926a9 Merged in fix/3697-prettier-configs (pull request #3396)
fix(SW-3691): Setup one prettier config for whole repo

* Setup prettierrc in root and remove other configs


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood
2026-01-07 12:45:50 +00:00

85 lines
1.4 KiB
CSS

.videoWithCardWrapper {
width: 100%;
container-type: inline-size;
container-name: videoWithCardWrapper;
@media screen and (min-width: 768px) {
.videoWithCard {
grid-template-columns: 1fr auto;
min-height: 261px;
gap: var(--Space-x1);
.card {
width: 320px;
}
}
@container videoWithCardWrapper (min-width: 793px) {
.videoWithCard {
min-height: 445px;
gap: var(--Space-x2);
.card {
width: 391px;
}
}
}
}
}
.videoWithCard {
display: grid;
width: 100%;
gap: var(--Space-x025);
}
.card {
display: grid;
min-height: 200px;
height: 100%;
width: 100%;
padding: var(--Space-x3) var(--Space-x4);
align-content: center;
border-radius: var(--Corner-radius-lg);
&.style-primary-1 {
background: var(--Surface-Brand-Primary-1-Default);
color: var(--Text-Brand-OnPrimary-1-Heading);
}
&.style-primary-2 {
background: var(--Surface-Brand-Primary-2-Default);
color: var(--Text-Brand-OnPrimary-2-Default);
.heading {
color: var(--Text-Brand-OnPrimary-2-Heading);
}
}
&.variant-quote {
gap: var(--Space-x3);
@media screen and (min-width: 768px) {
gap: var(--Space-x4);
}
}
&.variant-text {
gap: var(--Space-x2);
}
}
.blockquote {
&::before {
content: "“";
}
&::after {
content: "”";
}
}
.cite {
font-style: normal;
display: grid;
}