assets/css/blocks/intro-with-columns.css

45 lines
928 B
CSS

.intro-with-columns {
grid-column: 1 / -1;
grid-template-rows: var(--space-30);
width: 100%;
padding-bottom: var(--space-10);
}
.intro-with-columns__text-top,
.intro-with-columns__text-bottom {
grid-column: 2 / 16;
}
.intro-with-columns__text-top {
grid-row: 2;
}
.intro-with-columns__text-bottom {
margin-top: var(--space-2);
}
.intro__with-columns-right {
grid-column: 2 / 16;
}
@media (min-width: 800px) {
.intro-with-columns__text-top,
.intro-with-columns__text-bottom {
grid-column: 2 / 9;
}
.intro-with-columns__text-top {
grid-row: 2;
}
.intro-with-columns__text-bottom {
grid-row: 3;
}
.intro__with-columns-right {
grid-column: 10 / 16;
grid-row: 2 / span 2;
}
}
.intro-with-columns__images {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--space-2);
margin-bottom: var(--space-5);
}
.intro-with-columns__right-text p {
font-size: 0.8rem;
}