chore: group media queries with rules
This commit is contained in:
parent
6d82c73e2d
commit
b178203a09
13 changed files with 219 additions and 197 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Reference in a new issue