frog-website/src/lib/section.scss

48 lines
1023 B
SCSS

.section {
margin-bottom: var(--space-xlarge);
display: flex;
flex-direction: column;
@media (max-width: 768px) {
margin-bottom: var(--space-large);
}
&--title {
display: flex;
flex-direction: column;
align-items: center;
@media (max-width: 768px) {
flex-direction: row;
justify-content: center;
}
&::before {
width: 150px;
height: 150px;
background: center / contain no-repeat var(--image);
content: "";
@media (max-width: 768px) {
width: 50px;
height: 50px;
margin-right: var(--space-small);
}
}
&:hover::before {
background-image: var(--hover-image);
}
}
&--content {
display: flex;
flex-direction: column;
align-items: center;
@media (max-width: 768px) {
grid-area: 2 / 1 / 3 / 4;
}
}
}