Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import "../utils/mixins";
- .showcase {
- &__box {
- }
- &__video{
- width: 100%;
- min-height: auto;
- object-fit: cover;
- object-position: center;
- }
- &__text {
- z-index:10;
- position: absolute;
- top: 50%;
- left: 50%;
- line-height: 2em;
- transform: translate(-50%, -50%);
- text-align: center;
- color: white;
- h2 {
- }
- }
- }
- @include smartphone {
- .showcase {
- &__video{
- }
- &__box {
- }
- }
- }
- @include tablet {
- .showcase {
- &__text {
- h1 {
- font: $showcase-font-tablet;
- }
- }
- &__video{
- display: inline-block;
- position: relative; /* allows repositioning */
- left: 100%; /* move the whole width of the image to the right */
- margin-left: -200%;
- height: 80vh;
- }
- &__box {
- text-align: center; /* ensures the image is always in the h-middle */
- overflow: hidden;
- }
- }
- }
- @include desktop {
- .showcase {
- &__text {
- top: 40%;
- h1 {
- font: $showcase-font-desktop;
- }
- }
- &__box {
- height: 100vh;
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement