165 lines
3.5 KiB
Sass
165 lines
3.5 KiB
Sass
@import "../parts/compound"
|
|
|
|
.quests
|
|
margin-top: 30px
|
|
background-size: cover
|
|
position: relative
|
|
z-index: 1
|
|
font-family: 'PT Sans', sans-serif
|
|
.icon-hidden
|
|
opacity: 0.3
|
|
&-overlay
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
background-color: rgba(0, 0, 0, .35)
|
|
z-index: 2
|
|
height: 408px
|
|
&-headers
|
|
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5)
|
|
position: relative
|
|
height: 408px
|
|
z-index: 3
|
|
// height: 100%
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
align-items: center
|
|
color: #ffffff
|
|
text-align: center
|
|
h1
|
|
font-size: 48px
|
|
font-weight: 600
|
|
line-height: 0.75
|
|
letter-spacing: 0.4px
|
|
margin-bottom: 32px
|
|
position: relative
|
|
z-index: 3
|
|
h2
|
|
font-size: 26px
|
|
font-weight: 600
|
|
line-height: 0.75
|
|
letter-spacing: 0.4px
|
|
position: relative
|
|
z-index: 3
|
|
&-content
|
|
margin: 70px auto
|
|
max-width: 1280px !important
|
|
margin-bottom: -20px
|
|
a
|
|
text-decoration: none
|
|
outline: none
|
|
&__item
|
|
height: 296px
|
|
width: 400px
|
|
max-width: 400px
|
|
min-width: 400px
|
|
background-size: cover
|
|
position: relative
|
|
border-radius: 20px
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: flex-end
|
|
align-items: flex-start
|
|
padding: 0
|
|
margin-bottom: 50px
|
|
.quest__text
|
|
width: 100%
|
|
padding: 0 25px 60px 25px
|
|
background: url('../../img/quests/exitquests-mask.svg') top center no-repeat
|
|
border-radius: 0 0 20px 20px
|
|
height: 160px
|
|
color: #ffffff
|
|
h3
|
|
font-size: 24px
|
|
font-weight: 600
|
|
letter-spacing: 0.3px
|
|
margin: 25px 0 8px 0
|
|
p
|
|
font-size: 16px
|
|
letter-spacing: 0.1px
|
|
margin-bottom: 8px
|
|
&-icons
|
|
max-width: 350px
|
|
margin-right: auto
|
|
margin-left: auto
|
|
display: flex
|
|
// flex-direction:
|
|
justify-content: space-between
|
|
align-items: center
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 1200px)
|
|
.quests
|
|
&-headers
|
|
background-size: cover
|
|
&-content
|
|
.row
|
|
justify-content: center !important
|
|
&__item
|
|
margin: 30px auto
|
|
max-height: 450px !important
|
|
|
|
|
|
@media screen and (max-width: 768px)
|
|
.quests
|
|
&-headers
|
|
height: 200px
|
|
h1
|
|
font-size: 34px
|
|
h2
|
|
font-size: 20px
|
|
//max-width:
|
|
&-overlay
|
|
height: 200px
|
|
|
|
|
|
@media screen and (max-width: 576px)
|
|
.quests
|
|
margin-top: 0
|
|
.quests-content
|
|
.row
|
|
justify-content: center !important
|
|
.quests-content__item
|
|
margin: 15px auto !important
|
|
.quests
|
|
&-headers
|
|
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5)
|
|
h1
|
|
font-size: 28px
|
|
h2
|
|
font-size: 16px !important
|
|
max-width: 395px
|
|
line-height: 1.1
|
|
&-content
|
|
margin-top: 20px
|
|
margin-bottom: 20px
|
|
&__item
|
|
min-width: 288px
|
|
max-width: 288px
|
|
width: 288px
|
|
height: 213px
|
|
.quest__text
|
|
padding: 0 15px 15px 15px
|
|
height: 114px
|
|
h3
|
|
font-size: 16px
|
|
margin-top: 20px
|
|
p
|
|
font-size: 14px
|
|
margin-bottom: 0
|
|
line-height: 1.15
|
|
img
|
|
max-width: 14px
|
|
.quests-content__item-icons
|
|
justify-content: space-between !important
|
|
|
|
|
|
@media screen and (max-width: 320px)
|
|
.quest-slider
|
|
.carousel-control-next, .carousel-control-prev
|
|
top: 65% !important |