82 lines
1.6 KiB
CSS
82 lines
1.6 KiB
CSS
|
|
:root{
|
|
--fw-reg: 400;
|
|
--fw-bold: 700;
|
|
--clr-accent: #0dcaf0;
|
|
|
|
--fs-h1: 3rem;
|
|
--fs-h3: 1.25rem;
|
|
--bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25),
|
|
0.125em 0.125em 0.25em rgba(0,0,0,.15);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
:root {
|
|
--fs-h1: 4.5rem;
|
|
}
|
|
}
|
|
|
|
section.intro{
|
|
padding: 5em 2em;
|
|
position: relative;
|
|
}
|
|
|
|
img.intro__img{
|
|
display: block;
|
|
max-width: 100%;
|
|
box-shadow: var(--bs);
|
|
}
|
|
|
|
h1.section__title{
|
|
line-height: 1;
|
|
margin: 0;
|
|
font-size: var(--fs-h1);
|
|
margin-bottom: .25em;
|
|
font-weight: var(--fw-reg);
|
|
}
|
|
|
|
.section__title strong {
|
|
font-weight: var(--fw-bold);
|
|
display: block;
|
|
}
|
|
|
|
.section__subtitle {
|
|
margin: 0;
|
|
font-size: var(--fs-h3);
|
|
background: var(--clr-accent);
|
|
padding: .25em 1em;
|
|
font-family: var(--ff-secondary);
|
|
margin-bottom: 1em;
|
|
display: inline-block;
|
|
color: black;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
section.intro {
|
|
display: grid;
|
|
width: min-content;
|
|
margin: 0 auto;
|
|
grid-column-gap: 1em;
|
|
grid-template-areas:
|
|
"img title"
|
|
"img subtitle";
|
|
grid-template-columns: min-content max-content;
|
|
}
|
|
|
|
img.intro__img {
|
|
grid-area: img;
|
|
min-width: 250px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.section__subtitle {
|
|
align-self: start;
|
|
grid-column: -1 / 1;
|
|
grid-row: 2;
|
|
text-align: right;
|
|
position: relative;
|
|
left: -1.5em;
|
|
width: calc(100% + 1.5em);
|
|
}
|
|
} |