/* If two consecutive sections share the same data-bg-color, remove padding-top on the second */
section[data-bg-color=bg-white] + section[data-bg-color=bg-white], section[data-bg-color=bg-buff] + section[data-bg-color=bg-buff] {
  padding-top: 0 !important;
}

/* repeat for each background color you use */
.p-20 {
  padding: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

/*
html .container, html .container-fluid {
    max-width: 100%;

    img {
        max-width: 100%;
    }
}
    */
/* If two consecutive sections share the same data-bg-color, remove padding-top on the second */
section[data-bg-color=bg-white] + section[data-bg-color=bg-white], section[data-bg-color=bg-buff] + section[data-bg-color=bg-buff] {
  padding-top: 0 !important;
}

/* repeat for each background color you use */
.p-20 {
  padding: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

/*
html .container, html .container-fluid {
    max-width: 100%;

    img {
        max-width: 100%;
    }
}
    */
.homepage-banner__quick-links .quick-links__heading {
  color: #b1006e;
  font-size: 16px;
  font-weight: 700;
}
.homepage-banner__quick-links .quick-link {
  background: #ffffff;
  box-shadow: 0px 0px 20px rgba(31, 31, 31, 0.12);
  color: #1f1f1f;
  font-size: 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: 0.2s;
  top: 0;
}
@media (min-width: 768px) {
  .homepage-banner__quick-links .quick-link {
    width: 0;
    flex-direction: column;
    text-align: center;
  }
}
.homepage-banner__quick-links .quick-link__title {
  align-self: center;
  color: inherit;
  line-height: 1.1;
  font-weight: 600;
}
.homepage-banner__quick-links .quick-link__icon {
  background: rgb(204, 237, 242.4);
  border-radius: 24px;
  color: #286e71;
  font-size: 0;
  height: 36px;
  margin: 0 1rem 0 0;
  min-height: 36px;
  width: 36px;
  overflow: hidden;
  width: 36px;
  transition: 0.2s;
}
@media (min-width: 768px) {
  .homepage-banner__quick-links .quick-link__icon {
    height: 48px;
    margin: 0 auto;
    min-height: 48px;
    min-width: 48px;
    width: 48px;
  }
}
.homepage-banner__quick-links .quick-link__icon .material-symbols-outlined {
  position: relative;
}
.homepage-banner__quick-links .quick-link__icon .material-symbols-outlined .icon-default, .homepage-banner__quick-links .quick-link__icon .material-symbols-outlined .icon-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: font-size 0.1s ease;
}
@media (max-width: 767.98px) {
  .homepage-banner__quick-links .quick-link__icon .material-symbols-outlined .icon-default {
    font-size: 24px;
  }
}
@media (min-width: 768px) {
  .homepage-banner__quick-links .quick-link__icon .material-symbols-outlined .icon-default {
    font-size: 33px;
  }
}
.homepage-banner__quick-links .quick-link__icon .material-symbols-outlined .icon-default {
  opacity: 1;
  transition: opacity 0.1s ease 0s; /* 0.5s duration, 1s delay */
}
@media (min-width: 768px) {
  .homepage-banner__quick-links .quick-link__icon .material-symbols-outlined .icon-hover {
    font-size: 36px;
  }
}
.homepage-banner__quick-links .quick-link__icon .material-symbols-outlined .icon-hover {
  opacity: 0;
}
.homepage-banner__quick-links .quick-link:hover, .homepage-banner__quick-links .quick-link:focus {
  background: #0065BD;
  color: #ffffff;
}
.homepage-banner__quick-links .quick-link:hover .quick-link__icon, .homepage-banner__quick-links .quick-link:focus .quick-link__icon {
  background: #003366;
  color: #ffffff;
}
.homepage-banner__quick-links .quick-link:hover .quick-link__icon .material-symbols-outlined .icon-default, .homepage-banner__quick-links .quick-link:focus .quick-link__icon .material-symbols-outlined .icon-default {
  opacity: 0;
}
@media (max-width: 767.98px) {
  .homepage-banner__quick-links .quick-link:hover .quick-link__icon .material-symbols-outlined .icon-default, .homepage-banner__quick-links .quick-link:focus .quick-link__icon .material-symbols-outlined .icon-default {
    font-size: 20px;
  }
}
@media (min-width: 768px) {
  .homepage-banner__quick-links .quick-link:hover .quick-link__icon .material-symbols-outlined .icon-default, .homepage-banner__quick-links .quick-link:focus .quick-link__icon .material-symbols-outlined .icon-default {
    font-size: 30px;
  }
}
.homepage-banner__quick-links .quick-link:hover .quick-link__icon .material-symbols-outlined .icon-hover, .homepage-banner__quick-links .quick-link:focus .quick-link__icon .material-symbols-outlined .icon-hover {
  opacity: 1;
}
@media (max-width: 767.98px) {
  .homepage-banner__quick-links .quick-link:hover .quick-link__icon .material-symbols-outlined .icon-hover, .homepage-banner__quick-links .quick-link:focus .quick-link__icon .material-symbols-outlined .icon-hover {
    font-size: 24px;
  }
}
@media (min-width: 768px) {
  .homepage-banner__quick-links .quick-link:hover .quick-link__icon .material-symbols-outlined .icon-hover, .homepage-banner__quick-links .quick-link:focus .quick-link__icon .material-symbols-outlined .icon-hover {
    font-size: 33px;
  }
}

.homepage-banner__content {
  color: #1f1f1f;
}
.homepage-banner h2 {
  line-height: 1.1em;
  letter-spacing: -2px;
  font-weight: 600;
}
.homepage-banner {
  /*


  &__image {
      overflow: hidden;

      picture {
          overflow: hidden;
      }
      //when there's an image with hat punched out
      @include media-breakpoint-up(lg) {
          .homepage-banner-img--no-punch-out {
              img {
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
              }
          }
      }

      @include media-breakpoint-down(lg) {

          picture {
              aspect-ratio: 3 / 2;
              max-width: 100%;
          }
      }

      @include media-breakpoint-up(lg) {


          picture {


              img {
                  position: absolute
              }
          }
      }
  }

  @include media-breakpoint-up(md) {

      .homepage-banner__image {
          border-radius: 12px;
          width: 100%;
          height: 100%;

          img {
              border-radius: $border-radius;
          }
      }
  }
      */
}