chore: group media queries with rules

This commit is contained in:
Cory Dransfeldt 2024-09-11 15:21:40 -07:00
parent 6d82c73e2d
commit b178203a09
No known key found for this signature in database
13 changed files with 219 additions and 197 deletions

View file

@ -16,6 +16,10 @@
width: 100%;
height: auto;
aspect-ratio: var(--aspect-ratio-square);
@media screen and (min-width: 768px) {
max-width: 240px;
}
}
& .artist-display {
@ -24,12 +28,21 @@
gap: var(--spacing-xs);
margin-bottom: var(--spacing-base);
@media screen and (min-width: 768px) {
flex-direction: row;
gap: var(--spacing-md);
}
& .artist-meta {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-top: var(--spacing-base);
@media screen and (min-width: 768px) {
margin-top: 0;
}
& p {
margin: 0;
@ -66,21 +79,4 @@
p.concerts + ul + hr {
display: none;
}
@media screen and (min-width: 768px) {
.artist-focus {
& img {
max-width: 240px;
}
& .artist-display {
flex-direction: row;
gap: var(--spacing-md);
& .artist-meta {
margin-top: 0;
}
}
}
}