body {
    
}

/*
--------------------------------------------------
    Stuff for customized header
--------------------------------------------------
*/
.box-overlay {
    -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      background: #fff; /* fallback for browsers that don't understand rgba */
      background-color: rgba(0,0,0, 0.5); /* slightly transparent white */
      border-color: rgba(0,0,0,0.2); /*Very transparent black*/
  }

  .hero-image {
      /*background-image: url("{{$headImage}}");*/ /* The image used */
      background-color: #cccccc; /* Used if the image is unavailable */
      /*height: 160%;*/ /* You must set a specified height */
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover; /* Resize the background image to cover the entire container */
      background-origin: content-box;
  }

  .logo {
      padding: 0;	
  }

  .logo__link {
      padding: 10px 0;
  }

  .logo__title {
      color: #fff;
  }

  .logo__tagline {
      color: #fff;
  }

/* Card layout for homepage */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card {
    flex: 1 1 calc(33.333% - 20px);
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 15px;
    background: #fff;
}
.card article.list__item {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.card .list__thumbnail {
    float: none;
    margin: 0 0 10px 0;
}

/* Donation cards */
.donation-cards,
.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0.5rem;
    justify-content: center;
}

.donation-card,
.footer-card {
    flex: 1 1 200px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 10px;
    background: #fff;
    text-align: center;
}

.footer-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-social .widget-social__link {
    display: inline-block;
    margin: 0 5px;
}

/* Full width content when sidebar removed */
.no-sidebar .primary {
    flex: 1 1 100%;
    margin: 0;
}

/* Reduce sidebar width by 30% */
:root {
    --content-width: 75.34%;
    --sidebar-width: 22.16%;
}

@media screen and (min-width: 768px) {
    .primary {
        -webkit-flex: 1 0 var(--content-width);
        flex: 1 0 var(--content-width);
    }

    .sidebar {
        -webkit-flex: 1 0 var(--sidebar-width);
        flex: 1 0 var(--sidebar-width);
    }
}

/* Center donate button in widget */
.widget-donate__item,
.footer-donate {
    text-align: center;
}

/* Center Donorbox button in donation card */
.donation-card .dbox-donation-page-button {
    margin-left: auto;
    margin-right: auto;
}

=======