@import url('https://fonts.googleapis.com/css2?family=Noticia+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --brand-maroon: #7f2629;
  --brand-red: #b2292e;
  --brand-bright-red: #d7282f;
  --brand-sage: #98b9ac;
  --brand-grey: #f2f2f2;
  --brand-text-muted: #535353;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Noticia Text', serif;
  background-color: #ffffff;
  color: #000;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: var(--brand-maroon);
  padding: 25px 0;
}

.header__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.header__title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.main {
  flex: 1;
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 20px;
}

.page-heading {
  color: var(--brand-red);
  font-size: 28px;
  font-style: italic;
  font-weight: 700;
  margin: 0 0 40px;
}

.listing-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.listing-grid-item {
  border-left: 3px solid var(--brand-bright-red);
  background: var(--brand-grey);
  padding: 30px;
  display: flex;
  gap: 10px;
}

.listing-grid-item::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 18C6.61305 18 4.32387 17.0518 2.63604 15.364C0.948212 13.6761 0 11.3869 0 9C0 6.61305 0.948212 4.32387 2.63604 2.63604C4.32387 0.948212 6.61305 0 9 0C11.3869 0 13.6761 0.948212 15.364 2.63604C17.0518 4.32387 18 6.61305 18 9C18 11.3869 17.0518 13.6761 15.364 15.364C13.6761 17.0518 11.3869 18 9 18ZM8.01562 11.3906V13.3594H9.98438V11.3906H8.01562ZM7.875 4.5L8.325 10.125H9.675L10.125 4.5H7.875Z' fill='%2398B9AC'/%3E%3C/svg%3E");
}

.listing-grid-item__details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.listing-grid-item__details__event-date {
  color: #000;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.listing-grid-item__details__title {
  color: var(--brand-red);
  font-size: 21px;
  font-style: italic;
  font-weight: 700;
  margin-bottom: 5px;
}

.listing-grid-item__details__description {
  color: #000;
  font-size: 16px;
  white-space: pre-line;
}

.listing-grid-item__details__updated-date {
  color: var(--brand-text-muted);
  font-size: 14px;
  margin-top: 5px;
}

.empty-state {
  color: var(--brand-text-muted);
  font-size: 16px;
}

.footer {
  background-color: var(--brand-maroon);
  padding: 20px;
  text-align: center;
}

.footer__text {
  color: #fff;
  font-size: 13px;
  margin: 0;
}

@media (max-width: 767px) {
  .main {
    padding: 40px 16px;
  }
  .page-heading {
    font-size: 22px;
  }
  .listing-grid-item {
    padding: 20px;
  }
}