/*
 * Same look the page had on themes/blank: three light-grey panels of plain
 * links, 1 / 2 / 3 columns by width. Only the chrome around it is new.
 */

/* Base header has no rule of its own; resource-vibe pages and browse/search
   add this same line. */
header{
   border-bottom: 1px solid #E5E5E5;
}

#main-event-gone section{
   margin-block-end: 32px;
}

#main-event-gone ul {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   list-style: none;
}

#main-event-gone ul li {
   flex: 1 1 100%; /* Default to single column */
   font-size: var(--font-size-l); /* design-system token; base list text is 14px */
   padding: 8px 0;
   margin: 0;
   box-sizing: border-box;
}

/* 2 columns for mid-size phones */
@media (min-width: 360px) and (max-width: 539px) {
   #main-event-gone ul li {
       flex: 1 1 50%;
   }
}

/* 3 columns from 540px up */
@media (min-width: 540px) {
   #main-event-gone ul li {
       flex: 1 1 33.33%;
   }
}

#main-event-gone section:has(ul){
   padding: 16px;
   background: #F8F8F8;
   border-radius: 16px;
}

#main-event-gone section > :is(h1, h2){
   margin-block-end: 12px;
}