pratice-time-landing-page-h.../assets/css/styles.css

104 lines
1.4 KiB
CSS

.page-header {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 28px 0 29px 0;
}
.header-logo {
display: block;
}
.information {
max-width: 1215px;
margin: 0 auto;
padding: 5.25rem 1.625rem 5.875rem 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.information {
--grid-space: 5.4375rem 7.75rem;
}
.information-subtitle {
font-weight: 400;
}
.information-title {
font-weight: 500;
margin-bottom: 19px;
}
/*= =*\
= UTILS =
\*= =*/
.sm-wrapper {
display: flex;
}
.center {
align-items: center;
justify-content: center;
gap: var(--grid-space);
}
.text-upper {
text-transform: uppercase;
}
.text-center {
text-align: center;
}
.bg-black {
background-color: var(--bg-clr-black);
}
.bg-blue-gradient-180 {
background-color: var(--gradient-blue-180);
}
@media screen and (max-width:768px) {
.sm-wrapper {
flex-direction: column;
}
}
@media screen and (min-width: 769px) {
.information {
padding: 5rem 0 5.875px 0;
}
.information-title {
font-size: 3rem;
}
.information-subtitle {
font-size: 2rem;
}
}
@media screen and (max-width: 414px) {
.hero-image-desktop {
display: none;
}
.hero-image-mobile {
display: flex;
}
}
@media screen and (min-width: 415px) {
.hero-image-desktop {
display: flex;
}
.hero-image-mobile {
display: none;
}
}