Fix video modal secondary column sizing

This commit is contained in:
thePR0M3TH3AN committed 2025-10-23 21:53:36 -04:00
1 parent 5e99c3d3b9
commit 17115d6e15
3 files changed
+33 -24

No files matched your search

+30 -22
View File
@@ -1669,38 +1669,46 @@
}
.video-modal__layout {
--video-modal-primary-columns: minmax(0, 1.2fr);
--video-modal-secondary-columns: minmax(
clamp(var(--space-4xl), 28vw, var(--space-7xl)),
1fr
--video-modal-secondary-size: clamp(
var(--video-modal-secondary-min),
38vw,
var(--video-modal-secondary-max)
);
@apply grid items-start gap-6 lg:gap-8;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: theme('screens.lg')) {
.video-modal__layout {
--video-modal-secondary-size: clamp(
var(--video-modal-secondary-min),
32vw,
var(--video-modal-secondary-max)
);
grid-template-columns:
minmax(0, var(--video-modal-primary-fr, 1.65fr))
minmax(
var(--video-modal-secondary-min),
var(--video-modal-secondary-size)
);
}
.video-modal__primary,
.video-modal__secondary {
min-height: 0;
}
}
@media (min-width: theme('screens.xl')) {
.video-modal__layout {
--video-modal-primary-columns: minmax(0, 1.4fr);
--video-modal-secondary-columns: minmax(
clamp(var(--space-5xl), 30vw, var(--space-8xl)),
1fr
--video-modal-secondary-size: clamp(
var(--video-modal-secondary-min),
28vw,
var(--video-modal-secondary-max)
);
}
}
@media (min-width: theme('screens.lg')) {
.video-modal__layout {
grid-template-columns: var(--video-modal-primary-columns)
var(--video-modal-secondary-columns);
}
}
@media (min-width: theme('screens.lg')) {
.video-modal__primary,
.video-modal__secondary {
min-height: 0;
}
}
.revert-modal__layout {
@apply grid gap-6;
}