.curve-divider-svg { overflow: hidden; } .curve-divider-svg svg { width: 100%; } .display-event.event2 .collection-banner, .display-nightspot.nightspot2 .collection-banner { display: block; width: calc(100% - 10px); height: 12rem; margin: 10px 5px; background-position: center; background-repeat: no-repeat; background-size: 100%; } .display-event.event2 .collection-banner a, .display-nightspot.nightspot2 .collection-banner a { height: 100%; background-image: linear-gradient(90deg, var(--background-primary-color) -25%, transparent 150%); display: flex; } .display-event.event2 .collection-banner a > div, .display-nightspot.nightspot2 .collection-banner a > div { color: var(--text-primary-color); text-align: left; flex: 1; margin: auto 0; padding: 2% 5% 0; } .display-event.event2 .collection-banner p:first-child, .display-nightspot.nightspot2 .collection-banner p:first-child { padding: 0.2rem 0; margin: 0; } .display-event.event2 .collection-banner p:first-child, .display-nightspot.nightspot2 .collection-banner p:first-child { font-size: 2rem; font-weight: bold; margin-bottom: 5px; } .display-event.event2 .collection-banner p:last-child, .display-nightspot.nightspot2 .collection-banner p:last-child { line-height: 1.2; } @media only screen and (max-width: 400px) { .display-event.event2 .collection-banner, .display-nightspot.nightspot2 .collection-banner { background-size: cover; width: 90%; margin: 10px auto; } } @media only screen and (min-width: 400px) { .display-event.event2 .collection-banner:hover, .display-nightspot.nightspot2 .collection-banner:hover { background-size: 120%; } .display-event.event2 .collection-banner:hover a > div, .display-nightspot.nightspot2 .collection-banner:hover a > div { padding: 0 5% 1%; } } .item-collections a { display: inline-flex; }