.wrap { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; } .content { flex: 3; z-index: 2; padding: $gap; background: $content_bg; border-radius: $radius; flex: 0 1 $limited_width; } .column { flex: 1; background: $content_bg; position: relative; z-index: 2; margin-right: $gap; border-radius: $radius; padding: $gap * 2; display: none; } .cover { position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; background: 50% 0% no-repeat url("~/sprites/boris_bg.svg"); background-size: cover; } .header { font-size: 2em; } .daygrid { display: grid; grid-template-columns: 1fr 100%; column-gap: $gap; align-items: center; } .day { font-size: 2em; font-weight: 600; text-align: right; } .label { font: $font_14_regular; text-transform: uppercase; margin-bottom: 5px; opacity: 0.5; grid-column: 1/3; } .line { grid-column: 1/3; height: $gap * 4; } .container { display: flex; align-items: flex-start; justify-content: center; flex-direction: row; flex: 0 1 $limited_width; width: 100%; // margin: auto; // @include tablet { // width: 100%; // } } .image { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; padding-bottom: 33.333%; position: relative; width: 100%; img { position: absolute; top: 0; left: 0; width: 100%; } @include tablet { height: 100px; width: 100%; img { display: none; } } } .caption { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: $limited_width; height: 100%; display: flex; align-items: flex-start; justify-content: flex-end; font: $font_48_bold; font-size: 72px; line-height: 0.95em; flex-direction: column; padding-bottom: $gap * 2; padding: 0 0 $gap * 2; transform: translate(-50%, 0); box-sizing: border-box; @include tablet { align-items: flex-start; justify-content: center; width: 100%; padding: $gap; font-size: 48px; } } .caption_text { max-width: 400px; text-transform: uppercase; }