| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- .groom {
- $bottom_shadow_size: 2rem;
- @mixin mobile {
- @media screen and (max-width: 1000px) {
- @content;
- }
- }
- background-color: #ffffff;
- position: relative;
- flex: none;
- height: 15rem;
- background-image: url("//dd.unicraft.org/static/branding/groom/header/bg.png");
- background-repeat: repeat-x;
- background-size: auto 65%;
- background-position: left bottom;
- box-shadow: 0 0 $bottom_shadow_size hsla(0, 0, 0, 0.25);
- margin-bottom: $bottom_shadow_size;
- &__logo {
- flex: none;
- position: absolute;
- left: 4rem;
- bottom: 0;
- z-index: 1;
- max-width: 580px;
- width: 60%;
- @include mobile {
- left: 2rem;
- width: auto;
- height: 35%;
- }
- }
- &__pic {
- position: absolute;
- bottom: -40%;
- height: 133%;
- left: 50%;
- z-index: 2;
- @include mobile {
- left: auto;
- right: 0;
- }
- }
- &__text {
- position: absolute;
- left: calc(55% + 12rem);
- right: 0;
- bottom: 1rem;
- z-index: 3;
- opacity: 1;
- max-width: 280px;
- &__img {
- margin-right: 1rem;
- float: left;
- }
- &--1 {}
- &--2 {}
- &--3 {
- // display: block;
-
- }
- @include mobile {
- left: 2rem;
- width: auto;
- max-width: none;
- bottom: 40%;
- &__img {
- margin-right: 0.25rem;
- height: 1.5rem;
- }
- }
- }
- }
|