frog-website/css/content.css

71 lines
1.1 KiB
CSS

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