abdullahtarawneh.com/assets/scss/index/hero.scss

37 lines
636 B
SCSS
Raw Normal View History

2020-10-10 19:47:58 +00:00
.hero .container {
display: grid;
2020-10-24 03:47:29 +00:00
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"img"
"txt"
"cta";
@media (min-width: 600px) {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"txt img"
"cta img";
}
2020-10-10 19:47:58 +00:00
gap: 1em;
}
.hero img {
2020-10-24 03:47:29 +00:00
grid-area: img;
2020-10-10 19:47:58 +00:00
width: 100%;
2020-10-24 03:47:29 +00:00
max-height: 160px;
@media (min-width: 600px) {max-height: unset;}
2020-10-10 19:47:58 +00:00
}
2020-10-24 03:47:29 +00:00
.hero .cta {
grid-area: cta;
align-self: start;
}
.hero .headline {
grid-area: txt;
2020-10-10 19:47:58 +00:00
font-size: clamp(1.4em, 7vw, 3em);
line-height: 1.2;
align-self: end;
2020-10-24 03:47:29 +00:00
@media (min-width: 600px) {
max-width: 11ch;
}
2020-10-10 19:47:58 +00:00
}