.gsc-control-cse {
	background-color: #faf5e6 !important;
	border: 0 !important;
}
.gsc-input-box {
	border-radius: 8px !important;
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
	margin-right: 16px;
}

.gsc-webResult .gsc-result {
	margin-top: 24px !important;
	background-color: white !important;
}
.gsc-result {
	border-radius: 12px;
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
	/* margin: 24px 0 !important; */
	padding: 16px !important;
	box-sizing: content-box;
	border-top: 8px solid #ffc800 !important;
	overflow: hidden;
}

.gs-title {
	margin: 8px 0;
	font-family: "Fido", sans-serif !important;
	line-height: 24px !important;
}

.gs-visibleUrl {
	margin: 8px 0;
	font-family: "Work Sans", sans-serif;
	font-size: var(--t-body-s);
	line-height: 18px !important;
}
.gs-visibleUrl span {
	font-family: "Work Sans", sans-serif;
	font-size: var(--t-body-s);
	line-height: 18px !important;
}
.gs-snippet {
	font-family: "Work Sans", sans-serif;
	font-size: 16px !important;
	line-height: 24px !important;
	margin: 0 0 8px 0;
}
.gs-image-box {
	height: 100% !important;
	display: none;
}

@media screen and (max-width: 1023px) {
	.gsc-cursor-box {
		margin-top: 24px !important;
		border-radius: 8px !important;
		font-family: "Work Sans", sans-serif;
		background-color: white !important;
		color: black !important;
	}
}

.gsc-cursor-box {
	display: flex;
	justify-content: center;
	margin: 24px auto !important;
	font-family: "Work Sans", sans-serif;
}

.gsc-results .gsc-cursor-box .gsc-cursor-page {
	font-family: "Work Sans", sans-serif;
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
	max-height: 40px !important;
	min-width: 56px !important;
	font-size: 24px !important;
	padding: 8px 16px !important;
	margin-top: 12px !important;
	box-sizing: border-box !important;
	border-radius: 8px !important;
	color: #222222;
}
.gsc-cursor-page {
	background-color: white !important;
	color: black !important;
}
.gsc-cursor-current-page {
	background-color: #222222 !important;
	color: white !important;
}

/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SearchPage-module--outer--04c63 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* 704px */
  min-height: calc(var(--s-1) * 88);
  background-color: var(--c-sandy-fur);
}

.SearchPage-module--searchheading--4f088 {
  display: flex;
  align-items: flex-end;
  background-color: var(--c-sandy-fur);
  min-height: var(--s-7);
  /* 768px*/
  max-width: calc(var(--s-1) * 96);
  width: 100%;
  padding-inline-start: 16px;
  box-sizing: border-box;
}

.SearchPage-module--title--d7911 {
  margin-block-start: var(--s-2);
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .SearchPage-module--title--d7911 {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}

.SearchPage-module--searchcontainer--90b10 {
  background-color: var(--c-sandy-fur);
  /* 704px */
  min-height: calc(var(--s-1) * 88);
  /* 768px*/
  max-width: calc(var(--s-1) * 96);
  width: 100%;
}
.SearchPage-module--searchcontainer--90b10 b {
  color: var(--c-black) !important;
  background-color: var(--c-sunshine-yellow) !important;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-position: under;
  text-underline-offset: 1px;
}
.SearchPage-module--searchcontainer--90b10 button {
  display: flex;
  border-radius: var(--s-2);
  height: var(--s-5);
  box-sizing: border-box;
  padding: var(--s-1) var(--s-2);
  background-color: var(--c-black) !important;
  border: 1px solid var(--c-black) !important;
}
.SearchPage-module--searchcontainer--90b10 button svg {
  fill: var(--c-white) !important;
  min-height: calc(var(--s-1) * 2.5);
  min-width: calc(var(--s-1) * 2.5);
}
.SearchPage-module--searchcontainer--90b10 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
.SearchPage-module--searchcontainer--90b10 a {
  color: var(--c-black) !important;
}
.SearchPage-module--searchcontainer--90b10 span {
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-dawn);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xs);
}
@media (min-width: 25.875rem) {
  .SearchPage-module--searchcontainer--90b10 span {
    line-height: var(--lh-body-s);
  }
}
.KeepInTouchPage-module--relinquishmenthandover--c2f9d {
  position: relative;
  width: 100%;
  background-color: var(--c-sandy-fur);
}

.KeepInTouchPage-module--pagecontent--ac52f {
  background-color: var(--c-sandy-fur);
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.DashboardCard-module--dashboardCardComponent--594d5 {
  display: flex;
  align-items: center;
  width: 100%;
  /* 208px */
  border-radius: var(--s-1);
  line-height: 0;
  background: var(--c-sunshine-yellow);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-box-card);
}
@media (max-width: 46.875rem) {
  .DashboardCard-module--dashboardCardComponent--594d5 {
    width: 100%;
  }
}

.DashboardCard-module--cardImage--f5cdf {
  overflow: hidden;
  object-fit: cover;
  min-height: 100%;
  width: 40%;
  min-width: 40%;
  max-height: calc(var(--s-10) * 3);
}
@media (min-width: 64rem) {
  .DashboardCard-module--cardImage--f5cdf {
    width: 50%;
  }
}

.DashboardCard-module--cardText--b27b6 {
  width: auto;
  padding-block: var(--s-4);
  padding-inline: var(--s-2) var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-1);
}

.DashboardCard-module--title--7051f {
  font-size: var(--t-heading-m);
  line-height: var(--lh-heading-m);
}
@media (min-width: 37.5rem) {
  .DashboardCard-module--title--7051f {
    font-size: var(--t-heading-l);
    line-height: var(--lh-heading-m);
  }
}

.DashboardCard-module--subCopy--00c0c {
  margin: 0;
}
.DogListingPage-module--listingssection--890a6 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
}
.RelinquishmentHandoverPage-module--relinquishmenthandover--25738 {
  position: relative;
  width: 100%;
  background-color: var(--c-sandy-fur);
}

.RelinquishmentHandoverPage-module--pagecontent--a8814 {
  background-color: var(--c-sandy-fur);
  width: 100%;
}
.OurCentresPage-module--ourcentres--55ee3 {
  position: relative;
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CentreListings-module--centrelistingouter--8a65b {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block-start: var(--s-4);
  margin-block-end: 0;
}
@media screen and (min-width: 64rem) {
  .CentreListings-module--centrelistingouter--8a65b {
    margin-bottom: 0;
  }
}
.CentreListings-module--centrelistingouter--8a65b {
  background-color: var(--c-sandy-fur);
  overflow: hidden;
}

.CentreListings-module--centrelistinginner--415fa {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--c-sandy-fur);
}

.CentreListings-module--container--fb587 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.CentreListings-module--cards--2a7bd {
  display: grid;
  min-height: var(--s-4);
  max-height: 100%;
  width: 100%;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  grid-template-columns: 1fr;
}
@media (min-width: 46.875rem) {
  .CentreListings-module--cards--2a7bd {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .CentreListings-module--cards--2a7bd {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.CentreListings-module--sortfilters--ef047 {
  position: relative;
  display: flex;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--s-1);
  padding-inline-end: var(--s-1);
  padding-inline-start: var(--s-1);
  height: var(--s-6);
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-black);
  box-shadow: var(--sh-box-outer);
  text-decoration: none !important;
}
.CentreListings-module--sortfilters--ef047:hover {
  cursor: pointer;
}
.CentreListings-module--sortfilters--ef047 {
  background-color: var(--c-white);
  margin: var(--s-1);
  font-size: var(--t-body-s);
  z-index: var(--z-app-shell);
  max-width: calc(100% - 32px) !important;
}

.CentreListings-module--viewmorewrapper--a152f {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--s-1) * 18);
  padding: var(--s-2);
  gap: var(--s-2);
}

.CentreListings-module--viewmoretext--15d70 {
  font-family: var(--font-family);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  text-align: center;
  font-weight: 500;
}

.CentreListings-module--showmorebutton--19f91 {
  background-color: var(--c-sandy-fur);
}

.CentreListings-module--listbreak--cbc80 {
  margin: var(--s-2) auto;
  border-block-end: 3px solid var(--c-oatmeal-40);
  width: 80%;
}
@media (min-width: 46.875rem) {
  .CentreListings-module--listbreak--cbc80 {
    grid-column: span 2;
  }
}
@media (min-width: 64rem) {
  .CentreListings-module--listbreak--cbc80 {
    grid-column: span 3;
  }
}

.CentreListings-module--loadingbar--ba1ea {
  display: flex;
  justify-self: left;
  border-block-end: 3px solid var(--c-oatmeal-40);
  width: var(--s-common-element-width-m);
}

.CentreListings-module--loadingbarfiller--aee5a {
  border-block-end: 3px solid var(--c-dawn);
  margin-block-end: -3px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.RelinquishmentTriagePage-module--triagetoolpage--f44fc {
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  padding-block-end: var(--s-2);
  box-sizing: border-box;
}

.RelinquishmentTriagePage-module--outer--4804a {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--s-2);
  box-sizing: border-box;
}
@media only screen and (min-width: 37.5rem) {
  .RelinquishmentTriagePage-module--outer--4804a {
    padding: var(--s-8) var(--s-1);
  }
}

.RelinquishmentTriagePage-module--inner--b9f56 {
  width: 100%;
  /* 752px */
  max-width: calc(var(--s-1) * 94);
}

.RelinquishmentTriagePage-module--heading--574d9 {
  width: 100%;
  padding: var(--s-1);
  padding-block-start: var(--s-4);
  box-sizing: border-box;
}
.RelinquishmentTriagePage-module--heading--574d9 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 21px;
  line-height: var(--lh-body-l);
}

.RelinquishmentTriagePage-module--questions--500d0 {
  display: flex;
  flex-direction: column;
  margin: var(--s-4) 0;
  width: 100%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
}

.RelinquishmentTriagePage-module--question--0c56c {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--c-white);
  border-radius: var(--s-1);
  margin: var(--s-1);
  padding: var(--s-1);
  box-sizing: border-box;
  cursor: pointer;
  min-height: 47px;
}
.RelinquishmentTriagePage-module--question--0c56c .RelinquishmentTriagePage-module--inputwrapper--6a993 {
  height: 100%;
  min-width: var(--s-5);
  display: flex;
  align-items: center;
}
.RelinquishmentTriagePage-module--question--0c56c .RelinquishmentTriagePage-module--inputwrapper--6a993 input {
  color: var(--c-black);
}
.RelinquishmentTriagePage-module--question--0c56c .RelinquishmentTriagePage-module--inputwrapper--6a993 input[type=radio] {
  border: 1px solid var(--c-dawn);
}
.RelinquishmentTriagePage-module--question--0c56c .RelinquishmentTriagePage-module--inputwrapper--6a993 input[type=radio]:checked {
  border: 1px solid var(--c-black);
}
.RelinquishmentTriagePage-module--question--0c56c label {
  max-width: calc(100% - 45px);
  font-family: var(--font-family);
  font-weight: 500;
  margin-block-end: 0;
  align-items: center;
}

@media only screen and (min-width: 37.5rem) {
  .RelinquishmentTriagePage-module--question--0c56c .RelinquishmentTriagePage-module--label--b441e {
    font-size: 16px;
  }
}
.RelinquishmentTriagePage-module--buttonwrapper--c5c4f {
  width: 100%;
  padding: var(--s-1);
  margin-block-start: var(--s-1);
  box-sizing: border-box;
}

.RelinquishmentTriagePage-module--back--5b88f {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.RelinquishmentTriagePage-module--back--5b88f:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.RelinquishmentTriagePage-module--back--5b88f:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.RelinquishmentTriagePage-module--back--5b88f:visited {
  text-decoration-style: solid;
}
.RelinquishmentTriagePage-module--back--5b88f {
  background-color: transparent;
  border: 0;
  width: 45px;
  margin: var(--s-2);
  padding: 0;
}
.CharityShopListingPage-module--charityshops--6d08f {
  position: relative;
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CharityShopListings-module--shoplistingouter--b7655 {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block-start: var(--s-4);
  margin-block-end: 0;
}
@media screen and (min-width: 64rem) {
  .CharityShopListings-module--shoplistingouter--b7655 {
    margin-bottom: 0;
  }
}
.CharityShopListings-module--shoplistingouter--b7655 {
  background-color: var(--c-sandy-fur);
  overflow: hidden;
}

.CharityShopListings-module--shoplistinginner--fb8f7 {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--c-sandy-fur);
}

.CharityShopListings-module--container--6730d {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.CharityShopListings-module--cards--f2345 {
  position: relative;
  display: grid;
  min-height: var(--s-4);
  width: 100%;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  grid-template-columns: 1fr;
}
@media (min-width: 37.5rem) {
  .CharityShopListings-module--cards--f2345 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .CharityShopListings-module--cards--f2345 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.CharityShopListings-module--sortfilters--937e2 {
  position: relative;
  display: flex;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--s-1);
  padding-inline-end: var(--s-1);
  padding-inline-start: var(--s-1);
  height: var(--s-6);
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-black);
  box-shadow: var(--sh-box-outer);
  text-decoration: none !important;
}
.CharityShopListings-module--sortfilters--937e2:hover {
  cursor: pointer;
}
.CharityShopListings-module--sortfilters--937e2 {
  background-color: var(--c-white);
  margin: var(--s-1);
  font-size: var(--t-body-s);
  z-index: var(--z-app-shell);
}

.CharityShopListings-module--viewmorewrapper--82a68 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  /* 144px */
  height: calc(var(--s-1) * 18);
  padding: var(--s-2);
}

.CharityShopListings-module--viewmoretext--626b9 {
  font-family: var(--font-family);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  font-weight: 500;
}

.CharityShopListings-module--showmorebutton--a8985 {
  background-color: var(--c-sandy-fur);
}

.CharityShopListings-module--listbreak--a425b {
  margin: var(--s-2) auto;
  border-block-end: 3px solid var(--c-oatmeal-40);
  width: 80%;
}
@media (min-width: 37.5rem) {
  .CharityShopListings-module--listbreak--a425b {
    grid-column: span 2;
  }
}
@media (min-width: 64rem) {
  .CharityShopListings-module--listbreak--a425b {
    grid-column: span 3;
  }
}

.CharityShopListings-module--loadingbar--89384 {
  display: flex;
  justify-self: left;
  border-block-end: 3px solid var(--c-oatmeal-40);
  width: var(--s-common-element-width-m);
}

.CharityShopListings-module--loadingbarfiller--cbae2 {
  border-block-end: 3px solid var(--c-dawn);
  margin-block-end: -3px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroWithCircularImage-module--mobile--3ad0b {
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .IntroWithCircularImage-module--mobile--3ad0b {
    display: none;
  }
}
.IntroWithCircularImage-module--mobile--3ad0b .IntroWithCircularImage-module--herowithimagecontainerouter--9812a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  overflow: hidden;
}
.IntroWithCircularImage-module--mobile--3ad0b .IntroWithCircularImage-module--herowithimagecontainer--3284c {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 248px */
  min-height: calc(var(--s-1) * 31);
  max-width: 56.25rem;
}
@media screen and (min-width: 37.5rem) {
  .IntroWithCircularImage-module--mobile--3ad0b .IntroWithCircularImage-module--herowithimagecontainer--3284c {
    /* 320px */
    min-height: calc(var(--s-1) * 40);
  }
}
.IntroWithCircularImage-module--mobile--3ad0b .IntroWithCircularImage-module--herowithimagecontainer--3284c img {
  width: 100%;
  height: auto;
}
.IntroWithCircularImage-module--mobile--3ad0b .IntroWithCircularImage-module--bordersection--8d838 {
  position: absolute;
  width: 100%;
  height: auto;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.IntroWithCircularImage-module--mobile--3ad0b .IntroWithCircularImage-module--border--94324 {
  position: relative;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: -2px;
}
.IntroWithCircularImage-module--mobile--3ad0b .IntroWithCircularImage-module--textcontainer--b5436 {
  width: 90%;
  /* 400px */
  max-width: calc(var(--s-1) * 50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.IntroWithCircularImage-module--desktop--ae4fd {
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .IntroWithCircularImage-module--desktop--ae4fd {
    display: none;
  }
}
.IntroWithCircularImage-module--desktop--ae4fd .IntroWithCircularImage-module--herowithimagecontainerouter--9812a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  overflow: hidden;
}
.IntroWithCircularImage-module--desktop--ae4fd .IntroWithCircularImage-module--herowithimagecontainerinner--dd774 {
  display: flex;
  width: 100%;
  margin-block-end: var(--s-4);
}
.IntroWithCircularImage-module--desktop--ae4fd .IntroWithCircularImage-module--herowithimagecontainer--3284c {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  height: 417px;
}
.IntroWithCircularImage-module--desktop--ae4fd .IntroWithCircularImage-module--herowithimagecontainer--3284c img {
  height: 417px;
  width: calc(var(--s-1) * 75);
  /* 600px */
}
.IntroWithCircularImage-module--desktop--ae4fd .IntroWithCircularImage-module--bordersection--8d838 {
  width: calc(var(--s-1) * 75);
  /* 600px */
  position: absolute;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.IntroWithCircularImage-module--desktop--ae4fd .IntroWithCircularImage-module--border--94324 {
  position: relative;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: -2px;
}
.IntroWithCircularImage-module--desktop--ae4fd .IntroWithCircularImage-module--textcontainer--b5436 {
  width: 90%;
  /* 400px */
  max-width: calc(var(--s-1) * 50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.IntroWithCircularImage-module--desktop--ae4fd .IntroWithCircularImage-module--textcontainer--b5436 h1 {
  margin-block-start: var(--s-4);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.AppealPage-module--contentarea--beec1 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}

.AppealPage-module--bordersection--0dadb {
  position: relative;
  display: flex;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  height: auto;
  /* 600px */
  max-height: calc(var(--s-1) * 75);
}
.AppealPage-module--bordersection--0dadb .AppealPage-module--border--830da {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  z-index: var(--z-app-shell);
  pointer-events: none;
}
@media (min-width: 37.5rem) {
  .AppealPage-module--bordersection--0dadb .AppealPage-module--border--830da {
    margin-block-start: calc(var(--s-6) * -1);
  }
}
.AppealPage-module--bordersection--0dadb .AppealPage-module--border--830da svg {
  width: 100%;
}

.AppealPage-module--ctacontainer--8debc {
  margin-block-end: var(--s-4);
  display: flex;
  justify-content: center;
  align-self: center;
}
.BasicPage-module--contentarea--27ae5 {
  position: relative;
  height: 100%;
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.BreedPage-module--breedpage--794a8 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}

.BreedPage-module--pagecontent--4308e {
  position: relative;
  background-color: var(--c-white);
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.BreedPage-module--sharewrapper--18a06 {
  width: 100%;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  padding: 0 var(--s-2);
  padding-block-start: var(--s-1);
  box-sizing: border-box;
  margin-block-end: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
}
@media only screen and (min-width: 37.5rem) {
  .BreedPage-module--sharewrapper--18a06 {
    padding: var(--s-1) 0 0 0;
    width: 75%;
  }
}
@media only screen and (min-width: 64rem) {
  .BreedPage-module--sharewrapper--18a06 {
    width: 65%;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CharityShopPage-module--charityshoppage--668e1 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}

.CharityShopPage-module--about--44dda {
  position: relative;
  background-color: var(--c-white);
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.CharityShopPage-module--about--44dda .CharityShopPage-module--heading--1b065 {
  width: 100%;
}
.CharityShopPage-module--about--44dda .CharityShopPage-module--leadpara--0c8e6 {
  width: 100%;
}
.CharityShopPage-module--about--44dda .CharityShopPage-module--leadpara--0c8e6 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-black);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}
.CharityShopPage-module--about--44dda .CharityShopPage-module--imagewrapper--84f9e {
  position: relative;
  border-radius: var(--s-1);
  overflow: hidden;
  height: 100%;
  width: 100%;
  padding-block-start: 75%;
}
@media screen and (min-width: 37.5rem) {
  .CharityShopPage-module--about--44dda .CharityShopPage-module--imagewrapper--84f9e {
    padding-block-start: 57.1428571429%;
  }
}
.CharityShopPage-module--about--44dda .CharityShopPage-module--imagewrapper--84f9e img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  border: 0;
  object-fit: scale-down;
  object-position: center center;
}
.CharityShopPage-module--about--44dda .CharityShopPage-module--imagecaption--670f3 {
  width: 100%;
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-dawn);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xs);
}
@media (min-width: 25.875rem) {
  .CharityShopPage-module--about--44dda .CharityShopPage-module--imagecaption--670f3 {
    line-height: var(--lh-body-s);
    margin: var(--s-1) 0;
  }
}
.CharityShopPage-module--about--44dda .CharityShopPage-module--intropara--d3018 {
  width: 100%;
}
.CharityShopPage-module--about--44dda .CharityShopPage-module--intropara--d3018 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-black);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.DogPage-module--contentarea--55760 {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}

.DogPage-module--mobileenquireorshare--376a2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  /* 504px */
  max-width: calc(var(--s-1) * 63);
  background-color: var(--c-white);
  /* 150px */
  min-height: calc(var(--s-1) * 19);
}
@media screen and (min-width: 64rem) {
  .DogPage-module--mobileenquireorshare--376a2 {
    display: none;
  }
}

.DogPage-module--doginfosections--62423 {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--c-white);
}

.DogPage-module--dogprofilebreed--dfd9e {
  max-width: 56rem;
  margin-inline: auto;
}
.EventPage-module--contentarea--70927 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}
.LandingPage-module--contentarea--11413 {
  position: relative;
  height: 100%;
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.QuizPage-module--contentarea--da615 {
  position: relative;
  height: 100%;
  width: 100%;
  min-height: 400px;
  background-color: var(--c-sandy-fur);
  padding: 50px 20px;
  border-top: 2px solid var(--c-oatmeal-60);
  box-shadow: var(--c-oatmeal) inset 0 0 16px;
}
@media (min-width: 64rem) {
  .QuizPage-module--contentarea--da615 {
    padding: 30px;
  }
}
.QuizPage-module--contentarea--da615 h1 {
  visibility: hidden;
  position: absolute;
  left: -9999px;
}
.QuizPage-module--contentarea--da615 h2 {
  line-height: var(--lh-heading-m);
}

@keyframes QuizPage-module--fadeInUp--11b7e {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
.QuizPage-module--fadeInUp-animation--0a1d8 {
  animation: 1.5s QuizPage-module--fadeInUp--11b7e both;
}

.QuizPage-module--contentarea--da615 legend {
  font-size: var(--s-6);
  font-weight: bold;
}

.QuizPage-module--contentarea--da615 label[for^=root_] {
  font-weight: bold;
  font-size: var(--s-3);
}
@media (min-width: 64rem) {
  .QuizPage-module--contentarea--da615 label[for^=root_] {
    max-width: 40%;
  }
}

.QuizPage-module--form-group--282c5 {
  padding-top: 0;
}

.QuizPage-module--summary--6c7b8 {
  width: 100%;
}

.QuizPage-module--summaryContent--e2a18 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 64rem) {
  .QuizPage-module--summaryContent--e2a18 {
    flex-direction: row;
  }
}

.QuizPage-module--summaryText--a63db {
  flex: 1 1 100%;
}
@media (min-width: 64rem) {
  .QuizPage-module--summaryText--a63db {
    flex: 0 0 60%;
  }
}

.QuizPage-module--textContainer--799ca {
  text-align: center;
}
.QuizPage-module--textContainer--799ca h2 {
  line-height: var(--lh-heading-m);
  margin-block-end: var(--s-4);
  margin-block-start: var(--s-4);
}
@media (min-width: 64rem) {
  .QuizPage-module--textContainer--799ca {
    padding-left: 47px;
    padding-right: 47px;
    text-align: left;
  }
}

.QuizPage-module--imageContainer--66782 {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  width: 100%;
}
@media (min-width: 64rem) {
  .QuizPage-module--imageContainer--66782 {
    margin-top: 0;
    flex: 1 1;
  }
}

.QuizPage-module--imageContainer--66782 img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.QuizPage-module--progressContainer--d95d1 {
  position: relative;
  height: 110px;
  width: 100%;
  background-color: var(--c-white);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-evenly;
  padding-inline: var(--s-4);
  margin-top: 8px;
  border-top: 2px solid var(--c-oatmeal-60);
}

.QuizPage-module--quizNavigation--20f6b {
  background-color: var(--c-oatmeal);
  padding-block: var(--s-3);
  padding-inline: var(--s-3);
  display: inline-block;
  border-radius: 16px;
  max-width: 423px;
  width: 100%;
  margin-block-start: 50px;
}
.QuizPage-module--quizNavigation--20f6b button {
  margin: 0;
}
.QuizPage-module--quizNavigation--20f6b .QuizPage-module--buttonText--595c6 {
  padding-inline-end: var(--s-1);
}
.RehomingCentreArticlePage-module--rehomingcentrearticlepage--9c516 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.RehomingCentrePage-module--rehomingcentrepage--41dd9 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}

.RehomingCentrePage-module--aboutandpromo--8dd15 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .RehomingCentrePage-module--aboutandpromo--8dd15 {
    flex-direction: row;
  }
}

.RehomingCentrePage-module--about--479a7 {
  position: relative;
  width: 100%;
  background-color: var(--c-white);
  padding: 0 var(--s-2) var(--s-4);
  box-sizing: border-box;
}
@media screen and (min-width: 64rem) {
  .RehomingCentrePage-module--about--479a7 {
    width: calc(100% - (368px - var(--s-4)));
    padding-inline: var(--s-1) var(--s-8);
  }
}
.RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--heading--6aa8b {
  width: 100%;
}
.RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--heading--6aa8b h2 {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--heading--6aa8b h2 {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}
.RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--leadpara--a6182 {
  width: 100%;
}
.RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--leadpara--a6182 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-black);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}
.RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--imagewrapper--2f1e8 {
  position: relative;
  border-radius: var(--s-1);
  overflow: hidden;
  width: 100%;
  margin-block-end: var(--s-2);
  padding-block-start: 75%;
}
@media screen and (min-width: 37.5rem) {
  .RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--imagewrapper--2f1e8 {
    padding-block-start: 57.1428571429%;
  }
}
.RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--imagewrapper--2f1e8 img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  border: 0;
  object-fit: scale-down;
  object-position: center center;
}
.RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--imagecaption--6589a {
  width: 100%;
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-dawn);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xs);
}
@media (min-width: 25.875rem) {
  .RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--imagecaption--6589a {
    line-height: var(--lh-body-s);
  }
}
.RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--imagecaption--6589a {
  margin-block-start: -8px;
  margin-block-end: var(--s-2);
}
.RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--intropara--7132f {
  width: 100%;
}
.RehomingCentrePage-module--about--479a7 .RehomingCentrePage-module--intropara--7132f ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-black);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}

.RehomingCentrePage-module--promosection--51d8d {
  position: relative;
  background-color: var(--c-white);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
@media screen and (min-width: 64rem) {
  .RehomingCentrePage-module--promosection--51d8d {
    width: calc(368px + var(--s-4));
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.RelinquishmentTriageSupportArticlePage-module--relinquishmentsupportarticle--b8618 {
  width: 100%;
  background-color: var(--c-sandy-fur);
}

.RelinquishmentTriageSupportArticlePage-module--outer--7864b {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-block-start: var(--s-6);
  padding: var(--s-2);
  box-sizing: border-box;
}
@media only screen and (min-width: 37.5rem) {
  .RelinquishmentTriageSupportArticlePage-module--outer--7864b {
    padding: 0 var(--s-1);
  }
}

.RelinquishmentTriageSupportArticlePage-module--inner--bc0d5 {
  width: 100%;
}

.RelinquishmentTriageSupportArticlePage-module--heading--ce17a {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
}

.RelinquishmentTriageSupportArticlePage-module--headingtext--e9673 {
  margin-block-end: var(--s-1);
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-dawn);
  max-width: 64rem;
  margin-inline: auto;
}

.RelinquishmentTriageSupportArticlePage-module--intro--cd3a3 {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
}
.RelinquishmentTriageSupportArticlePage-module--intro--cd3a3 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.RelinquishmentTriageSupportArticlePage-module--sections--b8676 {
  width: 100%;
}

.RelinquishmentTriageSupportArticlePage-module--contactus--b6172 {
  width: 100%;
  padding-block-end: var(--s-4);
  box-sizing: border-box;
  background-color: var(--c-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-block-start: var(--s-4);
}
.RelinquishmentTriageSupportArticlePage-module--contactus--b6172 .RelinquishmentTriageSupportArticlePage-module--contactuscontent--7739e {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-block-start: var(--s-2);
}
.RelinquishmentTriageSupportArticlePage-module--contactus--b6172 .RelinquishmentTriageSupportArticlePage-module--contactuscontent--7739e .RelinquishmentTriageSupportArticlePage-module--extrabuttonwrapper--9038b {
  margin-block-start: 0;
  min-width: 50%;
  max-width: 50%;
  margin-inline-start: auto;
  margin-inline-end: auto;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.VolunteerRolePage-module--volunteerrolepage--3a376 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}

.VolunteerRolePage-module--pagecontent--f91a6 {
  position: relative;
  background-color: var(--c-white);
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.VolunteerRolePage-module--heading--8a9b7 {
  width: 90%;
  margin-block-start: var(--s-5);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding: 0;
}
@media screen and (min-width: 37.5rem) {
  .VolunteerRolePage-module--heading--8a9b7 {
    width: 75%;
  }
}
@media screen and (min-width: 64rem) {
  .VolunteerRolePage-module--heading--8a9b7 {
    width: 65%;
  }
}
.VolunteerRolePage-module--heading--8a9b7 {
  /* 744px */
  max-width: calc(var(--s-1) * 93);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.VolunteerVacancyPage-module--volunteervacancypage--5c144 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}

.VolunteerVacancyPage-module--pagecontent--2eae4 {
  position: relative;
  background-color: var(--c-white);
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.VolunteerVacancyPage-module--heading--8da20 {
  width: 100%;
  margin-block-start: var(--s-5);
  padding: 0;
}
.VolunteerVacancyPage-module--heading--8da20 .VolunteerVacancyPage-module--date--14973 {
  margin-block-end: 15px;
  display: block;
}

.VolunteerVacancyPage-module--subheading--359ea {
  font-size: var(--t-heading-m);
}
@media (min-width: 64rem) {
  .VolunteerVacancyPage-module--subheading--359ea {
    font-size: var(--t-heading-l);
  }
}

.VolunteerVacancyPage-module--buttonwrapper--2d237 {
  width: 90%;
  margin-block-end: var(--s-5);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding: 0;
}
@media screen and (min-width: 37.5rem) {
  .VolunteerVacancyPage-module--buttonwrapper--2d237 {
    width: 75%;
  }
}
@media screen and (min-width: 64rem) {
  .VolunteerVacancyPage-module--buttonwrapper--2d237 {
    width: 65%;
  }
}
.VolunteerVacancyPage-module--buttonwrapper--2d237 {
  /* 744px */
  max-width: calc(var(--s-1) * 93);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.InlineFilters-module--inlinefilters--2c600 {
  position: relative;
  /* 512px */
  height: calc(var(--s-1) * 64);
  width: 95%;
  border-radius: var(--s-1);
  background-color: var(--c-sandy-fur);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: var(--s-2) var(--s-4);
  box-sizing: border-box;
}
@media screen and (min-width: 37.5rem) {
  .InlineFilters-module--inlinefilters--2c600 {
    height: 493px;
    width: 404px;
  }
}
.InlineFilters-module--inlinefilters--2c600 {
  overflow: hidden;
}

.InlineFilters-module--title--ca29a {
  width: 100%;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}

.InlineFilters-module--label--d0190 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  width: 100%;
}
.InlineFilters-module--label--d0190 > span {
  display: inline-block;
  font-family: var(--font-family);
}

form {
  width: 100%;
}

.InlineFilters-module--searchinput--a0556 {
  height: var(--s-6);
  width: 100%;
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  box-sizing: border-box;
  padding-inline-end: var(--s-5);
  padding-block-end: 0;
}

.InlineFilters-module--distancecontainer--89213 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.InlineFilters-module--distancecontrols--191cc {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.InlineFilters-module--distancerange--5165b {
  margin-block-start: var(--s-2);
  width: 55%;
  display: none;
}
@media screen and (min-width: 25.875rem) {
  .InlineFilters-module--distancerange--5165b {
    display: block;
  }
}

input[type=range] {
  -webkit-appearance: none;
  height: 12px;
  border-radius: var(--s-1);
  width: 55%;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
}
input[type=range]:disabled {
  opacity: 0.4;
}

input[type=range]:focus {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0;
  cursor: pointer;
  background-color: var(--c-white);
  border-radius: 1.3px;
}
input[type=range]::-webkit-slider-runnable-track:disabled {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-thumb {
  border: 6px solid var(--c-midnight);
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
  -webkit-appearance: none;
  margin-block-start: -16px;
}
input[type=range]::-webkit-slider-thumb:disabled {
  opacity: 0.4;
}

_::-webkit-full-page-media,
_:future,
:root input[type=range]::-webkit-slider-thumb {
  margin-block-start: calc(var(--s-1) * -1);
}

input[type=range]::-moz-range-thumb {
  border: 6px solid var(--c-midnight);
  height: 11px;
  width: 11px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb:disabled {
  opacity: 0.4;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

.InlineFilters-module--distanceselect--b0e0f {
  width: 100%;
  height: var(--s-6);
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjYgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbl9kcm9wZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTIuNjQ5NTQyNCwxNi4yODEyMzc0IEMxMi44MTYyMDg1LDE2LjI4MTIzNzQgMTIuOTYyMDQxNywxNi4yMTg3Mzc2IDEzLjA4NzA0MTQsMTYuMDkzNzM3OSBMMTcuMTE4MjgxOCwxMi4wNjI0OTc1IEMxNy4zMDU3ODEzLDExLjg3NDk5NzkgMTcuMzQ3NDQ3NywxMS42NTEwNCAxNy4yNDMyODE1LDExLjM5MDYyNDEgQzE3LjEzOTExNTIsMTEuMTMwMjA4MiAxNi45NTE2MTU3LDExIDE2LjY4MDc4MjgsMTEgTDguNjE4MzAyMDMsMTEgQzguMzQ3NDY5MTgsMTEgOC4xNTk5Njk2MywxMS4xMzAyMDgyIDguMDU1ODAzMzcsMTEuMzkwNjI0MSBDNy45NTE2MzcxMSwxMS42NTEwNCA3Ljk5MzMwMzUyLDExLjg3NDk5NzkgOC4xODA4MDMwNywxMi4wNjI0OTc1IEwxMi4yMTIwNDM1LDE2LjA5MzczNzkgQzEyLjMzNzA0MzIsMTYuMjE4NzM3NiAxMi40ODI4NzYzLDE2LjI4MTIzNzQgMTIuNjQ5NTQyNCwxNi4yODEyMzc0IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJpY29uX2Ryb3Bkb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBzdHJva2U9IiNEREREREQiIGN4PSIxMyIgY3k9IjEzIiByPSIxMiI+PC9jaXJjbGU+CiAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8dXNlIGlkPSJjYXJldC1kb3duIiBmaWxsPSIjMjIyMjIyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgPC9nPgo8L3N2Zz4=) no-repeat center right;
  background-color: var(--c-white);
  padding-inline-end: var(--s-1);
  background-origin: content-box;
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  padding-inline-start: var(--s-2);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: radio-container;
  opacity: 1;
  color: var(--c-midnight);
}
.InlineFilters-module--distanceselect--b0e0f:disabled {
  opacity: 0.4;
}
@media screen and (min-width: 25.875rem) {
  .InlineFilters-module--distanceselect--b0e0f {
    width: 40%;
  }
}

.InlineFilters-module--breedorlocationselector--77971 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-shadow: var(--sh-box-card);
  padding-inline-end: var(--s-2);
  padding-inline-start: var(--s-2);
  margin: 0 auto var(--s-1) auto;
  align-self: center;
  white-space: nowrap;
  font-family: var(--font-family);
}
.InlineFilters-module--breedorlocationselector--77971:hover {
  cursor: pointer;
}
.InlineFilters-module--breedorlocationselector--77971 {
  border-radius: var(--s-1);
  border: 0;
  height: var(--s-6);
  background-color: var(--c-white);
  width: 100%;
  color: var(--c-midnight);
}

.InlineFilters-module--breedtext--4b731 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  font-weight: 500;
}

.InlineFilters-module--breedselectedcount--ad840 {
  background-color: var(--c-midnight);
  color: var(--c-white);
  height: var(--s-3);
  width: var(--s-3);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  margin-inline-start: var(--s-1);
}

.InlineFilters-module--addbreedsicon--f17e0 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.InlineFilters-module--viewmore--05040 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.InlineFilters-module--viewmore--05040:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.InlineFilters-module--viewmore--05040:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.InlineFilters-module--viewmore--05040:visited {
  text-decoration-style: solid;
}
.InlineFilters-module--viewmore--05040 {
  color: var(--c-midnight);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  letter-spacing: 0;
  cursor: pointer;
  -webkit-text-decoration: dotted underline !important;
          text-decoration: dotted underline !important;
  text-decoration-color: var(--c-midnight);
  text-underline-position: under;
  text-underline-offset: 4px;
}

.InlineFilters-module--loadingoverlay--8d0df {
  pointer-events: none;
  height: 100%;
  width: 100%;
  position: absolute;
}
.InlineFilters-module--loadingoverlay--8d0df .InlineFilters-module--loadingbackground--c435f {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--c-sandy-fur);
  opacity: 0.7;
  z-index: 1;
}
.InlineFilters-module--loadingoverlay--8d0df .InlineFilters-module--loadingicon--ef699 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: var(--z-app-shell);
}

.InlineFilters-module--accessibilityalert--a8137 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SizeGuide-module--fullpagewrapper--4ce1f {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: var(--z-modal);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.SizeGuide-module--fullpageoverlay--3ffcf {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(2, 2, 2, 0.6);
  z-index: 1;
  display: none;
}
@media only screen and (min-width: 64rem) {
  .SizeGuide-module--fullpageoverlay--3ffcf {
    display: flex;
  }
}

@keyframes SizeGuide-module--slideIn--713ad {
  0% {
    inset-inline-end: -100%;
  }
  100% {
    inset-inline-end: 0;
  }
}
@keyframes SizeGuide-module--slideOut--cb27c {
  0% {
    inset-inline-end: 0;
  }
  100% {
    inset-inline-end: -100%;
  }
}
.SizeGuide-module--component--ecb78 {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  inset-inline-end: 0;
  background-color: #f6f4f1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
  inset-inline-end: -100%;
  pointer-events: all;
}
@media only screen and (min-width: 64rem) {
  .SizeGuide-module--component--ecb78 {
    /* 704px */
    width: calc(var(--s-1) * 88);
  }
}

.SizeGuide-module--componentvisible--21c70 {
  animation: SizeGuide-module--slideIn--713ad 0.5s forwards;
  animation-delay: 0.3s;
  -webkit-animation: SizeGuide-module--slideIn--713ad 0.5s forwards;
  -webkit-animation-delay: 0.3s;
}

.SizeGuide-module--componenthidden--8f5c0 {
  animation: SizeGuide-module--slideOut--cb27c 0.5s forwards;
  animation-delay: 0s;
  -webkit-animation: SizeGuide-module--slideOut--cb27c 0.5s forwards;
  -webkit-animation-delay: 0s;
}

.SizeGuide-module--filteroptionswrapper--17550 {
  position: relative;
  height: 100%;
  overflow: auto;
}

.SizeGuide-module--header--05dfc {
  position: relative;
  background-color: var(--c-white);
  height: var(--s-7);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.SizeGuide-module--title--c1cd7 {
  width: 100%;
  height: var(--s-4);
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: var(--s-4);
  box-sizing: border-box;
  font-family: var(--font-family);
}

.SizeGuide-module--body--43abe {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: var(--s-4);
  margin-block-start: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
  width: 75%;
  color: var(--c-dawn);
}

.SizeGuide-module--headersection--81581 {
  width: 30%;
  justify-content: center;
}

.SizeGuide-module--closefilters--2a22e {
  justify-content: flex-end;
  cursor: pointer;
}

.SizeGuide-module--contentarea--d6ae2 {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-block-end: var(--s-4);
  box-sizing: border-box;
}

.SizeGuide-module--table--7cc1d {
  width: 90%;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;
  border: 0;
  border-spacing: 0;
  border-radius: var(--s-4);
}

.SizeGuide-module--tablebody--d3d21 {
  border-radius: var(--s-4);
}

.SizeGuide-module--tablerowtop--cb02f {
  width: 100%;
  border-top-left-radius: var(--s-4);
  border-top-right-radius: var(--s-4);
}

.SizeGuide-module--tablerowbottom--1a368 {
  width: 100%;
  border-bottom-left-radius: var(--s-4);
  border-bottom-right-radius: var(--s-4);
}

.SizeGuide-module--tableheader--6c1eb {
  /* 120px */
  height: calc(var(--s-1) * 15);
  width: 25%;
  text-align: center;
  font-family: var(--font-family);
}

.SizeGuide-module--dogicon--94e1e {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-block-end: var(--s-2);
}

.SizeGuide-module--middlerow--3841b {
  width: 20%;
  height: var(--s-7);
  background-color: var(--c-sandy-fur-alt);
  text-align: center;
  font-family: var(--font-family);
  border: 0;
  font-weight: 600;
}

.SizeGuide-module--bottomrow--743bc {
  width: 20%;
  height: var(--s-7);
  background-color: var(--c-oatmeal);
  text-align: center;
  font-family: var(--font-family);
  border: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NDSSurveyFooter-module--surveyFooter--0e965 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-2);
  background-color: var(--c-midnight);
  color: var(--c-white);
  padding: var(--s-3) var(--s-1);
}
@media (min-width: 37.5rem) {
  .NDSSurveyFooter-module--surveyFooter--0e965 {
    padding: var(--s-4) var(--s-1);
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (min-width: 56.25rem) {
  .NDSSurveyFooter-module--surveyFooter--0e965 {
    padding: var(--s-4) var(--s-2);
    flex-direction: row;
    align-items: center;
  }
}

.NDSSurveyFooter-module--image--f9aee {
  width: calc(var(--s-1) * 14);
}

.NDSSurveyFooter-module--text--1fc0f {
  font-size: var(--t-body-xs);
  line-height: var(--lh-body-xs);
  margin-bottom: 0;
  padding-block-start: calc(var(--s-1) + var(--s-0-5));
}
@media (min-width: 23.4375rem) {
  .NDSSurveyFooter-module--text--1fc0f {
    font-size: var(--t-body-s);
    line-height: var(--lh-body-l);
    padding-block-start: var(--s-3);
  }
}
@media (min-width: 37.5rem) {
  .NDSSurveyFooter-module--text--1fc0f {
    line-height: var(--lh-body-l);
    font-size: var(--t-body-s);
    padding-block-start: 0;
  }
}
@media (min-width: 56.25rem) {
  .NDSSurveyFooter-module--text--1fc0f {
    padding-block-start: calc(var(--s-2) + var(--s-0-5));
  }
}

.NDSSurveyFooter-module--highlight--bb261 {
  font-size: var(--t-heading-xxs);
  line-height: var(--lh-body-s);
}
@media (min-width: 37.5rem) {
  .NDSSurveyFooter-module--highlight--bb261 {
    font-size: var(--t-heading-xs);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ComparisonTool-module--comparisonToolContainer--9ee26 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  min-height: 30vh;
  background-color: var(--c-white);
  --form-screen-max-width: 712px;
  --form-screen-image-max-width: 400px;
}

.ComparisonTool-module--comparisonToolForm--30716 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  min-height: 30vh;
  background-color: var(--c-sunshine-yellow);
}

.ComparisonTool-module--lottieAnimation--05c0a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  max-width: var(--form-screen-image-max-width);
  margin-inline: auto;
  padding-block: var(--s-4);
}
@media (min-width: 37.5rem) {
  .ComparisonTool-module--lottieAnimation--05c0a {
    grid-column: span 2;
  }
}

.ComparisonTool-module--message--12938 {
  display: block;
  color: var(--c-dark-grey);
  max-width: var(--form-element-width);
  width: 100%;
}
@media (min-width: 37.5rem) {
  .ComparisonTool-module--message--12938 {
    grid-column: span 2;
  }
}
.ErrorPage-module--contentarea--a29cf {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: var(--c-sandy-fur);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroCircleImageAndSearch-module--introcirclewithsearchcontainer--40bdb {
  position: relative;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.IntroCircleImageAndSearch-module--contentarea--82813 {
  width: 100%;
  /* 448px */
  height: calc(var(--s-1) * 56);
  z-index: var(--z-app-shell);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--contentarea--82813 {
    justify-content: center;
    flex-direction: row;
    align-items: center;
    /* 504px */
    height: calc(var(--s-1) * 63);
    /* 744px */
    max-width: calc(var(--s-1) * 93);
  }
}

.IntroCircleImageAndSearch-module--first--9525c {
  position: relative;
  width: 85%;
  height: auto;
  z-index: 3;
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--first--9525c {
    /* 352px */
    height: calc(var(--s-1) * 44);
    /* 400px */
    width: calc(var(--s-1) * 50);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.IntroCircleImageAndSearch-module--titlewrapper--820f7 {
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--titlewrapper--820f7 {
    width: 80%;
  }
}

.IntroCircleImageAndSearch-module--title--8738d {
  width: 100%;
}

.IntroCircleImageAndSearch-module--subtitle--151c5 {
  width: 100%;
  font-family: var(--font-family-heading);
  margin: 0;
  font-weight: 600;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}

.IntroCircleImageAndSearch-module--text--92db7 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  width: 100%;
  margin-block-start: 15px;
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--text--92db7 {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--t-body-l);
    line-height: var(--lh-body-l);
    margin-block-start: 15px;
    width: 80%;
  }
}

.IntroCircleImageAndSearch-module--search--5685f {
  margin-block-start: var(--s-3);
  margin-block-end: var(--s-3);
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--search--5685f {
    width: 85%;
    margin-block-start: 15px;
    margin-inline-start: 15px;
  }
  .IntroCircleImageAndSearch-module--search--5685f input {
    border-radius: var(--s-1);
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
    height: 56px;
  }
}
.IntroCircleImageAndSearch-module--search--5685f form {
  margin-block-end: -55px !important;
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--search--5685f form {
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 1023px) {
  .IntroCircleImageAndSearch-module--bordersection--27825 {
    display: none;
  }
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--bordersection--27825 {
    position: absolute;
    inset-block-end: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    background-color: var(--c-sunshine-yellow);
    height: auto;
    max-height: calc(var(--s-1) * 75);
    /* 600px */
    z-index: 1;
  }
}

@media screen and (max-width: 1023px) {
  .IntroCircleImageAndSearch-module--border--66a79 {
    display: none;
  }
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--border--66a79 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 100%;
    height: 100%;
    z-index: var(--z-app-shell);
  }
}

.IntroCircleImageAndSearch-module--second--75a35 {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(var(--s-4) * -1);
  height: 35vw;
  width: 35vw;
  /* 200px */
  min-height: calc(var(--s-1) * 25);
  /* 200px */
  min-width: calc(var(--s-1) * 25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: var(--z-app-shell);
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--second--75a35 {
    position: relative;
    /* 352px */
    height: calc(var(--s-1) * 44);
    /* 352px */
    width: calc(var(--s-1) * 44);
  }
}

.IntroCircleImageAndSearch-module--imagewrapper--4cf35 {
  background-color: var(--c-white);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transform: scale(1.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--imagewrapper--4cf35 {
    transform: scale(1.1);
  }
}
.IntroCircleImageAndSearch-module--imagewrapper--4cf35 picture {
  height: 40%;
  width: 40%;
}
@media screen and (min-width: 64rem) {
  .IntroCircleImageAndSearch-module--imagewrapper--4cf35 picture {
    height: 50%;
    width: 50%;
  }
}
.IntroCircleImageAndSearch-module--imagewrapper--4cf35 picture img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.IntroCircleImageAndSearch-module--maintenanceimage--c13fb {
  height: 100%;
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroHeroWithSubheading-module--herowithimagecontainer--d905f {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 248px */
  min-height: calc(var(--s-1) * 31);
}

.IntroHeroWithSubheading-module--topsectionouter--ad800 {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

.IntroHeroWithSubheading-module--textcontainer--3c594 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  padding-block-start: var(--s-8);
}
.IntroHeroWithSubheading-module--textcontainer--3c594 .IntroHeroWithSubheading-module--subheading--189c1 {
  width: 80%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  min-height: var(--s-4);
  margin-block-end: 0;
  margin-block-start: var(--s-2);
}
.IntroHeroWithSubheading-module--textcontainer--3c594 .IntroHeroWithSubheading-module--title--a6339 {
  width: 80%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  box-sizing: border-box;
}

.IntroHeroWithSubheading-module--bordersection--b1768 {
  position: relative;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  height: auto;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.IntroHeroWithSubheading-module--border--87b17 {
  position: relative;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroHeroWithImage-module--herowithimagecontainer--ec676 {
  position: relative;
  width: 100%;
  height: auto;
}

.IntroHeroWithImage-module--yellowbackground--04a8f {
  background-color: var(--c-sunshine-yellow);
}

.IntroHeroWithImage-module--tealbackground--b2417 {
  background-color: var(--c-teal);
}

.IntroHeroWithImage-module--topsectionouter--b6e80 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.IntroHeroWithImage-module--textcontainer--5a1af {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: var(--s-4) 0 0;
}

.IntroHeroWithImage-module--title--e67b7 {
  width: 80%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
}

.IntroHeroWithImage-module--subtitle--fa707 {
  width: 85%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
}
.IntroHeroWithImage-module--subtitle--fa707 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
.IntroHeroWithImage-module--subtitle--fa707 pre {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.IntroHeroWithImage-module--bordersection--6306c {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.IntroHeroWithImage-module--border--f1d95 {
  position: absolute;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  /* Hide the gap */
  margin-block-end: -2px;
}

.IntroHeroWithImage-module--imagecontainer--633ce {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  inset-block-end: 0;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  padding: calc(var(--s-1) * 1.5) 0 0 0;
  width: 100%;
  aspect-ratio: 4/3;
}

.IntroHeroWithImage-module--imagewrapper--b931c {
  border-radius: var(--s-1);
  overflow: hidden;
  box-shadow: var(--sh-box-card-hover);
  /** Needs to match the width of our story page's date text */
  width: 90%;
  aspect-ratio: 4/3;
}
.IntroHeroWithImage-module--imagewrapper--b931c img {
  object-fit: cover;
  width: 100%;
}
.withSafeRotateSvg-module--rotatingSvg--c4791 {
  display: flex !important;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.LoginManagementCard-module--cardcontainer--06e2b {
  display: flex;
  align-items: center;
  column-gap: 35px;
  background-color: var(--c-white);
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  padding-block-start: var(--s-1);
  padding-block-end: var(--s-1);
  padding-inline-start: 18px;
  padding-inline-end: 38px;
}

.LoginManagementCard-module--icon--43cb7 {
  position: relative;
}

.LoginManagementCard-module--title--84022 {
  font-weight: 600;
  font-size: var(--t-body-l);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FilterPanel-module--fullpagewrapper--9668d {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: var(--z-modal);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.FilterPanel-module--fullpageoverlay--bd751 {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(2, 2, 2, 0.6);
  display: none;
}
@media only screen and (min-width: 64rem) {
  .FilterPanel-module--fullpageoverlay--bd751 {
    display: flex;
  }
}

@keyframes FilterPanel-module--slideIn--1bd2d {
  0% {
    inset-inline-end: -100%;
  }
  100% {
    inset-inline-end: 0;
  }
}
@keyframes FilterPanel-module--slideOut--09edd {
  0% {
    inset-inline-end: 0;
  }
  100% {
    inset-inline-end: -100%;
  }
}
.FilterPanel-module--component--37f5c {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f6f4f1;
  box-sizing: border-box;
  z-index: 3;
  pointer-events: all;
}
@media only screen and (min-width: 20rem) {
  .FilterPanel-module--component--37f5c {
    /* 320px */
    width: calc(var(--s-1) * 40);
  }
}
@media only screen and (min-width: 23.4375rem) {
  .FilterPanel-module--component--37f5c {
    /* 375px */
    width: calc(var(--s-1) * 47);
  }
}
@media only screen and (min-width: 25.875rem) {
  .FilterPanel-module--component--37f5c {
    /* 414px */
    width: calc(var(--s-1) * 52);
  }
}
@media only screen and (min-width: 32.5rem) {
  .FilterPanel-module--component--37f5c {
    /* 520px */
    width: calc(var(--s-1) * 65);
  }
}
@media only screen and (min-width: 46.875rem) {
  .FilterPanel-module--component--37f5c {
    /* 704px */
    width: calc(var(--s-1) * 88);
  }
}

.FilterPanel-module--componentvisible--b1ce8 {
  animation: FilterPanel-module--slideIn--1bd2d 0.5s forwards;
  animation-delay: 0.3s;
  -webkit-animation: FilterPanel-module--slideIn--1bd2d 0.5s forwards;
  -webkit-animation-delay: 0.3s;
}

.FilterPanel-module--componenthidden--19270 {
  animation: FilterPanel-module--slideOut--09edd 0.5s forwards;
  animation-delay: 0s;
  -webkit-animation: FilterPanel-module--slideOut--09edd 0.5s forwards;
  -webkit-animation-delay: 0s;
}

.FilterPanel-module--filteroptionswrapper--f2c02 {
  position: relative;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.FilterPanel-module--header--03e80 {
  position: relative;
  background-color: var(--c-white);
  min-height: var(--s-7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-inline-start: var(--s-2);
  padding-inline-end: var(--s-2);
  box-sizing: border-box;
}

.FilterPanel-module--title--1312b {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-heading-xs);
  line-height: var(--lh-heading-xs);
}

.FilterPanel-module--headersection--f9f62 {
  justify-content: center;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--c-black);
}

.FilterPanel-module--closefilters--03a72 {
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.FilterPanel-module--section--c9344 {
  position: relative;
  width: 100%;
  /* 504px */
  max-width: calc(var(--s-1) * 63);
  padding-block-start: var(--s-2);
  padding-block-end: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
  box-sizing: border-box;
}

.FilterPanel-module--showresults--fdf36 {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  background-color: var(--c-white);
  /* 88px */
  height: calc(var(--s-1) * 11);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-self: flex-end;
}

.FilterPanel-module--filteroptions--ca8e7 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  box-sizing: border-box;
}

.FilterPanel-module--buttonwrapper--108e4 {
  width: 100%;
}
@charset "UTF-8";
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.AllFilters-module--filteroptionswrapper--5a5a1 {
  position: relative;
  overflow: auto;
  height: calc(100% - var(--s-10) - var(--s-9));
  padding-block-start: var(--s-2);
}

.AllFilters-module--filteroptions--78681 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  box-sizing: border-box;
  width: 95%;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.AllFilters-module--sectiontitle--4d229 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  padding: 0;
  display: block;
}

.AllFilters-module--title--4e22d {
  width: 100%;
  height: var(--s-4);
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-inline-start: var(--s-1);
  box-sizing: border-box;
  font-family: var(--font-family);
}

.AllFilters-module--headersection--be3f6 {
  justify-content: center;
}

.AllFilters-module--closefilters--cb83c {
  cursor: pointer;
}

.AllFilters-module--section--3fec8 {
  position: relative;
  width: 100%;
  /* 504px */
  max-width: calc(var(--s-1) * 63);
  padding: 0 0 var(--s-2) 0;
  margin: 0 auto;
  box-sizing: border-box;
  border: 0;
}
.AllFilters-module--section--3fec8 label {
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  margin-inline-start: var(--s-1);
  margin-block-end: 0;
}

.AllFilters-module--location--4b997 {
}
.AllFilters-module--location--4b997 > label {
  margin-block-end: var(--s-1);
}

.AllFilters-module--searchinput--3bca4 {
  height: var(--s-6);
  width: 100%;
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  box-sizing: border-box;
}

.AllFilters-module--inputselect--ff92d {
  --s-dropdown-max-width: 100vw;
  /* z-index for our filter panel has recently changed as part of NDS 2025 work */
  /* https://github.com/DogsTrust/web-cms/pull/1675/commits/f4678f2f68be107ee60697a6ae9e3d5915da365f */
  z-index: 10002 !important;
}
@media only screen and (min-width: 37.5rem) {
  .AllFilters-module--inputselect--ff92d {
    /* 496px */
    --s-dropdown-max-width: calc(var(--s-1) * 62);
  }
}
@media only screen and (min-width: 64rem) {
  .AllFilters-module--inputselect--ff92d {
    /* 560px */
    --s-dropdown-max-width: calc(var(--s-1) * 70);
  }
}

.AllFilters-module--distanceselect--01851 {
  width: 100%;
  height: var(--s-6);
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjYgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbl9kcm9wZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTIuNjQ5NTQyNCwxNi4yODEyMzc0IEMxMi44MTYyMDg1LDE2LjI4MTIzNzQgMTIuOTYyMDQxNywxNi4yMTg3Mzc2IDEzLjA4NzA0MTQsMTYuMDkzNzM3OSBMMTcuMTE4MjgxOCwxMi4wNjI0OTc1IEMxNy4zMDU3ODEzLDExLjg3NDk5NzkgMTcuMzQ3NDQ3NywxMS42NTEwNCAxNy4yNDMyODE1LDExLjM5MDYyNDEgQzE3LjEzOTExNTIsMTEuMTMwMjA4MiAxNi45NTE2MTU3LDExIDE2LjY4MDc4MjgsMTEgTDguNjE4MzAyMDMsMTEgQzguMzQ3NDY5MTgsMTEgOC4xNTk5Njk2MywxMS4xMzAyMDgyIDguMDU1ODAzMzcsMTEuMzkwNjI0MSBDNy45NTE2MzcxMSwxMS42NTEwNCA3Ljk5MzMwMzUyLDExLjg3NDk5NzkgOC4xODA4MDMwNywxMi4wNjI0OTc1IEwxMi4yMTIwNDM1LDE2LjA5MzczNzkgQzEyLjMzNzA0MzIsMTYuMjE4NzM3NiAxMi40ODI4NzYzLDE2LjI4MTIzNzQgMTIuNjQ5NTQyNCwxNi4yODEyMzc0IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJpY29uX2Ryb3Bkb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBzdHJva2U9IiNEREREREQiIGN4PSIxMyIgY3k9IjEzIiByPSIxMiI+PC9jaXJjbGU+CiAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8dXNlIGlkPSJjYXJldC1kb3duIiBmaWxsPSIjMjIyMjIyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgPC9nPgo8L3N2Zz4=) no-repeat center right;
  background-color: var(--c-white);
  padding-inline-end: var(--s-1);
  background-origin: content-box;
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  padding-inline-start: var(--s-2);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: radio-container;
  opacity: 1;
  color: var(--c-midnight);
}
.AllFilters-module--distanceselect--01851:disabled {
  opacity: 0.4;
}

.AllFilters-module--location--4b997 {
}

.AllFilters-module--centremultiselect--95c10 {
  width: 100%;
  /* 184px */
  height: calc(var(--s-1) * 23);
  margin-block-end: var(--s-1);
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  padding-inline-end: var(--s-1);
  background-origin: content-box;
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: auto;
  cursor: pointer;
}

.AllFilters-module--centreoption--81760 {
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: var(--c-white);
  padding: var(--s-1);
  box-sizing: border-box;
  border-block-end: 1px solid var(--c-mist);
  align-items: center;
  cursor: pointer;
}
.AllFilters-module--centreoption--81760:checked {
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  padding: var(--s-1);
  box-sizing: border-box;
  border-block-end: 1px solid var(--c-mist);
  cursor: pointer;
}
.AllFilters-module--centreoption--81760 input[type=checkbox] {
  display: inline-block;
  margin-inline-end: 15px;
  margin-inline-start: 15px;
  border: 1px solid var(--c-mist);
  border-radius: var(--s-0-5);
  background-clip: content-box;
  background-color: var(--c-white);
  min-width: 25px;
  min-height: 25px;
  height: 25px;
  width: 25px;
  appearance: none;
}
.AllFilters-module--centreoption--81760 input[type=checkbox]:checked {
  background-color: var(--c-sunshine-yellow);
}
.AllFilters-module--centreoption--81760 input[type=checkbox]:checked:before {
  display: inline-block;
  margin-block-start: 2px;
  margin-inline-start: var(--s-0-5);
  text-align: center;
  color: var(--c-black);
  font-family: Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: var(--t-body-l);
  font-weight: 700 !important;
  content: "✓";
}
.AllFilters-module--centreoption--81760 label {
  cursor: pointer;
}

.AllFilters-module--breed--2c354 {
}

.AllFilters-module--breedorlocationselector--2da7e {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-inline-end: var(--s-1);
  padding-inline-start: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
  margin-block-start: var(--s-1);
  align-self: center;
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 500 !important;
  box-shadow: var(--sh-box-card);
  font-size: var(--t-body-m);
}
.AllFilters-module--breedorlocationselector--2da7e:hover {
  cursor: pointer;
}
.AllFilters-module--breedorlocationselector--2da7e {
  border-radius: var(--s-1);
  border: 0;
  height: var(--s-6);
  background-color: var(--c-white);
  width: 100%;
  color: var(--c-midnight);
}
.AllFilters-module--breedorlocationselector--2da7e:disabled {
  color: var(--c-dawn);
}

.AllFilters-module--breedtext--88e3e {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  font-weight: 500;
}

.AllFilters-module--breedselectedcount--99028 {
  background-color: var(--c-midnight);
  color: var(--c-white);
  height: var(--s-3);
  width: var(--s-3);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--t-body-m);
  margin-inline-start: var(--s-1);
}

.AllFilters-module--addbreedsicon--f84a9 {
  background-color: var(--c-white);
  color: var(--c-midnight);
  height: var(--s-3);
  width: var(--s-3);
  border-radius: 12px;
  border: 1px solid var(--c-mist);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--t-body-m);
}

.AllFilters-module--age--fb1fe {
}

.AllFilters-module--ageoptions--d66c4 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: center;
}
@media only screen and (min-width: 25.875rem) {
  .AllFilters-module--ageoptions--d66c4 {
    justify-content: space-evenly;
  }
}
@media only screen and (min-width: 37.5rem) {
  .AllFilters-module--ageoptions--d66c4 {
    justify-content: space-between;
  }
}

.AllFilters-module--ageoption--5b1f3 {
  margin-block-start: var(--s-1);
  width: 95%;
}
@media only screen and (min-width: 25.875rem) {
  .AllFilters-module--ageoption--5b1f3 {
    width: 48%;
  }
}
@media only screen and (min-width: 37.5rem) {
  .AllFilters-module--ageoption--5b1f3 {
    width: 30%;
  }
}

.AllFilters-module--size--13a1b {
}

.AllFilters-module--sizeheader--a33cd {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -25px;
}

.AllFilters-module--sizeoptions--33261 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: center;
}
@media only screen and (min-width: 25.875rem) {
  .AllFilters-module--sizeoptions--33261 {
    justify-content: space-evenly;
  }
}
@media only screen and (min-width: 37.5rem) {
  .AllFilters-module--sizeoptions--33261 {
    justify-content: space-between;
  }
}

.AllFilters-module--sizeoption--a4f47 {
  margin-block-start: var(--s-1);
  width: 95%;
}
@media only screen and (min-width: 25.875rem) {
  .AllFilters-module--sizeoption--a4f47 {
    width: 23%;
  }
}

.AllFilters-module--sizeguide--12bfd {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  min-height: 100%;
  font-family: var(--font-family);
  font-weight: 600;
  align-self: right;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-position: under;
  text-underline-offset: 4px;
  cursor: pointer;
}

.AllFilters-module--sizeguidecontent--fc9cb {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: auto;
  align-self: flex-end;
  margin-inline-end: var(--s-2);
  align-items: center;
  /* 120px */
  width: calc(var(--s-1) * 15);
}
.AllFilters-module--sizeguidecontent--fc9cb > svg {
  margin-inline-start: var(--s-1);
}

.AllFilters-module--gender--d9271 {
}

.AllFilters-module--genderoptions--5e7f1 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media only screen and (min-width: 25.875rem) {
  .AllFilters-module--genderoptions--5e7f1 {
    justify-content: space-evenly;
  }
}
@media only screen and (min-width: 37.5rem) {
  .AllFilters-module--genderoptions--5e7f1 {
    justify-content: space-between;
  }
}

.AllFilters-module--genderoption--905c9 {
  margin-block-start: var(--s-1);
  width: 95%;
}
@media only screen and (min-width: 25.875rem) {
  .AllFilters-module--genderoption--905c9 {
    width: 48%;
  }
}

.AllFilters-module--maylivewith--9dfe3 {
}

.AllFilters-module--maylivewithoptions--5ea8e {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: center;
}
@media only screen and (min-width: 25.875rem) {
  .AllFilters-module--maylivewithoptions--5ea8e {
    justify-content: space-evenly;
  }
}
@media only screen and (min-width: 37.5rem) {
  .AllFilters-module--maylivewithoptions--5ea8e {
    justify-content: space-between;
  }
}

.AllFilters-module--maylivewithoptiontwocol--5afac {
  margin-block-start: var(--s-1);
  width: 95%;
}
@media only screen and (min-width: 25.875rem) {
  .AllFilters-module--maylivewithoptiontwocol--5afac {
    width: 48%;
  }
}

.AllFilters-module--maylivewithoptiononecol--6c23b {
  margin-block-start: var(--s-1);
  width: 95%;
}
@media only screen and (min-width: 37.5rem) {
  .AllFilters-module--maylivewithoptiononecol--6c23b {
    width: 100%;
  }
}

.AllFilters-module--dayssinceadded--e6f60 {
}

.AllFilters-module--dayssinceaddedoptions--ce19c {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.AllFilters-module--dayssinceaddedoption--39a24 {
  display: flex;
  align-items: center;
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  width: 29%;
  border-radius: var(--s-1);
  border: 0;
  height: var(--s-6);
  background-color: #ffffff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
}

.AllFilters-module--advancedfilters--37884 {
}

.AllFilters-module--showresults--66d13 {
  position: relative;
  width: 100%;
  margin: 0;
  background-color: var(--c-white);
  /* 88px */
  height: calc(var(--s-1) * 11);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: flex-end;
  margin-block-start: 0;
}

.AllFilters-module--buttonwrapper--8cbf1 {
  width: 80%;
}

.AllFilters-module--loadingoverlay--1f592 {
  pointer-events: none;
  height: 100%;
  width: 100%;
  position: absolute;
}
.AllFilters-module--loadingoverlay--1f592 .AllFilters-module--loadingbackground--08e4e {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #f6f4f1;
  opacity: 0.7;
  z-index: 1;
}
.AllFilters-module--loadingoverlay--1f592 .AllFilters-module--loadingicon--8a107 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: var(--z-app-shell);
}

.AllFilters-module--accessibilityalert--adb87 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.AllFilters-module--checkbox--c94c6 {
  display: flex;
  align-items: center;
  width: auto;
  height: 25px;
  background-color: transparent;
  margin: var(--s-1) 0;
}
.AllFilters-module--checkbox--c94c6 input[type=checkbox] {
  display: inline-block;
  margin-inline-start: 0;
  margin-inline-end: 0;
  border: 1px solid var(--c-mist);
  border-radius: var(--s-0-5);
  background-clip: content-box;
  background-color: var(--c-white);
  min-width: 25px;
  min-height: 25px;
  height: 25px;
  width: 25px;
  appearance: none;
}
.AllFilters-module--checkbox--c94c6 input[type=checkbox]:checked {
  background-color: var(--c-midnight);
}
.AllFilters-module--checkbox--c94c6 input[type=checkbox]:checked:before {
  display: inline-block;
  margin-inline-start: 2px;
  text-align: center;
  color: var(--c-sunshine-yellow);
  font-family: "M PLUS 1p", sans-serif;
  font-size: var(--t-body-l);
  font-weight: 700 !important;
  content: "✓";
}

.AllFilters-module--checkboxlabel--c31de {
  margin-inline-start: var(--s-2);
  width: auto;
  font-weight: 500 !important;
}

.AllFilters-module--disabledcheckboxlabel--b1731 {
  opacity: 0.3;
}
@charset "UTF-8";
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SponsorDogCard-module--dogcardcontainer--ccf03 {
  position: relative;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
  min-width: 100%;
  max-width: 100%;
}

.SponsorDogCard-module--sponsordoglink--1e426 a {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.SponsorDogCard-module--dogcardimagewrapper--829f4 {
  border-radius: var(--s-1);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.SponsorDogCard-module--dogcardimagewrapper--829f4 picture {
  width: 100%;
  height: 100%;
}

.SponsorDogCard-module--label--ad8ed,
.SponsorDogCard-module--remove--17bc2 {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: 0;
  display: flex;
  justify-content: flex-end;
}

.SponsorDogCard-module--label--ad8ed {
  /* 152px */
  width: calc(var(--s-1) * 19);
  height: 35px;
  z-index: var(--z-app-shell);
}
.SponsorDogCard-module--label--ad8ed img {
  transform: rotate(180deg);
  margin-inline-end: -2px;
}

.SponsorDogCard-module--labelText--6c78a {
  position: absolute;
  align-self: center;
  justify-self: center;
  margin-inline-end: var(--s-2);
  font-family: var(--font-family-heading);
}

.SponsorDogCard-module--dogcardmediacarousel--ce10f {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.SponsorDogCard-module--dogcardimage--604b3 {
  position: relative;
  object-fit: cover;
  background-position: center;
  height: 100%;
  width: 100%;
}

.SponsorDogCard-module--dogcarddetailscontainer--dfe0a {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-2);
  row-gap: var(--s-1);
}

.SponsorDogCard-module--dognametext--f901e {
  position: relative;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-xl);
  line-height: var(--lh-body-xl);
}
.SponsorDogCard-module--dognametext--f901e a {
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-midnight);
}

.SponsorDogCard-module--dogbreedtext--63cde {
  position: relative;
  font-family: var(--font-family);
  font-weight: 500;
}

.SponsorDogCard-module--rehomingcentretext--09a27 {
  position: relative;
  color: var(--c-dawn);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
}

.SponsorDogCard-module--dogcarddetails--61b5f {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  color: var(--c-dawn);
}

.SponsorDogCard-module--removeSponsorship--0a86d {
  align-self: center;
  margin-inline-end: var(--s-2);
  border-radius: 50%;
  width: var(--s-4);
  height: var(--s-4);
  border: unset;
  background-color: var(--c-sunshine-yellow);
  cursor: pointer;
  padding: 0;
  color: var(--c-brand-quaternary);
}
.SponsorDogCard-module--removeSponsorship--0a86d:before {
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  content: "✕";
  color: var(--c-brand-quaternary);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.Button-module--ripplewrapper--d9fd0 {
  display: inline-flex;
  border-radius: var(--s-4);
  overflow: hidden;
}

.Button-module--basebutton--57c04 {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--s-4);
  padding-inline-end: var(--s-2);
  padding-inline-start: var(--s-2);
  width: auto;
  height: var(--s-6);
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 600;
  align-items: center;
  text-decoration: none !important;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.Button-module--basebutton--57c04:hover {
  cursor: pointer;
}

.Button-module--primary--145cb {
  border: 2px solid var(--c-sunshine-yellow);
  background-color: var(--c-sunshine-yellow);
  color: var(--c-midnight);
}
.Button-module--primary--145cb:hover, .Button-module--primary--145cb:focus {
  border: 2px solid var(--c-sunshine-yellow-10pc-lighter);
  background-color: var(--c-sunshine-yellow-10pc-lighter);
}
.Button-module--primary--145cb:disabled {
  cursor: not-allowed;
  border: 2px solid var(--c-mist);
  background-color: var(--c-mist);
  color: var(--c-dawn);
}

a:focus > .Button-module--primary--145cb {
  border: 2px solid var(--c-sunshine-yellow-10pc-lighter);
  background-color: var(--c-sunshine-yellow-10pc-lighter);
}

.Button-module--secondary--d7816 {
  border: 2px solid var(--c-midnight);
  background-color: var(--c-midnight);
  color: var(--c-white);
}
.Button-module--secondary--d7816:disabled {
  cursor: not-allowed;
  border: 2px solid var(--c-dark-grey);
  background-color: var(--c-dark-grey);
  color: var(--c-mid-grey);
}
.Button-module--secondary--d7816:hover, .Button-module--secondary--d7816:focus {
  box-shadow: var(--sh-box-button-focus);
}

a:focus > .Button-module--secondary--d7816 {
  box-shadow: var(--sh-box-button-focus);
}

.Button-module--tertiary--0dcc8 {
  border: 2px solid var(--c-black);
  background-color: transparent;
  color: var(--c-midnight);
}
.Button-module--tertiary--0dcc8:hover, .Button-module--tertiary--0dcc8:focus {
  box-shadow: var(--sh-box-button-focus);
}
.Button-module--tertiary--0dcc8:disabled {
  cursor: not-allowed;
  border: 2px solid var(--c-mist);
  background-color: var(--c-mist);
  color: var(--c-dawn);
}

a:focus > .Button-module--tertiary--0dcc8 {
  box-shadow: var(--sh-box-button-focus);
}

.Button-module--reverseprimary--3b5d5 {
  border: 2px solid var(--c-white);
  background-color: var(--c-white);
  color: var(--c-midnight);
}
.Button-module--reverseprimary--3b5d5:disabled {
  cursor: not-allowed;
  border: 2px solid var(--c-mist);
  background-color: var(--c-mist);
  color: var(--c-dawn);
}

.Button-module--reversetertiary--af1de {
  border: 2px solid var(--c-white);
  background-color: var(--c-midnight);
  color: var(--c-white);
}
.Button-module--reversetertiary--af1de:disabled {
  border: 2px solid var(--c-mist);
  background-color: var(--c-mist);
  color: var(--c-dawn);
  cursor: not-allowed;
}

a:focus > .Button-module--donate--b1f85 {
  box-shadow: var(--sh-box-button-focus);
}

.Button-module--donate--b1f85 {
  border: 2px solid var(--c-pink-tongue);
  background-color: var(--c-pink-tongue);
}
.Button-module--donate--b1f85:hover, .Button-module--donate--b1f85:focus {
  box-shadow: var(--sh-box-button-focus);
}

.Button-module--filter--f9930 {
  border-radius: var(--s-1);
  border: 0;
  background-color: var(--c-white);
  font-size: var(--t-body-s);
  height: var(--s-6);
  font-weight: 500;
  box-shadow: var(--sh-box-card);
  color: var(--c-midnight);
}
.Button-module--filter--f9930:disabled {
  border: 2px solid var(--c-mist);
  background-color: var(--c-mist);
  color: var(--c-dawn);
  cursor: not-allowed;
}

.Button-module--filterselected--0e702 {
  color: var(--c-white);
  background-color: var(--c-midnight);
}

.Button-module--small--a68db {
  font-size: var(--t-body-m);
  line-height: var(--t-body-m);
  height: var(--s-5);
}

.Button-module--link--e13d3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  white-space: normal;
  text-align: center;
}

.Button-module--withiconleft--b3226 {
  padding-inline-start: var(--s-6);
}

.Button-module--withiconright--a797d {
  padding-inline-end: var(--s-6);
}

.Button-module--iconleft--cab87 {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  inset-inline-start: var(--s-2);
}
.Button-module--iconleft--cab87 svg {
  width: var(--s-3);
}

.Button-module--iconright--16f89 {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  inset-inline-end: var(--s-2);
}
.Button-module--iconright--16f89 svg {
  width: var(--s-3);
}

.Button-module--abutton--74508 {
  text-decoration: none;
  text-align: center;
  line-height: var(--s-6);
}

.Button-module--buttontext--212cc {
  height: 100%;
  display: flex;
  align-items: center;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.LinkNoStyle-module--anchor--fc6be {
  text-decoration: none !important;
  /* Link wrapping buttons turns them into <a> and styles them */
}

.LinkNoStyle-module--linkoverride--1dd0f {
  display: flex;
}
.LinkNoStyle-module--linkoverride--1dd0f a {
  color: var(--c-black);
  text-decoration: none !important;
  /* Link wrapping buttons turns them into <a> and styles them */
}
@charset "UTF-8";
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FormCheckbox-module--checkboxwrapper--1456e {
  display: flex;
  align-items: center;
  margin: var(--s-2);
  background-color: var(--c-white);
  width: auto;
  height: 25px;
}

input[type=checkbox] {
  display: inline-block;
  margin-inline-end: 15px;
  margin-inline-start: 15px;
  border: 1px solid var(--c-mist);
  border-radius: var(--s-0-5);
  background-clip: content-box;
  background-color: var(--c-white);
  min-width: 25px;
  min-height: 25px;
  height: 25px;
  width: 25px;
  appearance: none;
}
input[type=checkbox]:checked {
  background-color: var(--c-midnight);
}
input[type=checkbox]:checked:before {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  text-align: center;
  color: var(--c-sunshine-yellow);
  font-family: var(--font-family-m-plus-1p-check), sans-serif;
  font-size: var(--t-body-l);
  font-weight: 700 !important;
  content: "✓";
}

.FormCheckbox-module--checklabel--7393f {
  margin: 0;
  margin-inline-start: var(--s-2);
  width: auto;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FormRadioButton-module--radiobutton--f7156 {
  display: flex;
  align-items: center;
  margin: var(--s-2);
  background-color: var(--c-white);
  width: auto;
  height: var(--s-3);
}

input[type=radio] {
  margin-inline-end: var(--s-1);
  margin-inline-start: var(--s-1);
  border: 1px solid var(--c-dawn);
  border-radius: 50%;
  width: var(--s-3);
  height: var(--s-3);
  appearance: none;
  display: inline-block;
  background-clip: content-box;
}
input[type=radio]:checked {
  background-color: var(--c-midnight);
}
input[type=radio]:checked:before {
  display: inline-block;
  align-self: center;
  margin-block-start: var(--s-0-5);
  margin-inline-start: var(--s-0-5);
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
  height: 14px;
  width: 14px;
  text-align: center;
  font-size: var(--t-body-l);
  content: "";
}

.FormRadioButton-module--radiolabel--84166 {
  margin-inline-start: var(--s-2);
  width: auto;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FormSelect-module--select--d84ad {
  background-color: white;
}

.FormSelect-module--errormessage--9fd60 {
  position: relative;
  inset-block-start: calc(var(--s-1) * -1);
  width: 150%;
  color: var(--c-error);
  font-size: var(--t-body-s);
  background-color: transparent;
  margin: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FormTextArea-module--textareawrapper--ff539 {
  display: flex;
  position: relative;
  flex-direction: column;
  background-color: white;
  padding: 16px 24px;
  height: 146px;
  font-family: var(--font-family);
  box-sizing: border-box;
}

.FormTextArea-module--textarealabel--a6497 {
  margin-block-end: 8px;
  font-weight: 600;
}

textarea {
  font-family: inherit;
  font-size: inherit;
}
textarea::placeholder {
  font-family: var(--font-family);
}
textarea {
  resize: none;
}

.FormTextArea-module--textarea--6a382 {
  padding: 16px 24px;
  height: 146px;
  font-family: "Work Sans" !important;
}
.FormTextArea-module--textarea--6a382::placeholder {
  font-family: "Work Sans" !important;
}

.FormTextArea-module--errormessage--2f418 {
  position: relative;
  inset-block-start: calc(var(--s-1) * -1);
  width: 150%;
  color: var(--c-error);
  font-size: var(--t-body-s);
  background-color: transparent;
  margin: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FormTextInput-module--textinputwrapper--d4de1 {
  width: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  font-family: var(--font-family);
}
.FormTextInput-module--textinputwrapper--d4de1::placeholder {
  color: var(--c-midnight);
}

.FormTextInput-module--textinputlabel--6b5b0 {
  margin-block-end: var(--s-1);
  font-weight: 600;
}

.FormTextInput-module--formtextinput--a1a0e {
  padding-inline-start: var(--s-1);
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--c-mist);
  border-radius: var(--s-0-5);
  box-shadow: var(--sh-box-1);
  height: var(--s-6);
  font-family: var(--font-family);
}
.FormTextInput-module--formtextinput--a1a0e::placeholder {
  color: var(--c-midnight);
}

.FormTextInput-module--formtextinputwithlefticon--17366 {
  border-radius: var(--s-1);
  border: 0;
  height: var(--s-6);
  padding-inline-start: 36px;
  font-family: var(--font-family);
}
.FormTextInput-module--formtextinputwithlefticon--17366::placeholder {
  color: var(--c-midnight);
}

.FormTextInput-module--errormessage--84c47 {
  position: relative;
  inset-block-start: calc(var(--s-1) * -1);
  width: 150%;
  color: var(--c-error);
  font-size: var(--t-body-s);
  margin: 0;
}

.FormTextInput-module--inputwithicon--78d6d {
  position: relative;
}

.FormTextInput-module--iconleft--21cc8 {
  position: absolute;
  inset-block-start: 12px;
  height: var(--s-2);
  width: var(--s-2);
}

.FormTextInput-module--iconright--e5552 {
  inset-block-start: 25%;
  inset-inline-start: calc(100% - 36px);
  position: absolute;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FormTextInputAutoSuggest-module--textinputwrapper--e3246 {
  display: flex;
  position: relative;
  flex-direction: column;
  margin-block-end: var(--s-1);
}

.FormTextInputAutoSuggest-module--textinputlabel--27312 {
  margin-block-end: var(--s-1);
}

.FormTextInputAutoSuggest-module--formtextinput--faf54 {
  max-width: 100%;
  border: 1px solid var(--c-mist);
  border-radius: var(--s-0-5);
  box-shadow: var(--sh-box-1);
  padding-inline-start: var(--s-2);
  height: var(--s-6);
  font-family: var(--font-family);
  font-weight: 500;
}
.FormTextInputAutoSuggest-module--formtextinput--faf54::placeholder {
  font-weight: 500;
  color: var(--c-midnight);
}

.FormTextInputAutoSuggest-module--formtextinputwithlefticon--6002b {
  max-width: 100%;
  border-radius: var(--s-1);
  border: 0;
  height: var(--s-6);
  padding-inline-start: 42px;
  font-family: var(--font-family);
  box-sizing: border-box;
  font-weight: 500;
}
.FormTextInputAutoSuggest-module--formtextinputwithlefticon--6002b::placeholder {
  font-weight: 500;
  color: var(--c-midnight);
}

.FormTextInputAutoSuggest-module--errormessage--92d91 {
  position: absolute;
  inset-block-end: -40%;
  width: 150%;
  color: var(--c-error);
  font-size: var(--t-body-s);
}

.FormTextInputAutoSuggest-module--inputwithicon--4bbe6 {
  position: relative;
}

.FormTextInputAutoSuggest-module--iconleft--f7734 {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: flex-start;
  padding-inline-start: var(--s-1);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.FormTextInputAutoSuggest-module--iconright--56899 {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: var(--s-2);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.FormTextInputAutoSuggest-module--iconbutton--360da {
  pointer-events: all;
}

.FormTextInputAutoSuggest-module--suggestionbox--d7774 {
  width: 100%;
  height: auto;
  max-height: 152px;
  margin-block-start: 2px;
  position: absolute;
  background-color: var(--c-white);
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  z-index: calc(var(--z-toast) + 1);
  overflow-y: hidden;
}

.FormTextInputAutoSuggest-module--suggestionboxresults--50406 {
  width: 100%;
  height: auto;
  max-height: 152px;
  overflow-y: scroll;
  z-index: calc(var(--z-toast) + 1);
  border-top-left-radius: var(--s-1);
  border-top-right-radius: var(--s-1);
  box-sizing: border-box;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.FormTextInputAutoSuggest-module--suggestionboxattribution--87804 {
  position: absolute;
  display: flex;
  justify-content: right;
  box-sizing: border-box;
  padding-block-start: var(--s-0-5);
  padding-inline-end: var(--s-1);
  width: 100%;
  height: var(--s-3);
  inset-block-end: 0;
  background-color: var(--c-oatmeal);
  border-bottom-left-radius: var(--s-1);
  border-bottom-right-radius: var(--s-1);
  z-index: 3;
}
.FormTextInputAutoSuggest-module--suggestionboxattribution--87804 img {
  height: 90%;
}

.FormTextInputAutoSuggest-module--suggestion--d9d6f {
  width: 100%;
  border-block-start: 1px solid var(--c-alto);
  font-family: var(--font-family);
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding-inline-start: var(--s-2);
  text-align: start;
  box-sizing: border-box;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  min-height: var(--s-6);
  overflow: hidden;
  text-overflow: ellipsis;
}
.FormTextInputAutoSuggest-module--suggestion--d9d6f:hover {
  background-color: var(--c-alto);
  cursor: pointer;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SocialMediaIcons-module--socialmediaicons--330dd {
  display: flex;
  align-items: center;
  width: 80%;
  justify-content: flex-start;
  gap: var(--s-1);
  box-sizing: border-box;
  padding: var(--s-2) 0;
  min-height: 45px;
}
.SocialMediaIcons-module--socialmediaicons--330dd a {
  width: var(--s-5);
  font-size: 0;
  line-height: 0;
  color: transparent;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SocialSelectionSharing-module--shareto--6428e {
  position: absolute;
  display: inline-flex;
  height: calc(var(--s-0-5) * 11.5);
  padding-inline: 14px;
  padding-block: 0;
  margin: 0;
  align-items: flex-start;
  flex-shrink: 0;
  background-color: var(--c-black);
  /* 48px */
  border-radius: calc(var(--s-1) * 6);
  z-index: 50;
}
.SocialSelectionSharing-module--shareto--6428e::before {
  content: "";
  display: block;
  height: var(--s-2);
  width: var(--s-2);
  background: var(--c-black);
  position: absolute;
  inset-block-start: calc(var(--s-1) * -1);
  inset-inline-start: 27px;
  transform: rotate(-45deg);
}

.SocialSelectionSharing-module--sharetoicons--83b85 {
  display: inline-flex;
  gap: 11px;
  padding: 0 !important;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ListWithCount-module--listwithcountcontainer--92a4d {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  background-color: var(--c-sandy-fur-40);
  height: 100%;
  overflow-y: hidden;
}

.ListWithCount-module--title--f8fa9 {
  position: static;
  inset-block-start: 0;
  z-index: var(--z-app-shell);
  width: 100%;
  height: var(--s-4);
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-inline-start: 10%;
  border-block-end: 1px solid var(--c-mist);
  padding-block-end: var(--s-1);
}

.ListWithCount-module--listwithcount--4eb32 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ListWithCountItem-module--listwithcountitem--59986 {
  background-color: var(--c-white);
  border: 0;
  border-block-end: 1px solid var(--c-mist);
  width: 100%;
  display: flex;
  height: var(--s-6);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--c-midnight);
}

.ListWithCountItem-module--listwithcountitemtitle--21dc1 {
  width: 75%;
  text-align: left;
  font-family: var(--font-family);
}

.ListWithCountItem-module--listwithcountitemcount--be15a {
  background-color: var(--c-midnight);
  color: var(--c-white);
  height: 24px;
  width: 24px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--t-body-s);
}

/* Selected states */
.ListWithCountItem-module--listwithcountitemselected--44fb1 {
  background-color: var(--c-midnight);
  color: var(--c-white);
}

.ListWithCountItem-module--listwithcountitemtitleselected--782e7 {
  background-color: var(--c-midnight);
  color: var(--c-white);
}

.ListWithCountItem-module--listwithcountitemcountselected--3c239 {
  background-color: var(--c-sunshine-yellow);
  color: var(--c-midnight);
  font-weight: 600;
}

.ListWithCountItem-module--listwithcountitemdisabled--33620 {
  opacity: 0.6;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NewsletterForm-module--newsletterformwrapper--8b6fd {
  position: relative;
  background-color: var(--c-midnight);
  width: 100%;
  box-sizing: border-box;
  margin-block-end: var(--s-4);
}

.NewsletterForm-module--newsletterformtitle--d7486 {
  color: var(--c-sunshine-yellow);
  font-family: var(--font-family-heading);
  margin: 0;
  margin-block-end: var(--s-2);
  font-size: var(--t-heading-m);
  line-height: var(--lh-heading-m);
}
@media (min-width: 64rem) {
  .NewsletterForm-module--newsletterformtitle--d7486 {
    font-size: var(--t-heading-l);
    line-height: var(--lh-heading-l);
  }
}

.NewsletterForm-module--newsletterformbody--ddd47 {
  color: var(--c-white);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
}

.NewsletterForm-module--emailform--9ce56 {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-2);
}
@media (min-width: 64rem) {
  .NewsletterForm-module--emailform--9ce56 {
    justify-content: space-between;
  }
}

.NewsletterForm-module--signuplink--41382 {
  margin-inline-end: var(--s-2);
  /* 200px */
  width: calc(var(--s-1) * 25);
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-2);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.AddFavourite-module--container--bc0e4 {
  max-width: 295px;
  display: flex;
  flex-direction: column;
  row-gap: var(--s-2);
}
.AddFavourite-module--title--154c0 {
  font-size: var(--t-heading-s);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .AddFavourite-module--title--154c0 {
    font-size: var(--t-heading-s);
    line-height: var(--lh-body-l);
  }
}

.AddFavourite-module--iconwrapper--872d3 {
  position: absolute;
  inset-block-start: 15px;
  inset-inline-end: 15px;
  cursor: pointer;
}

.AddFavourite-module--dogcardimage--747cc {
  position: relative;
  height: 224px;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--s-1);
}

.AddFavourite-module--login--36cec {
  margin: 0;
}

.AddFavourite-module--loginlink--0b311 {
  background: none;
  font-weight: 700;
  border: 0;
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  padding: 0;
  display: inline-block;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.PageManager-module--gridspacing--07f3d {
  width: 100%;
  padding-inline: var(--s-2);
  box-sizing: border-box;
}
@media screen and (min-width: 64rem) {
  .PageManager-module--gridspacing--07f3d {
    padding-inline: var(--s-2);
  }
}
.PageManager-module--gridspacing--07f3d {
  position: relative;
}

.PageManager-module--hidden--7d6ac {
  display: none;
}

.PageManager-module--backgroundoatmeal--858fe {
  background-color: var(--c-oatmeal);
}

.PageManager-module--backgroundsandyfur--42feb {
  background-color: var(--c-sandy-fur);
}

.PageManager-module--backgroundsunshineyellow--abcf8 {
  background-color: var(--c-sunshine-yellow);
}

.PageManager-module--backgroundwhite--443ed {
  background-color: var(--c-white);
}

.PageManager-module--backgroundmidnight--796ae {
  background-color: var(--c-midnight);
}

.PageManager-module--defaultgridwidth--e5ea6 {
  max-width: 56.25rem;
}

.PageManager-module--xlargegridwidth--a8328 {
  max-width: 64rem;
}

.PageManager-module--xxlargegridwidth--9fdcf {
  box-sizing: unset;
  max-width: 75rem;
}

.PageManager-module--xxlargegridwidthnopadding--24aa0 {
  max-width: 75rem;
  padding: 0;
}

.PageManager-module--fullgridwidth--361eb {
  max-width: 100%;
}

.PageManager-module--defaultsectionspacing--45aa4 {
  box-sizing: border-box;
  padding-block: var(--s-2);
}
@media screen and (min-width: 37.5rem) {
  .PageManager-module--defaultsectionspacing--45aa4 {
    padding-block: var(--s-4);
  }
}

.PageManager-module--extratopmarginsectionspacing--c975e {
  padding: var(--s-2) 0;
  margin-block-start: var(--s-2);
  box-sizing: border-box;
}

.PageManager-module--topmarginonlyspacing--4eca3 {
  margin-block-start: var(--s-4);
}
@media screen and (min-width: 37.5rem) {
  .PageManager-module--topmarginonlyspacing--4eca3 {
    margin-block-start: var(--s-8);
  }
}

.PageManager-module--sectionnospacing--5a054 {
  padding: 0;
  margin: 0;
}

.PageManager-module--sectionnospacingleftright--bf8db {
  padding-inline: 0;
}

.PageManager-module--sectionnospacingbottom--03a5e {
  margin-block-end: 0;
  padding-block-end: 0;
  box-sizing: border-box;
  padding-block-start: var(--s-2);
}
@media screen and (min-width: 37.5rem) {
  .PageManager-module--sectionnospacingbottom--03a5e {
    padding-block-start: var(--s-4);
  }
}
@media screen and (min-width: 64rem) {
  .PageManager-module--sectionnospacingbottom--03a5e {
    padding-block-start: var(--s-6);
  }
}

.PageManager-module--sectionspacingxxl--ae087 {
  box-sizing: border-box;
  padding-block: var(--s-4);
}

.PageManager-module--sectionwrapper--b75ad {
  width: 100%;
  display: flex;
  justify-content: center;
}

.PageManager-module--sectionwrapperprimary--ec1a2 {
  background-color: var(--c-sunshine-yellow);
  box-sizing: border-box;
}

.PageManager-module--sectionwrapperalt--d0ed2 {
  background-color: var(--c-sandy-fur);
  box-sizing: border-box;
}

.PageManager-module--sectionwrapperlight--7a640 {
  background-color: var(--c-white);
  box-sizing: border-box;
}

.PageManager-module--sectionwrapperdark--645f1 {
  background-color: var(--c-midnight);
  color: var(--c-white);
  box-sizing: border-box;
}

.PageManager-module--sectionwrapperdawn--2163b {
  background-color: var(--c-dawn);
  color: var(--c-white);
  box-sizing: border-box;
}

.PageManager-module--sectionwrapperoat--00954 {
  background-color: var(--c-oatmeal);
  box-sizing: border-box;
}

.PageManager-module--sectioncolourband--28277 {
  position: absolute;
  width: 100%;
  height: 40%;
  inset-block-end: 0;
}

.PageManager-module--borderwrapper--f7571 {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  position: relative;
  inset-block-start: 0;
}

.PageManager-module--border--1dbb3 {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  margin-block-end: -2px;
}

.PageManager-module--borderwithimagewrapper--efe6e {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  position: relative;
  inset-block-start: 0;
}

.PageManager-module--borderwithimagewrapperwithmargin--aef47 {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  position: relative;
  inset-block-start: 0;
  margin-block-start: var(--s-4);
}

.PageManager-module--borderwithimage--1b058 {
  position: absolute;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  margin-block-end: calc(-1 * var(--s-0-5));
}

.PageManager-module--borderimage--871c7 {
  position: relative;
  width: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  height: 180%;
}
@media screen and (min-width: 32.5rem) {
  .PageManager-module--borderimage--871c7 {
    height: 160%;
  }
}
@media screen and (min-width: 37.5rem) {
  .PageManager-module--borderimage--871c7 {
    height: 130%;
  }
}
@media screen and (min-width: 56.25rem) {
  .PageManager-module--borderimage--871c7 {
    height: 120%;
  }
}
@media screen and (min-width: 64rem) {
  .PageManager-module--borderimage--871c7 {
    height: 110%;
  }
}
.PageManager-module--borderimage--871c7 .PageManager-module--imagewrapper--ec2be {
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  border-radius: var(--s-1);
  overflow: hidden;
  box-shadow: var(--sh-box-card-hover);
  width: 90%;
  aspect-ratio: 4/3;
}
@media screen and (min-width: 37.5rem) {
  .PageManager-module--borderimage--871c7 .PageManager-module--imagewrapper--ec2be {
    width: 75%;
  }
}
@media screen and (min-width: 90rem) {
  .PageManager-module--borderimage--871c7 .PageManager-module--imagewrapper--ec2be {
    max-width: 56.25rem;
  }
}
.PageManager-module--borderimage--871c7 .PageManager-module--imagewrapper--ec2be img {
  object-fit: cover;
  width: 100%;
  transform: scale(1.05);
  height: auto;
}

.PageManager-module--sectionbreak--cc2e4 {
  width: 95%;
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
}

.PageManager-module--sectionbreakdoublemargin--f15ef {
  width: 95%;
  margin-block-start: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  margin-block-end: var(--s-4);
}

.PageManager-module--bordersectionbottom--ba633 {
  position: relative;
  display: flex !important;
  min-width: 100%;
  height: auto;
  /* 72px */
  min-height: calc(var(--s-1) * 9);
  flex-direction: column;
  justify-content: flex-end;
}

.PageManager-module--bordersectionbottomwithmargin--80dc6 {
  /* 152px */
  margin-block-end: calc(var(--s-1) * 19);
}
@media (min-width: 64rem) {
  .PageManager-module--bordersectionbottomwithmargin--80dc6 {
    /* 120px */
    margin-block-end: calc(var(--s-1) * 15);
  }
}

.PageManager-module--borderbottom--aeca0 {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  margin-block-end: -2px;
  min-width: 100%;
  height: 100%;
}

.PageManager-module--borderbottomimagecontainer--782cd {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.PageManager-module--borderbottomimagecontainer--782cd img {
  /* 104px */
  max-width: calc(var(--s-1) * 13);
}
@media screen and (min-width: 64rem) {
  .PageManager-module--borderbottomimagecontainer--782cd img {
    /* 200px */
    max-width: calc(var(--s-1) * 25);
  }
}
.PageManager-module--borderbottomimagecontainer--782cd img {
  position: relative;
  object-fit: contain;
}

.PageManager-module--sectionspacinghomequicklinks--6c6b9 {
  margin: 0;
  padding: 30 0;
}
@media (min-width: 37.5rem) {
  .PageManager-module--sectionspacinghomequicklinks--6c6b9 {
    padding: var(--s-5) 0 30 0;
  }
}
@media (min-width: 64rem) {
  .PageManager-module--sectionspacinghomequicklinks--6c6b9 {
    padding: var(--s-3) 0 0;
  }
}
.PageManager-module--sectionspacinghomequicklinks--6c6b9 .PageManager-module--xlargegridwidth--a8328 {
  max-width: 90rem;
}

.PageManager-module--higherindex--85969 {
  z-index: 5;
}

@media screen and (min-width: 64rem) {
  .PageManager-module--hideondesktop--193a9 {
    display: none;
  }
}

.PageManager-module--fullwidthouter--0a898 {
  position: relative;
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}

.PageManager-module--fullwidthinner--7136e {
  position: relative;
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}

.PageManager-module--forminner--3f9f6 {
  width: 100%;
  max-width: 46.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 0;
  margin-inline: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.RemoveDog-module--container--f32e2 {
  max-width: 295px;
  display: flex;
  flex-direction: column;
  row-gap: var(--s-4);
}

.RemoveDog-module--iconWrapper--b1b3d {
  position: absolute;
  inset-block-start: 15px;
  inset-inline-end: 15px;
  cursor: pointer;
  border: 0;
  background: none;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
* {
  font-family: var(--font-family);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*::placeholder {
  line-height: var(--lh-body-m);
  font-size: var(--t-body-m);
}
@media (min-width: 64rem) {
  *::placeholder {
    line-height: var(--lh-body-m);
    font-size: var(--t-body-m);
  }
}

body {
  color: var(--c-body);
  background-color: var(--c-body-bg);
  padding: 0;
  margin: 0;
  overflow-y: scroll;
}

svg {
  max-width: 100%;
  fill: currentColor;
}

p {
  font-weight: var(--fw-medium);
  margin-block: 0 var(--s-1);
  line-height: var(--lh-body-l);
  font-size: var(--t-body-l);
}
@media (min-width: 64rem) {
  p {
    line-height: var(--lh-body-l);
    font-size: var(--t-body-l);
  }
}

h1 {
  font-weight: var(--fw-medium);
  margin-bottom: var(--s-2);
  font-family: var(--font-family-heading);
  margin-block: 0 var(--s-2);
  font-size: var(--t-heading-xl);
  line-height: var(--lh-heading-xl);
}
@media (min-width: 64rem) {
  h1 {
    font-size: var(--t-heading-xxl);
    line-height: var(--lh-heading-xxl);
  }
}

h2 {
  font-weight: var(--fw-normal);
  font-family: var(--font-family-heading);
  margin-block: 0 var(--s-2);
  font-size: var(--t-heading-l);
  line-height: var(--lh-heading-l);
}
@media (min-width: 64rem) {
  h2 {
    font-size: var(--t-heading-xl);
    line-height: var(--lh-heading-xl);
  }
}

h3 {
  font-weight: var(--fw-normal);
  font-family: var(--font-family-heading);
  margin-block: 0 var(--s-1);
  font-size: var(--t-heading-m);
  line-height: var(--lh-heading-m);
}
@media (min-width: 64rem) {
  h3 {
    font-size: var(--t-heading-l);
    line-height: var(--lh-heading-l);
  }
}

h4 {
  font-weight: var(--fw-normal);
  font-family: var(--font-family-heading);
  margin-block: 0 var(--s-1);
  font-size: var(--t-heading-s);
  line-height: var(--lh-heading-s);
}

strong {
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-l);
  font-size: var(--t-body-l);
}
@media (min-width: 64rem) {
  strong {
    line-height: var(--lh-body-l);
    font-size: var(--t-body-l);
  }
}

a {
  color: var(--c-midnight) !important;
  -webkit-text-decoration: var(--td-link-decoration);
          text-decoration: var(--td-link-decoration);
  font-family: var(--font-family);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-position: under;
}
a:hover, a:focus-visible {
  color: var(--c-midnight) !important;
  text-decoration-style: solid;
}
a:disabled {
  color: var(--c-link-disabled) !important;
}

hr {
  border: 0 none;
  border-top: 1px solid var(--c-gray-300);
}

ul,
ol {
  padding-left: var(--s-3);
}

button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

ul li {
  position: relative;
  font-family: var(--font-family);
  font-weight: 500;
  display: unset;
  align-items: flex-start;
  justify-content: flex-start;
  padding-inline-start: var(--s-4);
  min-height: var(--s-4);
  line-height: var(--lh-body-l);
  font-size: var(--t-body-l);
}
@media (min-width: 64rem) {
  ul li {
    padding-inline-start: var(--s-6);
    padding-block-end: var(--s-1);
  }
}

ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-sandy-fur);
  position: absolute;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}

ol {
  padding-inline-start: 0;
  list-style-position: inside;
}

ol li {
  font-family: var(--font-family);
  font-weight: 500;
  position: relative;
  padding-inline-start: var(--s-4);
  line-height: var(--lh-body-l);
  font-size: var(--t-body-l);
}
ol li::marker {
  font-weight: var(--fw-bold);
}

:root {
  /***** 
  Primary Brand Palette (SCSS variables for local scoping)
  Do not use these values directly if you can help it
  *****/
  /* Primary Palette */
  --c-sunshine-yellow: hsl(47, 100%, 50%);
  --c-sunshine-yellow-10pc-lighter: hsl(46, 100%, 60%);
  --c-sunshine-yellow-30pc-lighter: hsl(48, 100%, 70%);
  --c-sunshine-yellow-off-colour: #e7d79b;
  --c-teal: #80c2ab;
  --c-white: #ffffff;
  --c-black: #222222;
  /* Secondary Palette */
  --c-sandy-fur: #faf5e6;
  --c-sandy-fur-light: #fcfaf5;
  --c-sandy-fur-alt: #f4efe0;
  --c-sandy-fur-60: rgba(250, 245, 230, 0.6);
  --c-sandy-fur-40: rgba(250, 245, 230, 0.4);
  --c-oatmeal: #d2c8b9;
  --c-oatmeal-light: #edeae4;
  --c-oatmeal-60: rgba(210, 200, 185, 0.6);
  --c-oatmeal-40: rgba(210, 200, 185, 0.4);
  --c-oatmeal-20: rgba(210, 200, 185, 0.2);
  --c-alto: #E0E0E0;
  --c-pampas: #F6F4F1;
  /* Supporting Palette */
  --c-pink-tongue: #fa9b9b;
  --c-pink-tongue-dark: #8d5265;
  --c-blue-sky: #8cd7e6;
  --c-blue-sky-dark: #6296a1;
  --c-green-grass: #dceb9b;
  --c-green-grass-dark: #99a46c;
  --c-dark-grey: #585858;
  --c-mid-grey: #d0d0d0;
  /* Supporting Text and Icon Palette */
  --c-midnight: #222222;
  --c-midnight-16pc-opacity: rgba(34, 34, 34, 0.16);
  --c-dawn: #595959;
  --c-mist: #dddddd;
  --c-mist-38pc-opacity: rgba(221, 221, 221, 0.38);
  --c-red: #ac2b3e;
  --c-brand-primary: rgb(255, 200, 0);
  --c-brand-primary-50: rgba(255, 200, 0, 0.5);
  --c-brand-primary-25: rgba(255, 200, 0, 0.25);
  --c-brand-secondary: rgb(250, 245, 230);
  --c-brand-secondary-50: rgba(250, 245, 230, 0.5);
  --c-brand-secondary-25: rgba(250, 245, 230, 0.25);
  --c-brand-tertiary: rgb(210, 200, 185);
  --c-brand-quaternary: rgb(34, 34, 34);
  --c-brand-quinary: rgb(221, 221, 221);
  /***** Grayscale Palette *****/
  --c-gray-100: hsl(0, 0%, 96%);
  --c-gray-200: hsl(0, 0%, 92%);
  --c-gray-300: hsl(0, 0%, 78%);
  --c-gray-400: hsl(0, 0%, 69%);
  --c-gray-500: hsl(0, 0%, 56%);
  --c-gray-600: hsl(0, 0%, 44%);
  --c-gray-700: hsl(0, 0%, 20%);
  --c-gray-800: hsl(0, 0%, 17%);
  /* // TODO will need to define all of these and use them where necessary */
  /***** Usage Semantics (design tokens) *****/
  --c-focus: var(--c-brand-primary);
  --c-active: var(--c-brand-primary);
  --c-separator: var(--c-brand-quaternary);
  --c-tooltip-bg: var(--c-brand-primary);
  --c-tooltip-border: var(--c-gray-800);
  --c-positive: var(--c-green);
  --c-negative: var(--c-red);
  --c-error: var(--c-red);
  --c-informational: var(--c-brand-quinary);
  --c-advisory: var(--c-amber);
  --c-body-bg: var(--c-white);
  --c-body: var(--c-brand-quaternary);
  --c-link: var(--c-brand-quaternary);
  --c-link-hover: var(--c-brand-quaternary);
  --c-link-disabled: var(--c-gray-600);
  --c-input-border-disabled: var(--c-brand-quaternary);
  --c-input-bg: var(--c-white);
  --c-input-bg-focus: var(--c-white);
  --c-input-bg-disabled: #efece3;
  --c-input-bg-active: var(--c-white);
  --c-input-border: var(--c-brand-quaternary);
  --c-input-border-focus: var(--c-brand-quaternary);
  --c-input-border-active: var(--c-brand-quaternary);
  --c-input-invalid: var(--c-negative);
  --c-input-bg-invalid: var(--c-white);
  --c-input-border-invalid: var(--c-negative);
  --c-input-helper-text: var(--c-brand-quaternary);
  --c-btn: var(--c-brand-quaternary);
  --c-btn-bg: transparent;
  --c-btn-border: var(--c-brand-quaternary);
  --c-btn-hover: var(--c-brand-quaternary);
  --c-btn-hover-bg: var(--c-gray-300);
  --c-btn-hover-border: var(--c-gray-300);
  --c-btn-disabled: var(--c-brand-quaternary);
  --c-btn-disabled-border: var(--c-gray-500);
  --c-btn-disabled-bg: var(--c-gray-500);
  --c-btn-primary: var(--c-white);
  --c-btn-primary-bg: var(--c-brand-quaternary);
  --c-btn-primary-border: var(--c-brand-quaternary);
  --c-btn-primary-hover: var(--c-brand-quaternary);
  --c-btn-primary-hover-bg: var(--c-white);
  --c-btn-primary-hover-border: var(--c-brand-quaternary);
  --c-btn-primary-disabled: var(--c-white);
  --c-btn-primary-disabled-border: var(--c-gray-700);
  --c-btn-primary-disabled-bg: var(--c-gray-700);
  --c-btn-important: var(--c-brand-quaternary);
  --c-btn-important-bg: var(--c-brand-primary);
  --c-btn-important-border: var(--c-brand-primary);
  --c-btn-important-hover: var(--c-brand-quaternary);
  --c-btn-important-hover-bg: var(--c-brand-primary-50);
  --c-btn-important-hover-border: var(--c-brand-primary-50);
  --c-btn-important-disabled: var(--c-brand-quaternary);
  --c-btn-important-disabled-border: var(--c-brand-primary-50);
  --c-btn-important-disabled-bg: var(--c-brand-primary-50);
  --c-btn-tertiary: var(--c-link);
  --c-btn-tertiary-bg: transparent;
  --c-btn-tertiary-border: transparent;
  --c-btn-tertiary-hover: var(--c-gray-600);
  --c-btn-tertiary-hover-border: var(--c-gray-600);
  --c-btn-tertiary-hover-bg: transparent;
  --c-btn-tertiary-disabled: var(--c-link-disabled);
  --c-btn-tertiary-disabled-border: transparent;
  --c-btn-tertiary-disabled-bg: transparent;
  --c-overlay-opacity: 0.7;
  --c-overlay-bg-color: var(--c-brand-secondary);
  --c-cmp-checkbox-icon-bg-hover: var(--c-brand-secondary);
  --c-cmp-radio-icon-bg-hover: var(--c-brand-secondary);
  --c-input-placeholder: var(--c-gray-300);
  --c-input-counter: var(--c-grey);
}

:root {
  --s-0-5: calc(0.5 * var(--s-1));
  --s-0-75: calc(0.75 * var(--s-1));
  --s-1: 8px;
  --s-2: calc(2 * var(--s-1));
  --s-3: calc(3 * var(--s-1));
  --s-4: calc(4 * var(--s-1));
  --s-5: calc(5 * var(--s-1));
  --s-6: calc(6 * var(--s-1));
  --s-7: calc(7 * var(--s-1));
  --s-8: calc(8 * var(--s-1));
  --s-9: calc(9 * var(--s-1));
  --s-10: calc(10 * var(--s-1));
  --s-min-gutter: var(--s-2);
  --s-border-width: 1px;
  --s-border-radius-xs: 4px;
  --s-border-radius-s: var(--s-1);
  --s-border-radius-m: calc(var(--s-1) * 1.5);
  --s-icon: 24px;
  --s-readable-text-width: 70ch;
  --s-max-content-width: 56rem;
  --form-element-width: calc(var(--s-1) * 58.3);
  --z-modal: 10001;
  --z-header: 10000;
  --z-dropdown: 1000;
  --z-tooltip: 1000;
  --z-toast: 10;
  --z-app-shell: 2;
  --z-raised: 1;
  --s-common-element-width-m: calc(var(--s-1) * 44);
}

@media (min-width: 75rem) {
  :root {
    --s-min-gutter: var(--s-4);
  }
}
:root {
  --sh-box-1: inset 0 2px 3px 0 rgba(34, 34, 34, 0.16);
  --sh-box-light: 0 0 9px 0 rgba(0, 0, 0, 0.1);
  --sh-box-heavy: 0 0 9px 0 rgba(0, 0, 0, 0.5);
  --sh-box-outer: 0 2px 3px 0 rgba(34, 34, 34, 0.16);
  --sh-box-card: 0 0 9px 0 rgba(0, 0, 0, 0.15);
  --sh-box-card-hover: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  --sh-box-outer-dark: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  --sh-box-button-focus: inset 2px 2px 100px 100px rgba(126, 126, 126, 0.2);
  --border-spacer: 1px solid rgba(126, 126, 126, 0.5);
  --bb-section-break: 1px solid #dddddd;
}

.preformatted {
  white-space: pre-wrap;
  word-wrap: break-word;
}

:root {
  --ease-1: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-2: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-duration-s: 0.15s;
  --ease-duration-m: 0.3s;
  --ease-duration-l: 0.8s;
  --ease-duration-xl: 1.3s;
}

@keyframes slideUpAndFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideRightAndFade {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideLeftAndFade {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  90% {
    opacity: inherit;
  }
}
@keyframes fadeGrowIn {
  0% {
    opacity: 0;
    scale: 0.5;
  }
  50% {
    scale: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideInFromBlockEnd {
  0% {
    translatex: 100%;
  }
  100% {
    translatex: 0;
  }
}
:root {
  --font-family-fido: "Fido", Arial;
  --font-family-work-sans: "Work Sans", "Arial";
  --font-family-m-plus-1p: "M PLUS 1p", Arial;
  --font-family-m-plus-1p-check: "M PLUS 1p Check", Arial;
  --font-family: var(--font-family-work-sans);
  --font-family-heading: var(--font-family-fido);
  --fw-bolder: 700;
  --fw-bold: 600;
  --fw-medium: 500;
  --fw-normal: 400;
  --fw-light: 300;
  --fw-lighter: 200;
  --t-base: 16;
  /** Design token **/
  --t-body-xxs: calc(10rem / var(--t-base));
  --t-body-xs: calc(12rem / var(--t-base));
  --t-body-s: calc(14rem / var(--t-base));
  --t-body-m: 1rem;
  --t-body-l: calc(20rem / var(--t-base));
  --t-body-xl: calc(22rem / var(--t-base));
  --t-body-xxl: calc(28rem / var(--t-base));
  --t-heading-xxs: calc(14rem / var(--t-base));
  --t-heading-xs: calc(18rem / var(--t-base));
  --t-heading-s: calc(22rem / var(--t-base));
  --t-heading-m: calc(24rem / var(--t-base));
  --t-heading-l: calc(28rem / var(--t-base));
  --t-heading-xl: calc(36rem / var(--t-base));
  --t-heading-xxl: calc(56rem / var(--t-base));
  --lh-body-xxs: calc(calc(10rem / var(--t-base)) * 1.6);
  --lh-body-xs: calc(calc(12rem / var(--t-base)) * 1.6);
  --lh-body-s: calc(calc(14rem / var(--t-base)) * 1.6);
  --lh-body-m: calc(1rem * 1.6);
  --lh-body-l: calc(calc(20rem / var(--t-base)) * 1.6);
  --lh-body-xl: calc(calc(22rem / var(--t-base)) * 1.6);
  --lh-body-xxl: calc(calc(28rem / var(--t-base)) * 1.6);
  --lh-heading-xxs: calc(calc(22rem / var(--t-base)) * 1.1);
  --lh-heading-xs: calc(calc(28rem / var(--t-base)) * 1.1);
  --lh-heading-s: calc(calc(34rem / var(--t-base)) * 1.1);
  --lh-heading-m: calc(calc(36rem / var(--t-base)) * 1.1);
  --lh-heading-l: calc(calc(42rem / var(--t-base)) * 1.1);
  --lh-heading-xl: calc(calc(54rem / var(--t-base)) * 1.1);
  --lh-heading-xxl: calc(calc(64rem / var(--t-base)) * 1.1);
  --td-link-decoration: underline;
  --td-link-hover-decoration: none;
}

@font-face {
  font-family: "Work Sans";
  font-weight: 400;
  src: local("Work Sans"), url(/static/WorkSans-Light-fac13dd323bd1d5c509da208c44b70d8.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  font-weight: 500;
  src: local("Work Sans"), url(/static/WorkSans-Regular-a11c276b0704ee65768387fa43b1c00c.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 600;
  src: local("Work Sans"), url(/static/WorkSans-Medium-550d7b66889faf349cbf36d39f448379.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  font-weight: bold;
  src: local("Work Sans"), url(/static/WorkSans-Bold-ab8702255905c24de1c115f94a1508d9.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Fido";
  font-style: normal;
  font-weight: bold;
  src: local("Fido"), url(/static/Fido-Bold-e7b5f4bbfc31178d9e4020c3830a3911.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "M PLUS 1p Check";
  font-style: normal;
  font-weight: 500;
  src: local("M PLUS 1p"), url(data:font/woff2;base64,d09GMgABAAAAAAOQAA0AAAAACZwAAAM7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGhgGYACCUhEICmBjCwwAATYCJAMUBCAFiyAHNBuyCBFVnCEJvkowp2hZTvWPSpVXuLP0j6djGG4YXS53SvqZiKC1qsjqniVWRyzZAVkissDPlt27P/VkESnhd5NK9DwBdPL6P3TUpcnP+RkZf34Ijj6DLTxsORndcz919+P5AOt06fYX0UDzWUQClw00ohknMp7olLegZwGnqXlz725C4K1lN4MPrv45QxMPOtCDBfX6Kt/kFw3KNWVcRwzO+yal0ASE02D1C2YbMb6/nvLfA5SXQaAMciVHSFeoMITNfF34ZbWJaNGiAGbd/1ze7/+P3/hRAEgTAaQgp79NxfDV538KaIA2VOjDEEANCiB13baps+6Y1dno2LWm/e11S974b1vbr2f2vNnaHr1mQrl78kflnh8H7trBWwKCsHLCLzZ1T/+1pb36ooMFB6j2NbuyOf2hazAgJtTLAgBo5EkDkAUYAPx7Dwsa2hRQEMFsAKNyhwDGWSggml0QUDS7XUCl15MCat3+FtDQmfECmnRmiYBmyTYBLZI9AlolhwS0SU4IaDcoVwV0SJ4R0OmmQkCXQdX9Ano0Vx8J6NVc/aWSuhXzccPocgIKfT1WRrkTa8O8jQ2D0g5N9DRsVrIJWugd0Ervgzb6CLabmlPYoeQJ7MyIPIddplZnsEdX9RL0fpqvzKMtlK5qjmEJmBgZW4BvlgIvuuBdreApEQFbR8Iq1NgATWvMzj/k2yq8dBdMxR9qcAzRiyu4VcgJevme+M1EnxTjKBWo0UVu/YhgAy0IiAOhGQFOC5iY8/1SBdI5ajKMDIyMjNG5MTgajEbjFJRcEo5hVEwpMHosYTiljeHkTCl1xPo0PlOxmwoslhvwSrR312brkba/skbyoOA4H/hSGvzNcrj40l8KmjgHFIR8PeVElBxTYnCUiyk1EBYy6suDZ/CmJGJTqPeMBL2EVQljxizrUcnTV+ZqVeAk4KQCoTSE6JkjLMgo39aHWz+xgaoMZ5GaU1ahljFl1OiaMfTm1jPaxsiaX/l7EMqDWMwWxfv18HxbvzyS4qZuZYcwjwcmLWJVYuTh61KswLz9sAVkgwZUbEPNAw4t2z514O32mYqTYswZHmRtNBmMnXPKkJTmE7mbLMdTAAAA) format("woff2");
  font-display: swap;
}

/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CharityShopListingCard-module--shopcardcontainer--0e0e0 {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
  width: 100%;
  align-self: stretch;
}

.CharityShopListingCard-module--shoplocationcontainer--4564f {
  position: relative;
  height: 65px;
  width: 100%;
  padding: var(--s-1) var(--s-2);
  box-sizing: border-box;
}

.CharityShopListingCard-module--shopname--e4175 {
  position: relative;
  font-family: var(--font-family-heading);
  margin: 0;
}
.CharityShopListingCard-module--shopname--e4175 a {
  color: var(--c-midnight);
}

.CharityShopListingCard-module--shoplocation--83ce0 {
  position: relative;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
}

.CharityShopListingCard-module--shoptext--e0d47 {
  position: relative;
  color: var(--c-dawn);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
}

.CharityShopListingCard-module--distance--2ca01 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
}

.CharityShopListingCard-module--cardsectionbreak--a67ea {
  width: 95%;
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
  margin: 0 auto;
  padding: 0;
}

.CharityShopListingCard-module--shopcardlinkscontainer--3a6d0 {
  position: relative;
  display: flex;
  justify-content: flex-start;
  height: 45px;
  width: 100%;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
}
.CharityShopListingCard-module--shopcardlinkscontainer--3a6d0 .CharityShopListingCard-module--phone--0827c {
  position: relative;
  display: flex;
  padding-inline-start: var(--s-2);
  justify-content: flex-start;
  align-items: center;
  width: 50%;
  padding-inline-start: var(--s-2);
  padding-inline-end: var(--s-2);
  column-gap: var(--s-1);
}
.CharityShopListingCard-module--shopcardlinkscontainer--3a6d0 .CharityShopListingCard-module--phone--0827c:hover {
  background-color: transparent;
}
.CharityShopListingCard-module--shopcardlinkscontainer--3a6d0 .CharityShopListingCard-module--phone--0827c a {
  color: var(--c-dawn);
}
.CharityShopListingCard-module--shopcardlinkscontainer--3a6d0 .CharityShopListingCard-module--maplink--65edb {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-inline-end: var(--s-2);
  column-gap: var(--s-1);
  align-items: center;
  width: 50%;
}
.CharityShopListingCard-module--shopcardlinkscontainer--3a6d0 .CharityShopListingCard-module--maplink--65edb:hover {
  background-color: transparent;
}
.CharityShopListingCard-module--shopcardlinkscontainer--3a6d0 .CharityShopListingCard-module--maplink--65edb a {
  color: var(--c-dawn);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroAppealPageImageWithDonate-module--mobile--f96d8 {
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .IntroAppealPageImageWithDonate-module--mobile--f96d8 {
    display: none;
  }
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--herowithimagecontainerouter--922f2 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  overflow: hidden;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--herowithimagecontainer--ec92d {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 248px */
  min-height: calc(var(--s-1) * 31);
  max-width: 56.25rem;
}
@media screen and (min-width: 37.5rem) {
  .IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--herowithimagecontainer--ec92d {
    /* 320px */
    min-height: calc(var(--s-1) * 40);
  }
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--herowithimagecontainer--ec92d img {
  width: 100%;
  height: auto;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--bordersection--b1d89 {
  position: absolute;
  width: 100%;
  height: auto;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--border--27e7d {
  position: relative;
  min-width: 100%;
  z-index: var(--z-app-shell);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: calc(var(--s-0-5) * -1);
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--textcontainer--9c0f7 {
  width: 90%;
  /* 400px */
  max-width: calc(var(--s-1) * 50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--textcontainernoimage--e2b4b {
  max-width: 37.5rem;
  margin: auto;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  padding-block-start: var(--s-8);
  padding-block-end: var(--s-4);
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--subtext--96d90 {
  width: 80%;
  max-width: 37.5rem;
  min-height: var(--s-4);
  margin-bottom: 0;
  margin-top: var(--s-2);
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--title--a6b8d {
  width: 80%;
  max-width: 37.5rem;
  box-sizing: border-box;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--widgetouterprimary--507fc {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--widgetouterprimary--507fc .IntroAppealPageImageWithDonate-module--inner--aee07 {
  background-color: var(--c-sunshine-yellow);
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--widgetouteralternative--4e04a {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--widgetouteralternative--4e04a .IntroAppealPageImageWithDonate-module--inner--aee07 {
  background-color: var(--c-sandy-fur);
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--widgetouterlight--cc85f {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--widgetouterlight--cc85f .IntroAppealPageImageWithDonate-module--inner--aee07 {
  background-color: var(--c-white);
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--widgetouterdark--0cdff {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--widgetouterdark--0cdff .IntroAppealPageImageWithDonate-module--inner--aee07 {
  background-color: var(--c-black);
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--inner--aee07 {
  position: relative;
  text-align: left;
  width: 100%;
  margin: var(--s-2) 0;
  padding: var(--s-1);
  box-sizing: border-box;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--bordersectionbottom--42a91 {
  position: relative;
  display: flex;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  height: auto;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--bordersectionbottom--42a91 .IntroAppealPageImageWithDonate-module--borderbottom--79776 {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  pointer-events: none;
}
.IntroAppealPageImageWithDonate-module--mobile--f96d8 .IntroAppealPageImageWithDonate-module--bordersectionbottom--42a91 .IntroAppealPageImageWithDonate-module--borderbottom--79776 svg {
  width: 100%;
  margin-block-end: -4px;
}

.IntroAppealPageImageWithDonate-module--desktop--ee2fe {
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .IntroAppealPageImageWithDonate-module--desktop--ee2fe {
    display: none;
  }
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--herowithimagecontainerouter--922f2 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  overflow: hidden;
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--herowithimagecontainerinner--a445e {
  display: flex;
  width: 100%;
  max-width: 90rem;
  margin-block-end: var(--s-4);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--herowithimagecontainer--ec92d {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 648px */
  max-width: calc(var(--s-1) * 81);
  height: calc(var(--s-1) * 52);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--herowithimagecontainer--ec92d img {
  height: calc(var(--s-1) * 52);
  /* 600px */
  width: calc(var(--s-1) * 75);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--bordersection--b1d89 {
  width: calc(var(--s-1) * 75);
  /* 600px */
  position: absolute;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--border--27e7d {
  position: relative;
  min-width: 100%;
  z-index: var(--z-app-shell);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: calc(var(--s-0-5) * -1);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--textcontainer--9c0f7 {
  width: 100%;
  /* 400px */
  max-width: calc(var(--s-1) * 50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  height: auto;
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--textcontainer--9c0f7 h1 {
  width: 100%;
  margin-block-start: var(--s-4);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--textcontainer--9c0f7 > div {
  width: 100%;
  margin-block-start: var(--s-2);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--textcontainernoimage--e2b4b {
  max-width: 56.25rem;
  margin: auto;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  padding-block-start: var(--s-4);
  padding-block-end: var(--s-4);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--subtext--96d90 {
  width: 80%;
  max-width: 37.5rem;
  min-height: var(--s-4);
  margin-bottom: 0;
  margin-top: var(--s-2);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--title--a6b8d {
  width: 80%;
  max-width: 37.5rem;
  box-sizing: border-box;
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--widgetouterprimary--507fc {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--widgetouterprimary--507fc .IntroAppealPageImageWithDonate-module--inner--aee07 {
  background-color: var(--c-sunshine-yellow);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--widgetouteralternative--4e04a {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--widgetouteralternative--4e04a .IntroAppealPageImageWithDonate-module--inner--aee07 {
  background-color: var(--c-sandy-fur);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--widgetouterlight--cc85f {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--widgetouterlight--cc85f .IntroAppealPageImageWithDonate-module--inner--aee07 {
  background-color: var(--c-white);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--widgetouterdark--0cdff {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--widgetouterdark--0cdff .IntroAppealPageImageWithDonate-module--inner--aee07 {
  background-color: var(--c-black);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--inner--aee07 {
  position: relative;
  text-align: left;
  z-index: var(--z-toast);
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  width: 100%;
  padding: var(--s-2);
  box-sizing: border-box;
  border-radius: var(--s-2);
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--bordersectionbottom--42a91 {
  position: relative;
  display: flex;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  height: auto;
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--bordersectionbottom--42a91 .IntroAppealPageImageWithDonate-module--borderbottom--79776 {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  pointer-events: none;
  inset-block-end: 0;
}
.IntroAppealPageImageWithDonate-module--desktop--ee2fe .IntroAppealPageImageWithDonate-module--bordersectionbottom--42a91 .IntroAppealPageImageWithDonate-module--borderbottom--79776 svg {
  width: 100%;
  margin-block-end: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroMyAccount-module--container--616cc {
  position: relative;
  width: 100%;
  height: auto;
  background-color: var(--c-sunshine-yellow);
}

.IntroMyAccount-module--inner--d4e0d {
  padding: var(--s-4) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 64rem;
  margin-inline: auto;
}
@media (min-width: 64rem) {
  .IntroMyAccount-module--inner--d4e0d {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
  }
}

.IntroMyAccount-module--quicklinkscontainer--2271b {
  position: relative;
  overflow: hidden;
}
@media (min-width: 64rem) {
  .IntroMyAccount-module--quicklinkscontainer--2271b {
    height: auto;
    width: 100%;
    margin: 0;
    overflow: visible;
  }
}

.IntroMyAccount-module--quicklinksinner--a1ed4 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  column-gap: var(--s-1);
  padding-block: var(--s-4);
  padding-inline-start: 0;
  list-style: none;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.IntroMyAccount-module--pageitem--e9adf {
  position: relative;
  text-align: center;
  margin-inline-end: 5px;
  padding-inline-start: var(--s-4);
}
.IntroMyAccount-module--pageitem--e9adf::before {
  display: none;
}
@media (min-width: 37.5rem) {
  .IntroMyAccount-module--pageitem--e9adf {
    margin-inline-end: var(--s-1);
  }
}
@media (min-width: 64rem) {
  .IntroMyAccount-module--pageitem--e9adf:last-child {
    margin-inline-end: 0;
  }
}
.IntroMyAccount-module--pageitem--e9adf .IntroMyAccount-module--title--16434 {
  display: block;
  font-weight: 600;
  max-width: calc(var(--s-1) * 14);
  color: var(--c-black);
  font-size: var(--t-heading-xs);
  /* Tighten the gap */
  line-height: var(--lh-heading-xxs);
}
.IntroMyAccount-module--pageitem--e9adf .IntroMyAccount-module--link--f2ac4 {
  text-decoration: none;
  display: block;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  width: calc(var(--s-1) * 12);
}
@media (min-width: 37.5rem) {
  .IntroMyAccount-module--pageitem--e9adf .IntroMyAccount-module--link--f2ac4 {
    /* 104px */
    width: calc(var(--s-1) * 13);
  }
}
.IntroMyAccount-module--pageitem--e9adf .IntroMyAccount-module--link--f2ac4 svg {
  transition: transform 0.7s;
  width: 85px;
}
@media (min-width: 37.5rem) {
  .IntroMyAccount-module--pageitem--e9adf .IntroMyAccount-module--link--f2ac4 svg {
    /* 104px */
    width: calc(var(--s-1) * 13);
  }
}
.IntroMyAccount-module--pageitem--e9adf .IntroMyAccount-module--link--f2ac4:hover svg {
  transform: scale(1.2);
}

.IntroMyAccount-module--heading--5c783 {
  max-width: 100%;
  font-family: var(--font-family-heading);
  font-size: var(--s-4);
  line-height: var(--s-5);
  font-weight: 700;
  border-block-end: solid 1px var(--c-white);
  margin-inline: var(--s-4);
  padding-block-end: var(--s-2);
}
@media (min-width: 64rem) {
  .IntroMyAccount-module--heading--5c783 {
    width: 100%;
    border: none;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphAlignedImageAndText-module--alignedimageandtext--caa65 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
@media screen and (min-width: 64rem) {
  .ParagraphAlignedImageAndText-module--alignedimageandtext--caa65 {
    flex-direction: row;
    align-items: center;
  }
}

@media screen and (min-width: 64rem) {
  .ParagraphAlignedImageAndText-module--textleft--22380 {
    order: 1;
    max-width: 50%;
  }
}

@media screen and (min-width: 64rem) {
  .ParagraphAlignedImageAndText-module--textright--8deeb {
    order: 2;
    max-width: 50%;
  }
}

@media screen and (min-width: 64rem) {
  .ParagraphAlignedImageAndText-module--imagecontainerleft--f85ab {
    order: 1;
  }
}
.ParagraphAlignedImageAndText-module--imagecontainerleft--f85ab img {
  width: 100%;
  object-fit: contain;
  object-position: center center;
}

@media screen and (min-width: 64rem) {
  .ParagraphAlignedImageAndText-module--imagecontainerright--30eff {
    order: 2;
  }
}
.ParagraphAlignedImageAndText-module--imagecontainerright--30eff img {
  width: 100%;
  object-fit: contain;
  object-position: center center;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphButton-module--sectionwrapperouter--4ba33 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  margin-block-end: var(--s-5);
}

.ParagraphButton-module--sectionwrapperinner--72a65 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.ParagraphButton-module--buttonwrapper--06ad6 {
  margin: var(--s-1) auto;
  width: 95%;
  padding: var(--s-2) 0;
  box-sizing: border-box;
}
@media screen and (min-width: 37.5rem) {
  .ParagraphButton-module--buttonwrapper--06ad6 {
    width: fit-content;
    margin: var(--s-2) 0;
    /* 368px */
    min-width: calc(var(--s-1) * 46);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphContactUs-module--paragraphcontactusinner--7dde5 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  height: auto;
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
}

.ParagraphContactUs-module--title--19720 {
  width: 100%;
  padding-block-start: var(--s-4);
  text-align: left;
}

.ParagraphContactUs-module--paragraphsectionreak--dad40 {
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
  border-block-end: var(--bb-section-break);
  margin: 0;
  padding: 0;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.ParagraphContactUs-module--bodytext--4063c {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: left;
}
.ParagraphContactUs-module--bodytext--4063c p {
  width: 100%;
}
@media screen and (min-width: 37.5rem) {
  .ParagraphContactUs-module--bodytext--4063c p {
    width: 100%;
  }
}
.ParagraphContactUs-module--bodytext--4063c p {
  word-wrap: break-word;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
.ParagraphContactUs-module--bodytext--4063c h2 {
  margin-block-start: var(--s-2);
}
.ParagraphContactUs-module--bodytext--4063c h3 {
  margin-block-start: var(--s-2);
}
.ParagraphContactUs-module--bodytext--4063c h4 {
  margin-block-start: var(--s-2);
}
.ParagraphContactUs-module--bodytext--4063c ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}

.ParagraphContactUs-module--contactinfo--c00eb {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ParagraphContactUs-module--lpreducedmargin--c442a {
  margin: var(--s-1) 0;
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-dawn);
  font-size: 21px;
  line-height: var(--lh-body-l);
}

.ParagraphContactUs-module--phonetext--1759c {
  margin: var(--s-1) 0;
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-dawn);
  font-size: 21px;
  line-height: var(--lh-body-l);
}

.ParagraphContactUs-module--buttonwrapper--50637 {
  margin: var(--s-1) 0;
  width: 95%;
  margin-inline-start: auto;
  margin-inline-end: auto;
}
@media screen and (min-width: 37.5rem) {
  .ParagraphContactUs-module--buttonwrapper--50637 {
    margin: var(--s-1) 0;
    /* 368px */
    width: calc(var(--s-1) * 46);
  }
}

.ParagraphContactUs-module--highlightedtextarea--06403 {
  width: 100%;
  background-color: var(--c-oatmeal-light);
  border-radius: var(--s-0-5);
  padding: var(--s-1);
  margin: var(--s-2) 0;
  box-sizing: border-box;
  text-align: center;
}
.ParagraphContactUs-module--highlightedtextarea--06403 p {
  font-family: var(--font-family);
  font-weight: 500;
  margin: var(--s-1);
}
.ParagraphContactUs-module--highlightedtextarea--06403 a {
  font-weight: 600;
}
.headings-module--sectionHeading--a8f67 {
    font-size: var(--t-heading-l);
    line-height: var(--lh-heading-l);
}

.headings-module--sectionHeadingSmall--b489b {
    font-size: var(--t-heading-m);
    line-height: var(--lh-heading-m);
}

.headings-module--signpostHeading--5d377 {
    font-size: var(--t-heading-l);
    line-height: var(--lh-heading-l);
}

.headings-module--signpostHeadingSmall--e67c4 {
    font-size: var(--t-heading-s);
    line-height: var(--lh-heading-s);
}

.headings-module--signpostHeadingXSmall--3be29 {
    font-size: var(--t-heading-xs);
    line-height: var(--lh-heading-xs);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionMarketingPreferencesForm-module--outerwrapper--ad5c0 {
  width: 100%;
  height: auto;
  padding-block-start: var(--s-1);
}
@media screen and (min-width: 37.5rem) {
  .SectionMarketingPreferencesForm-module--outerwrapper--ad5c0 {
    padding-block-start: var(--s-2);
    padding-block-end: var(--s-2);
  }
}
@media screen and (min-width: 64rem) {
  .SectionMarketingPreferencesForm-module--outerwrapper--ad5c0 {
    max-width: 96%;
    margin-inline-start: auto;
    margin-inline-end: auto;
    margin-block-start: var(--s-4);
    margin-block-end: var(--s-4);
  }
}

.SectionMarketingPreferencesForm-module--innerwrapper--5079e {
  height: auto;
  padding-block-start: var(--s-1);
  padding-block-end: var(--s-1);
  padding-inline-start: 22px;
  padding-inline-end: 22px;
  max-width: 56.25rem;
}
@media screen and (min-width: 64rem) {
  .SectionMarketingPreferencesForm-module--innerwrapper--5079e {
    margin: var(--s-1);
  }
}

.SectionMarketingPreferencesForm-module--titlewrapper--3e2b4 {
  width: 100%;
  padding-block-start: var(--s-4);
}

.SectionMarketingPreferencesForm-module--title--2785b {
}

.SectionMarketingPreferencesForm-module--introtext--c25be {
  width: 100%;
  box-sizing: border-box;
  padding-block-end: var(--s-2);
}

.SectionMarketingPreferencesForm-module--formbreak--fb31c {
  width: 100%;
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
  margin: var(--s-4) 0;
}

.SectionMarketingPreferencesForm-module--formcontainer--256af {
  background: var(--c-sandy-fur);
  border-radius: var(--s-1);
  margin: var(--s-4) 0;
  padding-block-start: var(--s-4);
  padding-block-end: var(--s-4);
  padding-inline-start: var(--s-3);
  padding-inline-end: var(--s-3);
}

.SectionMarketingPreferencesForm-module--marketingpreferencesform--037dd {
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.SectionMarketingPreferencesForm-module--inputlabel--03bb7 {
  text-transform: uppercase;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-l);
}
.SectionMarketingPreferencesForm-module--inputlabel--03bb7::after {
  content: "*";
  color: var(--c-error);
}

.SectionMarketingPreferencesForm-module--inputlabelnotrequired--20c51 {
  text-transform: uppercase;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-l);
}

.SectionMarketingPreferencesForm-module--inputwrappersingle--d8404 {
  width: 100%;
  max-width: 100%;
}
@media screen and (min-width: 64rem) {
  .SectionMarketingPreferencesForm-module--inputwrappersingle--d8404 {
    width: 49%;
    margin-inline-end: 51%;
  }
}

.SectionMarketingPreferencesForm-module--inputwrapper--61bd0 {
  width: 100%;
  max-width: 100%;
}
@media screen and (min-width: 64rem) {
  .SectionMarketingPreferencesForm-module--inputwrapper--61bd0 {
    width: 49%;
    max-width: 49% !important;
  }
}

.SectionMarketingPreferencesForm-module--inputwrapperfullwidth--fdf22 {
  width: 100%;
  max-width: 100%;
}

.SectionMarketingPreferencesForm-module--input--f7237 {
  width: 100%;
  max-width: 100%;
  border-radius: 6px;
  box-shadow: var(--sh-box-1);
  border: 1px solid var(--c-dawn);
  color: var(--c-dawn);
  margin-block-end: var(--s-2);
  padding-inline-start: 15px;
}
.SectionMarketingPreferencesForm-module--input--f7237::placeholder {
  color: var(--c-dawn);
}

.SectionMarketingPreferencesForm-module--inputselect--b6ff6 {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--sh-box-1);
  border: 1px solid var(--c-dawn);
  color: var(--c-dawn);
  margin-block-end: var(--s-2);
  font-family: var(--font-family);
  /* 48px */
  height: calc(var(--s-1) * 6);
}
.SectionMarketingPreferencesForm-module--inputselect--b6ff6::placeholder {
  color: var(--c-dawn);
}
.SectionMarketingPreferencesForm-module--inputselect--b6ff6 > div {
  min-height: var(--s-6);
}

.SectionMarketingPreferencesForm-module--inputtextarea--2df86 {
  width: 100%;
  padding: 0;
  margin-block-end: var(--s-2);
}
.SectionMarketingPreferencesForm-module--inputtextarea--2df86 textarea {
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--c-dawn);
  color: var(--c-dawn);
}
.SectionMarketingPreferencesForm-module--inputtextarea--2df86 textarea::placeholder {
  color: var(--c-dawn);
}

.SectionMarketingPreferencesForm-module--choiceandinputwrapper--8c846 {
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .SectionMarketingPreferencesForm-module--choiceandinputwrapper--8c846 {
    width: 48%;
  }
}

.SectionMarketingPreferencesForm-module--howtokeepintouch--f9640 {
  width: 100%;
  box-sizing: border-box;
  padding-block-end: var(--s-4);
}

.SectionMarketingPreferencesForm-module--howtokeepintouchtext--06cf1 {
  width: 100%;
  margin: var(--s-4) 0;
}

.SectionMarketingPreferencesForm-module--howtokeepintouchtexttitle--30632 {
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.SectionMarketingPreferencesForm-module--checkinput--a2275 {
  max-width: 100%;
  border-radius: 6px;
  margin-block-end: var(--s-2);
  background-color: var(--c-sandy-fur);
  margin: 0;
  padding-inline-start: 0;
}
.SectionMarketingPreferencesForm-module--checkinput--a2275 input {
  margin-inline-start: 0;
}
.SectionMarketingPreferencesForm-module--checkinput--a2275 label {
  font-weight: 600;
  margin-inline-start: 0;
}

.SectionMarketingPreferencesForm-module--submitbutton--018dd {
  margin-block-start: var(--s-4);
}

.SectionMarketingPreferencesForm-module--sectionbreak--a79f0 {
  width: 95%;
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionHandoverForm-module--outerwrapper--f6285 {
  width: 100%;
  height: auto;
  padding-block-start: var(--s-1);
}
@media screen and (min-width: 37.5rem) {
  .SectionHandoverForm-module--outerwrapper--f6285 {
    padding-block-start: var(--s-2);
    padding-block-end: var(--s-2);
  }
}
@media screen and (min-width: 64rem) {
  .SectionHandoverForm-module--outerwrapper--f6285 {
    max-width: 96%;
    margin-inline-start: auto;
    margin-inline-end: auto;
    margin-block-start: var(--s-4);
    margin-block-end: var(--s-4);
  }
}

.SectionHandoverForm-module--innerwrapper--ceb1d {
  height: auto;
  padding-block-start: var(--s-1);
  padding-block-end: var(--s-1);
  padding-inline-start: 22px;
  padding-inline-end: 22px;
  max-width: 56.25rem;
}
@media screen and (min-width: 64rem) {
  .SectionHandoverForm-module--innerwrapper--ceb1d {
    margin: var(--s-1);
  }
}

.SectionHandoverForm-module--titlewrapper--da495 {
  width: 100%;
  padding-block-start: var(--s-4);
}

.SectionHandoverForm-module--title--56cd1 {
}

.SectionHandoverForm-module--introtext--775ac {
  width: 100%;
  box-sizing: border-box;
}

.SectionHandoverForm-module--formbreak--624a1 {
  width: 100%;
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
  margin: var(--s-4) 0;
}

.SectionHandoverForm-module--formcontainer--1302c {
  background: var(--c-sandy-fur);
  border-radius: var(--s-1);
}

.SectionHandoverForm-module--handoverform--6f923 {
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.SectionHandoverForm-module--inputwrapper--dd63d {
  width: 100%;
  max-width: 100%;
}
@media screen and (min-width: 64rem) {
  .SectionHandoverForm-module--inputwrapper--dd63d {
    max-width: 49%;
  }
}

.SectionHandoverForm-module--textinputwrapper--81b3e {
  width: 100%;
  max-width: 100%;
}

.SectionHandoverForm-module--input--f4e75 {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--sh-box-1);
  border: 1px solid var(--c-dawn);
  color: var(--c-dawn);
  margin-block-end: var(--s-2);
  padding-inline-start: 15px;
}
.SectionHandoverForm-module--input--f4e75::placeholder {
  color: var(--c-dawn);
}

.SectionHandoverForm-module--inputlabel--6c612 {
  text-transform: uppercase;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-l);
}
.SectionHandoverForm-module--inputlabel--6c612::after {
  content: "*";
  color: var(--c-error);
}

.SectionHandoverForm-module--inputlabelnotrequired--19bbc {
  text-transform: uppercase;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-l);
}

.SectionHandoverForm-module--inputtextarea--e4a0e {
  width: 100%;
  padding: 0;
  margin-block-end: var(--s-2);
}
.SectionHandoverForm-module--inputtextarea--e4a0e textarea {
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--c-dawn);
  color: var(--c-dawn);
}
.SectionHandoverForm-module--inputtextarea--e4a0e textarea::placeholder {
  color: var(--c-dawn);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CentreListingCard-module--centrecardcontainer--59d9a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
  width: 100%;
}

.CentreListingCard-module--centrecardimagewrapper--398ba {
  position: relative;
  height: 225px;
  width: 100%;
  border-radius: var(--s-1) var(--s-1) 0 0;
  overflow: hidden;
}

.CentreListingCard-module--centrecardimage--6faf9 {
  position: relative;
  object-fit: cover;
  width: 100%;
  background-position: center center;
}

.CentreListingCard-module--centrelocationcontainer--60e70 {
  position: relative;
  font-family: var(--font-family-heading);
  margin: 0;
  font-size: var(--s-2);
  width: 100%;
  padding: var(--s-1) var(--s-2);
  box-sizing: border-box;
}

.CentreListingCard-module--title--98b0a {
  margin-block-end: var(--s-1);
  /* Prevent overlap with positionally absolute distance element */
  width: calc(100% - var(--s-10));
}

.CentreListingCard-module--centrename--f2368 {
  position: relative;
}
.CentreListingCard-module--centrename--f2368 a {
  width: 100%;
  color: var(--c-midnight);
}

.CentreListingCard-module--centrelocation--7b7bf {
  position: relative;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
}

.CentreListingCard-module--rehomingcentretext--a21a4 {
  position: relative;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
}

.CentreListingCard-module--distance--6010a {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
}

.CentreListingCard-module--cardsectionbreak--d8dc0 {
  width: 95%;
  border-block-end: var(--bb-section-break);
  margin: 0 auto;
  padding: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  margin-block-end: 45px;
}

.CentreListingCard-module--centrecardlinkscontainer--bb72f {
  position: relative;
  display: flex;
  justify-content: flex-start;
  height: 45px;
  width: 100%;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  margin-block-start: var(--s-1);
  color: var(--c-dawn);
}
.CentreListingCard-module--centrecardlinkscontainer--bb72f .CentreListingCard-module--phone--facb7 {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: fit-content;
  min-width: 40%;
  padding-inline-start: var(--s-2);
  padding-inline-end: var(--s-2);
  gap: var(--s-1);
}
.CentreListingCard-module--centrecardlinkscontainer--bb72f .CentreListingCard-module--phone--facb7:hover {
  background-color: transparent;
}
.CentreListingCard-module--centrecardlinkscontainer--bb72f .CentreListingCard-module--phone--facb7 a {
  color: var(--c-dawn);
}
.CentreListingCard-module--centrecardlinkscontainer--bb72f .CentreListingCard-module--maplink--f4546 {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 30%;
}
.CentreListingCard-module--centrecardlinkscontainer--bb72f .CentreListingCard-module--maplink--f4546:hover {
  background-color: transparent;
}
.CentreListingCard-module--centrecardlinkscontainer--bb72f .CentreListingCard-module--maplink--f4546 a {
  color: var(--c-dawn);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.DogSearch-module--dogsearch--f5719 {
  position: relative;
  height: 100%;
  /* 464px */
  min-height: calc(var(--s-1) * 58);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: var(--s-2) var(--s-4);
  box-sizing: border-box;
  overflow: hidden;
  margin-block-end: var(--s-2);
}
.DogSearch-module--dogsearch--f5719.DogSearch-module--leftalign--13181 {
  align-items: center;
  margin-block-end: 0;
}
.DogSearch-module--dogsearch--f5719.DogSearch-module--leftalign--13181 .DogSearch-module--title--9bc16 {
  text-align: left;
}
.DogSearch-module--dogsearch--f5719.DogSearch-module--leftalign--13181 .DogSearch-module--filteroption--6f4f9 {
  padding: 0;
}
.DogSearch-module--dogsearch--f5719.DogSearch-module--leftalign--13181 .DogSearch-module--showdogsbutton--c2cbd {
  max-width: none;
}
.DogSearch-module--dogsearch--f5719.DogSearch-module--leftalign--13181 .DogSearch-module--viewmore--75980 {
  margin-block-start: var(--s-4);
}
@media screen and (min-width: 46.875rem) {
  .DogSearch-module--dogsearch--f5719.DogSearch-module--leftalign--13181 {
    align-items: flex-start;
  }
}

.DogSearch-module--title--9bc16 {
  width: 100%;
  z-index: var(--s-0-5);
  text-align: center;
}

.DogSearch-module--filteroptions--86d95 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  /* 264px */
  min-height: calc(var(--s-1) * 33);
}
@media screen and (min-width: 64rem) {
  .DogSearch-module--filteroptions--86d95 {
    flex-direction: row;
    /* 144px */
    min-height: calc(var(--s-1) * 18);
  }
}

.DogSearch-module--filteroptionsstacked--8967d {
}
@media screen and (min-width: 64rem) {
  .DogSearch-module--filteroptionsstacked--8967d {
    flex-direction: column;
  }
}

.DogSearch-module--filteroption--6f4f9 {
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--s-2);
}
@media screen and (min-width: 64rem) {
  .DogSearch-module--filteroption--6f4f9 {
    width: 50%;
  }
}

.DogSearch-module--filteroptionstacked--e092e {
}
@media screen and (min-width: 64rem) {
  .DogSearch-module--filteroptionstacked--e092e {
    width: 100%;
  }
}

.DogSearch-module--label--fcb07 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  width: 100%;
}
.DogSearch-module--label--fcb07 > span {
  display: inline-block;
  font-family: var(--font-family);
}

form {
  width: 100%;
}

.DogSearch-module--searchinput--2e681 {
  height: var(--s-6);
  width: 100%;
  border: 0;
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  box-sizing: border-box;
  padding-inline-end: var(--s-5);
  padding-block-end: 0;
}

.DogSearch-module--distancecontainer--f45a7 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.DogSearch-module--distancecontrols--9658d {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.DogSearch-module--distancerange--dc38c {
  margin-block-start: var(--s-2);
  width: 55%;
  display: none;
}
@media screen and (min-width: 25.875rem) {
  .DogSearch-module--distancerange--dc38c {
    display: block;
  }
}

input[type=range] {
  -webkit-appearance: none;
  height: 12px;
  border-radius: var(--s-1);
  width: 55%;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
}
input[type=range]:disabled {
  opacity: 0.4;
}

input[type=range]:focus {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0;
  cursor: pointer;
  background-color: var(--c-white);
  border-radius: 1.3px;
}
input[type=range]::-webkit-slider-runnable-track:disabled {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-thumb {
  border: 6px solid var(--c-midnight);
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
  -webkit-appearance: none;
  margin-block-start: -16px;
}
input[type=range]::-webkit-slider-thumb:disabled {
  opacity: 0.4;
}

_::-webkit-full-page-media,
_:future,
:root input[type=range]::-webkit-slider-thumb {
  margin-block-start: calc(var(--s-1) * -1);
}

input[type=range]::-moz-range-thumb {
  border: 6px solid var(--c-midnight);
  height: 11px;
  width: 11px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb:disabled {
  opacity: 0.4;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

.DogSearch-module--distanceselect--1d91e {
  width: 100%;
  height: var(--s-6);
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjYgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbl9kcm9wZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTIuNjQ5NTQyNCwxNi4yODEyMzc0IEMxMi44MTYyMDg1LDE2LjI4MTIzNzQgMTIuOTYyMDQxNywxNi4yMTg3Mzc2IDEzLjA4NzA0MTQsMTYuMDkzNzM3OSBMMTcuMTE4MjgxOCwxMi4wNjI0OTc1IEMxNy4zMDU3ODEzLDExLjg3NDk5NzkgMTcuMzQ3NDQ3NywxMS42NTEwNCAxNy4yNDMyODE1LDExLjM5MDYyNDEgQzE3LjEzOTExNTIsMTEuMTMwMjA4MiAxNi45NTE2MTU3LDExIDE2LjY4MDc4MjgsMTEgTDguNjE4MzAyMDMsMTEgQzguMzQ3NDY5MTgsMTEgOC4xNTk5Njk2MywxMS4xMzAyMDgyIDguMDU1ODAzMzcsMTEuMzkwNjI0MSBDNy45NTE2MzcxMSwxMS42NTEwNCA3Ljk5MzMwMzUyLDExLjg3NDk5NzkgOC4xODA4MDMwNywxMi4wNjI0OTc1IEwxMi4yMTIwNDM1LDE2LjA5MzczNzkgQzEyLjMzNzA0MzIsMTYuMjE4NzM3NiAxMi40ODI4NzYzLDE2LjI4MTIzNzQgMTIuNjQ5NTQyNCwxNi4yODEyMzc0IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJpY29uX2Ryb3Bkb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBzdHJva2U9IiNEREREREQiIGN4PSIxMyIgY3k9IjEzIiByPSIxMiI+PC9jaXJjbGU+CiAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8dXNlIGlkPSJjYXJldC1kb3duIiBmaWxsPSIjMjIyMjIyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgPC9nPgo8L3N2Zz4=) no-repeat center right;
  background-color: var(--c-white);
  padding-inline-end: var(--s-1);
  background-origin: content-box;
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  padding-inline-start: var(--s-2);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: radio-container;
  opacity: 1;
  color: var(--c-midnight);
}
.DogSearch-module--distanceselect--1d91e:disabled {
  opacity: 0.4;
}
@media screen and (min-width: 25.875rem) {
  .DogSearch-module--distanceselect--1d91e {
    width: 40%;
  }
}

.DogSearch-module--breedorlocationselector--67d1b {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-shadow: var(--sh-box-card);
  padding-inline-end: var(--s-2);
  padding-inline-start: var(--s-2);
  margin: 0 auto;
  align-self: center;
  white-space: nowrap;
  font-family: var(--font-family);
}
.DogSearch-module--breedorlocationselector--67d1b:hover {
  cursor: pointer;
}
.DogSearch-module--breedorlocationselector--67d1b {
  border-radius: var(--s-1);
  border: 0;
  height: var(--s-6);
  background-color: var(--c-white);
  width: 100%;
  color: var(--c-midnight);
}

.DogSearch-module--breedtext--60769 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  font-weight: 500;
}

.DogSearch-module--breedselectedcount--33ec3 {
  background-color: var(--c-midnight);
  color: var(--c-white);
  height: var(--s-3);
  width: var(--s-3);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  margin-inline-start: var(--s-1);
}

.DogSearch-module--addbreedsicon--779f6 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.DogSearch-module--showdogsbutton--c2cbd {
  z-index: 1;
  /* 360px */
  max-width: calc(var(--s-1) * 45);
  margin: 0 auto;
}

.DogSearch-module--viewmore--75980 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.DogSearch-module--viewmore--75980:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.DogSearch-module--viewmore--75980:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.DogSearch-module--viewmore--75980:visited {
  text-decoration-style: solid;
}
.DogSearch-module--viewmore--75980 {
  color: var(--c-midnight);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  letter-spacing: 0;
  line-height: var(--lh-body-l);
  cursor: pointer;
  -webkit-text-decoration: dotted underline !important;
          text-decoration: dotted underline !important;
  text-decoration-color: var(--c-midnight);
  text-underline-position: under;
  text-underline-offset: 4px;
}

.DogSearch-module--loadingoverlay--cd77e {
  pointer-events: none;
  height: 70%;
  width: 90%;
  position: absolute;
  z-index: 3;
}
.DogSearch-module--loadingoverlay--cd77e .DogSearch-module--loadingbackground--e6812 {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--c-sandy-fur);
  opacity: 0.7;
  z-index: 1;
}
.DogSearch-module--loadingoverlay--cd77e .DogSearch-module--loadingicon--9683e {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: var(--z-app-shell);
}
.visuallyHidden-module--visuallyHidden--0fa26 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
/**
 * Swiper 12.0.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 21, 2025
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */

/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.LoadingIndicator-module--loadingindicator--01267 {
  width: var(--s-9);
  height: var(--s-9);
  background: url(/static/dt-loader-131892aa3c3d9a564aa8804df911dbd0.png) no-repeat;
  cursor: pointer;
  animation: LoadingIndicator-module--loading--0074f 4s steps(55, end);
  background-position: 0 0;
  animation-iteration-count: infinite;
}

@keyframes LoadingIndicator-module--loading--0074f {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -3960 0;
  }
}
.LoadingIndicator-module--loadingPage--9b2db {
  width: 100%;
  height: 100%;
  /* 504px */
  min-height: calc(var(--s-1) * 63);
  display: flex;
  justify-content: center;
  align-items: center;
}

.LoadingIndicator-module--visuallyHidden--15022 {
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroWithStepIcons-module--stepcontainer--77544 {
  display: flex;
  padding: var(--s-6) 0;
}

.IntroWithStepIcons-module--stepitem--ddff8 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 85px;
  margin-inline-end: 15px;
  font-size: var(--t-body-s);
}
@media (min-width: 37.5rem) {
  .IntroWithStepIcons-module--stepitem--ddff8 {
    margin-inline-end: 25px;
  }
}
.IntroWithStepIcons-module--stepitem--ddff8::after {
  content: "";
  display: block;
  height: 3px;
  width: var(--s-4);
  background-color: var(--c-midnight);
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-end: calc(var(--s-4) * -0.95);
}
.IntroWithStepIcons-module--stepitem--ddff8:last-child {
  margin-right: 0;
}
.IntroWithStepIcons-module--stepitem--ddff8:last-child::after {
  display: none;
}
.IntroWithStepIcons-module--stepitem--ddff8 .IntroWithStepIcons-module--active--71e5c {
  font-weight: 600;
}
.IntroWithStepIcons-module--stepitem--ddff8 .IntroWithStepIcons-module--inactive--68a06 {
  font-weight: 300;
}

.IntroWithStepIcons-module--heading--192aa {
  padding-inline-start: var(--s-5);
  text-indent: calc(var(--s-5) * -1);
}

.IntroWithStepIcons-module--fuzzybordersection--b750a {
  background-color: var(--c-sunshine-yellow);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}

.IntroWithStepIcons-module--fuzzyborder--d6ee0 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-self: flex-end;
  margin-block-end: -2px;
}

.IntroWithStepIcons-module--herowithimagecontainerouter--a40d8 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  z-index: var(--z-app-shell);
  overflow: hidden;
}

.IntroWithStepIcons-module--herowithimagecontainer--12021 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
}

.IntroWithStepIcons-module--bordersection--10409 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: auto;
}

.IntroWithStepIcons-module--border--f1602 {
  position: relative;
  min-width: 100%;
  z-index: var(--z-app-shell);
  /* Not sure this is used? */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.IntroWithStepIcons-module--mobile--5a66a {
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .IntroWithStepIcons-module--mobile--5a66a {
    display: none;
  }
}
.IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--herowithimagecontainer--12021 {
  /* 248px */
  min-height: calc(var(--s-1) * 31);
}
@media screen and (min-width: 37.5rem) {
  .IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--herowithimagecontainer--12021 {
    /* 320px */
    min-height: calc(var(--s-1) * 40);
  }
}
.IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--herowithimagecontainer--12021 img {
  width: 100%;
  height: auto;
}
.IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--bordersection--10409 {
  width: 100%;
  inset-block-end: -2px;
}
.IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--introcontent--dc10d {
  display: flex;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  padding-block-end: var(--s-4);
}
@media screen and (min-width: 25.875rem) {
  .IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--introcontent--dc10d {
    width: 90%;
    padding-inline-start: var(--s-4);
    padding-inline-end: var(--s-4);
  }
}
@media screen and (min-width: 46.875rem) {
  .IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--introcontent--dc10d {
    gap: 15px;
  }
}
.IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--textcontainer--d2fba {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media screen and (min-width: 25.875rem) {
  .IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--textcontainer--d2fba {
    align-items: start;
  }
}
@media screen and (min-width: 46.875rem) {
  .IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--textcontainer--d2fba {
    width: auto;
  }
}
.IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--heading--192aa {
  width: 85%;
}
@media screen and (min-width: 25.875rem) {
  .IntroWithStepIcons-module--mobile--5a66a .IntroWithStepIcons-module--heading--192aa {
    width: 100%;
  }
}

.IntroWithStepIcons-module--desktop--7cf2b {
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .IntroWithStepIcons-module--desktop--7cf2b {
    display: none;
  }
}
.IntroWithStepIcons-module--desktop--7cf2b .IntroWithStepIcons-module--herowithimagecontainerinner--fbc7c {
  display: flex;
  width: 100%;
  max-width: 90rem;
  margin-block-end: var(--s-4);
  gap: var(--s-2);
}
@media screen and (min-width: 56rem) {
  .IntroWithStepIcons-module--desktop--7cf2b .IntroWithStepIcons-module--herowithimagecontainerinner--fbc7c {
    gap: var(--s-8);
  }
}
.IntroWithStepIcons-module--desktop--7cf2b .IntroWithStepIcons-module--herowithimagecontainer--12021 {
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  height: 417px;
}
.IntroWithStepIcons-module--desktop--7cf2b .IntroWithStepIcons-module--herowithimagecontainer--12021 img {
  height: 417px;
  width: calc(var(--s-1) * 75);
  /* 600px */
}
.IntroWithStepIcons-module--desktop--7cf2b .IntroWithStepIcons-module--bordersection--10409 {
  width: calc(var(--s-1) * 75);
  /* 600px */
  inset-block-end: -1px;
}
.IntroWithStepIcons-module--desktop--7cf2b .IntroWithStepIcons-module--introcontent--dc10d {
  width: 90%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  margin-inline-end: var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.IntroWithStepIcons-module--desktop--7cf2b .IntroWithStepIcons-module--textcontainer--d2fba {
  width: 100%;
}
.IntroWithStepIcons-module--desktop--7cf2b .IntroWithStepIcons-module--textcontainer--d2fba h1 {
  margin-block-start: var(--s-4);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.BreedFilters-module--breedfilterscontainer--a766f {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  max-height: calc(100% - var(--s-8));
  -webkit-font-smoothing: antialiased;
}

.BreedFilters-module--searchcontainer--b3206 {
  position: relative;
  background-color: var(--c-sandy-fur-40);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media screen and (min-width: 37.5rem) {
  .BreedFilters-module--searchcontainer--b3206 {
    /* 128px */
    min-height: calc(var(--s-1) * 16);
  }
}

.BreedFilters-module--formwrapper--bab68 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: var(--s-2) 0;
  box-sizing: border-box;
}
.BreedFilters-module--formwrapper--bab68 .BreedFilters-module--title--fb9a8 {
  display: none;
}
@media screen and (min-width: 37.5rem) {
  .BreedFilters-module--formwrapper--bab68 .BreedFilters-module--title--fb9a8 {
    display: block;
    text-align: left;
    width: 90%;
    /* 400px */
    max-width: calc(var(--s-1) * 50);
    height: var(--s-4);
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--t-body-l);
    line-height: var(--lh-body-l);
  }
}
.BreedFilters-module--formwrapper--bab68 .BreedFilters-module--searchinput--2e607 {
  height: 44px;
  border-radius: var(--s-1);
  border: 1px solid #ddd;
  box-shadow: var(--sh-box-1);
  margin: 0;
  width: 90%;
  /* 280px */
  max-width: calc(var(--s-1) * 35);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
}
@media screen and (min-width: 37.5rem) {
  .BreedFilters-module--formwrapper--bab68 .BreedFilters-module--searchinput--2e607 {
    /* 320px */
    max-width: calc(var(--s-1) * 40);
  }
}
@media screen and (min-width: 64rem) {
  .BreedFilters-module--formwrapper--bab68 .BreedFilters-module--searchinput--2e607 {
    /* 360px */
    max-width: calc(var(--s-1) * 45);
    /* 360px */
    width: calc(var(--s-1) * 45);
  }
}

@keyframes BreedFilters-module--flash--9f9ec {
  0% {
    background-color: var(--c-oatmeal);
    transform: scale(1);
    font-weight: 500;
  }
  50% {
    background-color: var(--c-sandy-fur);
  }
  100% {
    background-color: var(--c-oatmeal);
    transform: scale(1);
    font-weight: 500;
  }
}
@keyframes BreedFilters-module--pulse--83a29 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes BreedFilters-module--slideIn--27679 {
  0% {
    transform: translateY(50);
  }
  100% {
    transform: translateY(0);
  }
}
.BreedFilters-module--listscontainer--d7ca8 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  max-height: calc(100% - var(--s-10) - var(--s-9));
  overflow: hidden;
  padding-block-start: 38px;
  box-sizing: border-box;
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--titlewrapper--5e52f {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-block-end: 1px solid var(--c-mist);
  box-sizing: border-box;
  cursor: pointer;
  background-color: var(--c-oatmeal);
  margin-block-start: -38px;
  height: 38px;
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--titlewrapper--5e52f .BreedFilters-module--icon--b4c3d {
  margin-block-end: var(--s-1);
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--titlewrapper--5e52f .BreedFilters-module--listtitle--be4a9 {
  background-color: var(--c-oatmeal);
  inset-block-start: 0;
  width: auto;
  padding-inline-end: var(--s-1);
  height: var(--s-4);
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-inline-start: 10%;
  padding-block-end: var(--s-1);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  font-family: var(--font-family);
  font-weight: 500;
  text-transform: uppercase;
}
@media (min-width: 64rem) {
  .BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--titlewrapper--5e52f .BreedFilters-module--listtitle--be4a9 {
    font-size: var(--t-body-s);
    line-height: var(--lh-body-xxs);
  }
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--titlewrapper--5e52f .BreedFilters-module--listtitle--be4a9 .BreedFilters-module--count--a277c {
  animation: BreedFilters-module--flash--9f9ec 0.6s forwards;
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperbase--59dbf, .BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperinitial--3ff07, .BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperflash--f12ac {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-block-end: 1px solid var(--c-mist);
  box-sizing: border-box;
  cursor: pointer;
  background-color: var(--c-oatmeal);
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperbase--59dbf .BreedFilters-module--icon--b4c3d, .BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperinitial--3ff07 .BreedFilters-module--icon--b4c3d, .BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperflash--f12ac .BreedFilters-module--icon--b4c3d {
  display: flex;
  justify-content: flex-end;
  margin-inline-start: auto;
  margin-inline-end: 11%;
  margin-block-end: var(--s-1);
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperbase--59dbf .BreedFilters-module--listtitle--be4a9, .BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperinitial--3ff07 .BreedFilters-module--listtitle--be4a9, .BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperflash--f12ac .BreedFilters-module--listtitle--be4a9 {
  position: static;
  padding-inline-end: var(--s-1);
  text-align: left;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-inline-start: 10%;
  width: 75%;
  margin: 0;
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperbase--59dbf .BreedFilters-module--listtitle--be4a9 .BreedFilters-module--count--a277c, .BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperinitial--3ff07 .BreedFilters-module--listtitle--be4a9 .BreedFilters-module--count--a277c, .BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperflash--f12ac .BreedFilters-module--listtitle--be4a9 .BreedFilters-module--count--a277c {
  animation: BreedFilters-module--pulse--83a29 0.6s forwards;
  animation-delay: 0.4s;
  height: auto;
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperflash--f12ac {
  animation: BreedFilters-module--flash--9f9ec ease-in;
  animation-duration: 0.6s;
  animation-delay: 0.3s;
  width: 100%;
}
@media (min-width: 64rem) {
  .BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperflash--f12ac .BreedFilters-module--listtitle--be4a9 {
    font-size: var(--t-body-l);
    line-height: var(--lh-body-l);
    font-weight: 500;
  }
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrapperinitial--3ff07 {
  animation: BreedFilters-module--slideIn--27679 ease-in;
  animation-duration: 0.6s;
  animation-delay: 0s;
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--selectedtitlewrappernone--b4455 {
  display: none;
}
.BreedFilters-module--listscontainer--d7ca8 .BreedFilters-module--listwrapper--c8b5e {
  position: relative;
  overflow-y: scroll;
}

.BreedFilters-module--controls--5f3ba {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  /* 104px */
  height: calc(var(--s-1) * 13);
}

.BreedFilters-module--backcontainer--f21fd {
  width: 32%;
}
@media screen and (min-width: 25.875rem) {
  .BreedFilters-module--backcontainer--f21fd {
    width: 23%;
  }
}
@media screen and (min-width: 37.5rem) {
  .BreedFilters-module--backcontainer--f21fd {
    width: 16%;
  }
}

.BreedFilters-module--confirmcontainer--b3c19 {
  width: 49%;
}
@media screen and (min-width: 25.875rem) {
  .BreedFilters-module--confirmcontainer--b3c19 {
    width: 59%;
  }
}
@media screen and (min-width: 37.5rem) {
  .BreedFilters-module--confirmcontainer--b3c19 {
    width: 70%;
  }
}

.BreedFilters-module--btniconcontainer--47db6 {
  margin-block-start: -3px;
}
.ReactModal__Content {
	transform: translateX(740px);
	transition: transform 300ms ease-in;
}

.ReactModal__Content--after-open {
	transform: translateX(0);
}

.ReactModal__Content--before-close {
	transform: translateX(740px);
}

/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-coverflow {
}

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}
.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}

.utils-module--visuallyHidden--a9569 {
  appearance: none !important;
  clip-path: circle(0) !important;
  position: absolute !important;
  overflow: hidden !important;
  line-height: 0 !important;
  text-indent: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.utils-module--noListStyle--27f15 {
  list-style-type: none;
}

.utils-module--noPointer--ab098 {
  pointer-events: none;
}

.formElements-module--label--dbd68 {
  margin-bottom: 0;
  line-height: var(--lh-body-s);
}

.formElements-module--hiddenLabel--03c7d {
}

.formElements-module--input--ff50b {
  display: block;
  width: 100%;
  align-self: stretch;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-s);
  border-width: var(--s-border-width);
  border-radius: var(--s-border-radius-xs);
  border-color: var(--c-input-border);
  border-style: solid;
  background-color: var(--c-input-bg);
  padding: calc(var(--s-1) - var(--s-border-width)) var(--s-2);
}

.formElements-module--input--ff50b::placeholder {
  color: var(--c-input-placeholder);
}

.formElements-module--input--ff50b:focus:enabled {
  background-color: var(--c-input-bg-focus);
}

.formElements-module--input--ff50b:focus-visible:enabled {
  border-color: var(--c-input-border-focus);
  background-color: var(--c-input-bg-focus);
}

.formElements-module--input--ff50b:active {
  border-color: var(--c-input-border-active);
  background-color: var(--c-input-bg-active);
}

.formElements-module--disabled--0f4f5,
.formElements-module--disabled--0f4f5 > *,
.formElements-module--input--ff50b:disabled {
  /* can't compose in pseudo elements, so duplicating the style here */
  color: var(--c-input-disabled);
  border-color: var(--c-input-border-disabled);
  background-color: var(--c-input-bg-disabled);
  cursor: not-allowed;
}

.formElements-module--textArea--73abb {
  min-height: 11ch;
}

.formElements-module--error--5f6b1 {
  color: var(--c-input-invalid);
  border-color: var(--c-input-border-invalid);
}

.formElements-module--helpTextBase--faabe {
  font-size: var(--t-body-s);
  line-height: var(--lh-body-s);
  margin: 0;
}

.formElements-module--helpText--60727 {
  color: var(--c-input-helper-text);
}
.formElements-module--errorMessage--960d6 {
  color: var(--c-negative);
}

.formElements-module--characterCount--2411f {
  font-size: var(--t-body-xs);
  color: var(--c-input-helper-text);
  align-self: flex-end;
}

.AerInputStructure-module--component--9caba {
  /* this icon is not the normal icon size */
  --s-cmp-input-icon: 1.1rem;
  position: relative;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
}

.AerInputStructure-module--label--e28c1 {
}

.AerInputStructure-module--hiddenLabel--e00d4 {
}

.AerInputStructure-module--helpTextBase--ba943 {
}

.AerInputStructure-module--helpText--32b5d {
}

.AerInputStructure-module--errorText--caca3 {
}

.AerInputStructure-module--characterCount--1ee87 {
}

.AerInputStructure-module--input--56b52 {
}
.AerInputStructure-module--input--56b52:is(textarea) {
  padding-right: calc(var(--s-2) - 2px + var(--s-1) + var(--s-cmp-input-icon));
}
.AerInputStructure-module--input--56b52:invalid {
  /* make space for the error icon, this needs a little extra specificity */
  padding-right: calc(var(--s-2) - 2px + var(--s-1) + var(--s-cmp-input-icon));
}

.AerInputStructure-module--disabled--653de {
}

.AerInputStructure-module--wrapperError--8b28d {
}

.AerInputStructure-module--error--4027f {
}

.AerInputStructure-module--inputWrap--a7e5a {
  position: relative;
  display: inline-block;
  width: 100%;
}

.AerInputStructure-module--errorIcon--4c013 {
  position: absolute;
  right: 2px;
  top: 50%;
  translate: 0 -50%;
  height: var(--s-cmp-input-icon);
  width: calc(var(--s-2) - 2px + var(--s-1) + var(--s-cmp-input-icon));
  pointer-events: none;
}
.AerInputStructure-module--errorIcon--4c013 > svg {
  position: absolute;
  width: var(--s-cmp-input-icon);
  height: var(--s-cmp-input-icon);
  color: var(--c-negative);
  right: var(--s-2);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
body {
  --s-cmp-checkbox: 0;
  --s-cmp-radiogroup-gap: 0;
  --c-cmp-radio-icon: var(--c-black);
  /* 48px */
  --s-cmp-dropmenu-item-height: calc(var(--s-1) * 6);
  --s-cmp-dropmenu-item-border-radius: 0;
  --c-cmp-dropmenu-item: var(--c-midnight);
  --c-cmp-dropmenu-item-highlight: var(--c-midnight);
  --c-cmp-dropmenu-item-highlight-bg: var(--c-brand-primary);
  --s-cmp-dropmenu-border-radius: var(--s-border-radius-s);
  --s-cmp-padding: 0;
  --sh-box-l: none;
  --s-cmp-tooltip-padding: var(--s-1) 0;
}

.FormBuilder-module--form--1fb43 div[role=alert] {
  font-weight: var(--fw-bold);
  color: var(--c-negative);
  margin-block-start: var(--s-1);
}

.FormBuilder-module--errorMessage--021e1 {
  font-weight: var(--fw-bold);
  color: var(--c-negative);
  text-transform: uppercase;
  margin-block-end: var(--s-2);
}

.FormBuilder-module--fieldSpacing--f4be9 {
  padding: var(--s-2) var(--s-1);
}

.FormBuilder-module--labelWrapper--5d195 {
  display: flex;
  justify-content: space-between;
}

.FormBuilder-module--required--00649 {
  color: var(--c-negative);
}

.FormBuilder-module--backbutton--68a18 {
  /* 120px */
  max-width: calc(var(--s-1) * 15);
  margin: 0 var(--s-1);
}

.FormBuilder-module--nextbutton--21dbc {
  max-width: 375px;
  margin: 0 var(--s-1);
}

.FormBuilder-module--buttonwrapper--cc968 {
  display: flex;
  justify-content: space-evenly;
  padding-block-start: var(--s-4);
  margin: 0 var(--s-1);
  border-block-start: 2px solid var(--c-black);
}

.FormBuilder-module--submissionblockedwarningmodal--0bea7 {
  align-items: center;
  margin-block-end: var(--s-2);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /* 200px */
  min-height: calc(var(--s-1) * 25);
  text-align: center;
}

.FormBuilder-module--modaltitle--e44af {
  margin-block-end: var(--s-2);
}

.FormBuilder-module--submissionblockedwarningmodalcta--2f25d {
  width: 100%;
  display: flex;
  justify-content: center;
}

.FormBuilder-module--conditionalbackground--ae627 {
  padding-inline-start: 12px;
  position: relative;
  margin-inline-start: var(--s-1);
}
.FormBuilder-module--conditionalbackground--ae627::before {
  content: "";
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-start: 0;
  inset-block-end: var(--s-2);
  width: 2px;
  background-color: var(--c-oatmeal);
}

.FormBuilder-module--conditionalbackground--ae627 + .FormBuilder-module--conditionalbackground--ae627::before {
  top: -16px;
}

.FormBuilder-module--whitebg--38806 {
  background-color: var(--c-white);
  margin-inline-start: -100%;
  margin-inline-end: -100%;
  padding-inline-start: 100%;
  padding-inline-end: 100%;
  padding-block-start: var(--s-4);
  margin-block-start: var(--s-2);
}
.FormBuilder-module--whitebg--38806:first-child {
  padding-block-start: var(--s-2);
  margin-block-start: 0;
}

.FormBuilder-module--beigebg--28e6e {
  padding-block-start: var(--s-4);
}
.FormBuilder-module--beigebg--28e6e:first-child {
  padding-block-start: var(--s-2);
}

.FormBuilder-module--whitebg--38806 + .FormBuilder-module--whitebg--38806,
.FormBuilder-module--beigebg--28e6e + .FormBuilder-module--beigebg--28e6e {
  padding-block-start: var(--s-2);
  margin-block-start: 0;
}
.TextInput-module--textInput--8ced5 {
  border-radius: 6px;
}

.TextInput-module--textInput--8ced5::placeholder {
  color: var(--c-input-placeholder);
}
.AddressManager-module--addresspickermodal--e2d5c {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  /* 448px */
  max-width: calc(var(--s-1) * 56);
  height: 100%;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
  border-radius: var(--s-0-5);
  background-color: var(--c-sandy-fur);
  padding: var(--s-4);
}

.AddressManager-module--loadingindicator--bbccd {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.AddressManager-module--addresslookup--9f043 {
  width: 100%;
  height: 100%;
}
.AddressManager-module--addresslookup--9f043 label {
  margin-block-end: var(--s-2) !important;
}

.AddressManager-module--addresslookupfield--4224a > label {
  margin-block-end: var(--s-2) !important;
}

.AddressManager-module--addresslookupbuttonwrapper--aef48 {
  position: relative;
  margin-block-start: var(--s-2);
}

.AddressManager-module--addresspickerlist--ac7ed {
  width: 100%;
  height: 90%;
  margin-block-start: var(--s-2);
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  list-style: none;
  border-radius: var(--s-0-5);
  border: 1px solid var(--c-black);
  background-color: var(--c-sandy-fur);
}

.AddressManager-module--addresspickeritem--7294f {
  width: 100%;
  height: 32px;
  border-block-end: 1px solid var(--c-mist);
  background-color: var(--c-white) !important;
  padding: var(--s-0-5) var(--s-1);
  box-sizing: border-box;
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--c-black);
}
.AddressManager-module--addresspickeritem--7294f:hover {
  background-color: var(--c-sunshine-yellow) !important;
  box-shadow: var(--sh-box-card);
}
.AddressManager-module--addresspickeritem--7294f:focus {
  background-color: var(--c-sunshine-yellow) !important;
  box-shadow: var(--sh-box-card);
}

.AddressManager-module--closebutton--1236f {
  border: none;
  background: none;
  padding: 0;
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
}
/** Local theme
 * content: background-color: var(--c-cmp-dropmenu-bg, var(--c-white));
 * content: border-radius: var(--s-cmp-dropmenu-border-radius, var(--s-border-radius-xs));
 * content: padding: var(--s-cmp-padding, calc(var(--s-1) * 0.5));
 * content: box-shadow: var(--sh-box-l);
 * content: animation-duration: var(--ease-cmp-duration, 400ms);
 *
 * menuitem: font-size: var(--t-cmp-item, var(--t-body-s));
 * menuitem: color: var(--c-cmp-dropmenu-item, var(--c-body));
 * menuitem: border-radius: var(--s-cmp-dropmenu-item-border-radius, var(--s-border-radius-xs));
 * menuitem: padding: var(--s-cmp-item-padding, 0 calc(var(--s-1) * 0.5) 0 var(--s-3));
 * menuitem: var(--s-cmp-dropmenu-item-height, var(--s-3));
 * menuitem: color: var(--c-cmp-dropmenu-item-highlight, var(--c-white));
 * menuitem: background-color: var(--c-cmp-dropmenu-item-highlight-bg, var(--c-gray-600));
 *
 * submenuparent: [data-state="open"]: background-color: var(--c-cmp-dropmenu-item-open-bg, var(--c-gray-200));
 * submenuparent: [data-state="open"]: color: var(--c-cmp-dropmenu-item-open, var(--c-gray-800));
 *
 * heading: padding: var(--s-cmp-item-heading-padding, 0 0 0 var(--s-3));
 * heading:font-size: var(--t-cmp-item-heading, var(--t-heading-xxs));
 * heading:line-height: var(--lh-cmp-item-heading-padding, (--s-3));
 * heading: color: var(--c-cmp-item-heading, var(--c-gray-600));
 *
 * iconbutton: height: var(--s-5);
 * iconbutton: width: var(--s-5);
 * iconbutton: color: var(--c-cmp-menubutton, var(--c-body));
 * iconbutton: background-color: var(--c-cmp-menubutton-bg, transparent);
 * iconbutton: box-shadow: var(--sh-cmp-menubutton, var(--sh-box-xs));
 * iconbutton:hover: background-color: var(--c-cmp-menubutton-hover-bg, var(--c-gray-200));
 * iconbutton: focus: box-shadow: 0 0 0 2px var(--c-focus);
 */
.AerDropdownMenu-module--menuContent--f9f36 {
  min-width: 220px;
  background-color: var(--c-cmp-dropmenu-bg, var(--c-white));
  border-radius: var(--s-cmp-dropmenu-border-radius, var(--s-border-radius-xs));
  padding: var(--s-cmp-padding, calc(var(--s-1) * 0.5));
  box-shadow: var(--sh-box-l);
  animation-duration: var(--ease-cmp-duration, 400ms);
  animation-timing-function: var(--ease-1);
  will-change: transform, opacity;
  z-index: var(--z-dropdown);
}
.AerDropdownMenu-module--menuContent--f9f36[data-side=top] {
  animation-name: AerDropdownMenu-module--slideDownAndFade--dc20f;
}
.AerDropdownMenu-module--menuContent--f9f36[data-side=right] {
  animation-name: AerDropdownMenu-module--slideLeftAndFade--4745b;
}
.AerDropdownMenu-module--menuContent--f9f36[data-side=bottom] {
  animation-name: AerDropdownMenu-module--slideUpAndFade--5dce6;
}
.AerDropdownMenu-module--menuContent--f9f36[data-side=left] {
  animation-name: AerDropdownMenu-module--slideRightAndFade--9cef7;
}

.AerDropdownMenu-module--subContent--1c657 {
}

.AerDropdownMenu-module--subTrigger--bff87[data-state=open] {
  background-color: var(--c-cmp-dropmenu-item-open-bg, var(--c-gray-200));
  color: var(--c-cmp-dropmenu-item-open, var(--c-gray-800));
}

.AerDropdownMenu-module--menuItem--f08b4 {
  font-size: var(--t-cmp-dropmenu-item, var(--t-body-s));
  line-height: 1;
  color: var(--c-cmp-dropmenu-item, var(--c-body));
  border-radius: var(--s-cmp-dropmenu-item-border-radius, var(--s-border-radius-xs));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1);
  height: var(--s-cmp-dropmenu-item-height, var(--s-3));
  padding: var(--s-cmp-item-padding, 0 calc(var(--s-1) * 0.5) 0 var(--s-3));
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  outline: none;
}
.AerDropdownMenu-module--menuItem--f08b4[data-disabled] {
  color: var(--c-input-border-disabled);
  pointer-events: none;
}
.AerDropdownMenu-module--menuItem--f08b4[data-highlighted] {
  background-color: var(--c-cmp-dropmenu-item-highlight-bg, var(--c-gray-600));
  color: var(--c-cmp-dropmenu-item-highlight, var(--c-white));
}

.AerDropdownMenu-module--menuCheckboxItem--20f73,
.AerDropdownMenu-module--menuRadioItem--eaf8f,
.AerDropdownMenu-module--subTrigger--bff87 {
}

.AerDropdownMenu-module--menuLabel--dc2eb {
  padding: var(--s-cmp-item-heading-padding, 0 0 0 var(--s-3));
  font-size: var(--t-cmp-item-heading, var(--t-heading-xxs));
  line-height: var(--lh-cmp-item-heading-padding, --s-3);
  color: var(--c-cmp-item-heading, var(--c-gray-600));
}

.AerDropdownMenu-module--separator--6049c {
  height: 1px;
  background-color: var(--c-separator);
  margin: calc(var(--s-1) * 0.5);
}

.AerDropdownMenu-module--menuItemIndicator--142e2 {
  position: absolute;
  left: 0;
  width: var(--s-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.AerDropdownMenu-module--menuArrow--d25ed {
  fill: var(--c-cmp-dropmenu-bg, var(--c-white));
}

.AerDropdownMenu-module--iconButton--beeab {
  all: unset;
  font-family: inherit;
  border-radius: 100%;
  height: var(--s-5);
  width: var(--s-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cmp-menubutton, var(--c-body));
  background-color: var(--c-cmp-menubutton-bg, transparent);
  box-shadow: var(--sh-cmp-menubutton, var(--sh-box-xs));
}
.AerDropdownMenu-module--iconButton--beeab:hover {
  background-color: var(--c-cmp-menubutton-hover-bg, var(--c-gray-200));
}
.AerDropdownMenu-module--iconButton--beeab:focus {
  box-shadow: 0 0 0 2px var(--c-focus);
}

@keyframes AerDropdownMenu-module--slideUpAndFade--5dce6 {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes AerDropdownMenu-module--slideRightAndFade--9cef7 {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes AerDropdownMenu-module--slideDownAndFade--dc20f {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes AerDropdownMenu-module--slideLeftAndFade--4745b {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MultiSelect-module--selectWrapper--398b9 {
  position: relative;
  width: 100%;
}

.MultiSelect-module--selectInput--374be {
  width: 100%;
  border: 1px solid var(--c-input-border-disabled);
  border-radius: var(--s-border-radius-s);
  background: var(--c-input-bg);
  padding: var(--s-1) var(--s-2);
  padding-inline-end: var(--s-5);
}

.MultiSelect-module--icon--4a334 {
  position: absolute;
  inset-inline-end: var(--s-2);
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.MultiSelect-module--dropdown--7a84e {
  position: relative;
  border: 1px solid var(--c-midnight);
  /* 304px */
  max-height: calc(var(--s-1) * 38);
  inset-inline-start: 0;
  overflow-y: scroll;
  width: 100vw;
  max-width: calc(100% - var(--s-6));
  margin: auto;
}
@media (min-width: 37.5rem) {
  .MultiSelect-module--dropdown--7a84e {
    max-width: calc(100% - var(--s-8));
  }
}
@media (min-width: 768px) {
  .MultiSelect-module--dropdown--7a84e {
    max-width: calc(46.875rem - var(--s-4));
  }
}

.MultiSelect-module--selectButton--a789e {
  width: 100%;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--c-input-border-disabled);
  border-radius: var(--s-border-radius-s);
  background: var(--c-input-bg);
  text-align: left;
}
.MultiSelect-module--selectButton--a789e .MultiSelect-module--buttonContent--41a71 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.MultiSelect-module--checkboxMenuItem--017b9 {
  cursor: pointer;
}
.MultiSelect-module--checkboxMenuItem--017b9[data-state=checked] {
  color: var(--c-cmp-dropmenu-item-highlight);
  background: var(--c-cmp-dropmenu-item-highlight-bg);
}
.MultiSelect-module--checkboxMenuItem--017b9[data-state=unchecked] {
  --c-cmp-dropmenu-item-highlight-bg: var(--c-white);
  background: var(--c-cmp-dropmenu-item-highlight-bg);
}

.MultiSelect-module--filters--0b994 {
  margin-block-end: var(--s-2);
  display: flex;
  gap: var(--s-1);
  align-items: center;
}
.MultiSelect-module--filters--0b994.MultiSelect-module--wrap--6e633 {
  flex-flow: wrap;
}
.MultiSelect-module--filters--0b994.MultiSelect-module--scroll--75136 {
  overflow-x: auto;
}

.MultiSelect-module--filterViewToggle--41b79 {
  width: 2em;
  height: 2em;
  border: none;
  border-radius: 50%;
  background: white;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  color: var(--c-black);
}

.MultiSelect-module--filter--5b28e {
  padding: var(--s-0-5) var(--s-2);
  border: none;
  border-radius: var(--s-4);
  background: black;
  color: white;
}
.MultiSelect-module--filter--5b28e .MultiSelect-module--filterText--57f94 {
  white-space: nowrap;
}
.MultiSelect-module--filter--5b28e .MultiSelect-module--hiddenCloseMarker--bc69b {
  margin-inline-start: 0.5em;
  color: var(--c-sunshine-yellow);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SingleSelect-module--selectButton--4a424 {
  width: 100%;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--c-input-border-disabled);
  border-radius: var(--s-border-radius-s);
  display: flex;
  justify-content: space-between;
  background: var(--c-input-bg);
}

.SingleSelect-module--dropdown--83fc0 {
  position: relative;
  border: 1px solid var(--c-midnight);
  /* 304px */
  max-height: calc(var(--s-1) * 38);
  inset-inline-start: 0;
  overflow-y: scroll;
  width: 100vw;
  margin: auto;
}
@media (min-width: 37.5rem) {
  .SingleSelect-module--dropdown--83fc0 {
    max-width: calc(100% - var(--s-8));
  }
}
@media (min-width: 768px) {
  .SingleSelect-module--dropdown--83fc0 {
    max-width: calc(46.875rem - var(--s-4));
  }
}

.SingleSelect-module--menuItem--a01d1 {
  border-block-start: 1px solid var(--c-midnight);
  cursor: pointer;
}
.SingleSelect-module--menuItem--a01d1:first-child {
  border-top: none;
}
/** Local theme
 * group: display: var(--d-cmp-fieldset, var(--d-cmp-radiogroup, flex));
 * group: gap: var(--s-cmp-fieldset-gap, var(--s-cmp-radiogroup-gap), var(--s-1));
 * group:title font-size: var(--t-cmp-fieldset-title, var(--t-cmp-radiogroup-title), var(--t-heading-s));
 * group:title font-weight: var(--fw-cmp-fieldset-title, var(--fw-cmp-radiogroup-title), var(--fw-medium));
 * group:title margin: var(--s-cmp-fieldset-title, var(--s-cmp-radiogroup-title), 0 0 var(--s-1));
 * group:title color: var(--c-cmp-fieldset-title, var(--c-cmp-radiogroup-title), var(--c-gray-600));
 */
.AerFieldset-module--visuallyHidden--6e135 {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  padding: 0;
  margin: 0;
}

.AerFieldset-module--visibleLabel--56f36 {
  display: var(--d-cmp-fieldset, var(--d-cmp-radiogroup, flex));
  gap: var(--s-cmp-fieldset-gap, var(--s-cmp-radiogroup-gap), var(--s-1));
  margin-bottom: var(--s-cmp-fieldset-title, var(--s-cmp-radiogroup-title), var(--s-1));
  font-size: var(--t-cmp-fieldset-title, var(--t-cmp-radiogroup-title), var(--t-heading-s));
  font-weight: var(--fw-cmp-fieldset-title, var(--fw-cmp-fieldset-title), var(--fw-medium));
  color: var(--c-cmp-fieldset-title, var(--c-cmp-radiogroup-title), var(--c-gray-600));
  position: relative;
  z-index: 2;
  width: fit-content;
}
/** Local theme
 * group: gap: var(--s-cmp-radiogroup-gap, var(--s-1));
 * group:title font-size: var(--t-cmp-radiogroup-title, var(--t-heading-s));
 * group:title font-weight: var(--fw-cmp-radiogroup-title, var(--fw-medium));
 * group:title margin: var(--s-cmp-radiogroup-title, 0 0 var(--s-1));
 * group:title color: var(--c-cmp-radiogroup-title, var(--c-gray-600));
 *
 * radio: width: var(--s-cmp-radio-icon, var(--s-icon));
 * radio: height: var(--s-cmp-radio-icon, var(--s-icon));
 * radio: gap: var(--s-cmp-radio, var(--s-1));
 * radio: border: var(--cmp-radio-icon-border, 2px solid currentColor);
 * radio: border-radius: var(--s-cmp-radio-icon-br, 100%);
 * radio:disabled color: var(--c-input-border-disabled);
 *
 * radio:indicator: color: var(--c-cmp-radio-icon, currentColor);
 * radio:indicator: padding: var(--s-cmp-radio-padding, 1px);
 * radio:indicator: width: var(--s-cmp-radio-icon, var(--s-icon));
 * radio:indicator: height: var(--s-cmp-radio-icon, var(--s-icon));
 * radio:indicator: border-radius: var(--s-cmp-radio-icon-br, 100%);
 *
 * label: color: var(--c-cmp-radio-label, var(--c-body));
 * label: font-size: var(--t-cmp-radio, var(--c-body-m));
 * label:disabled color: var(--c-input-border-disabled);
 */
.AerCheckboxGroup-module--visuallyHidden--8e796 {
}

.AerCheckboxGroup-module--noPointer--4b10e {
}

.AerCheckboxGroup-module--component--f9e0c {
  all: unset;
  display: flex;
  gap: var(--s-cmp-radiogroup-gap, var(--s-1));
  flex-flow: column wrap;
}

.AerCheckboxGroup-module--title--508bc {
  all: unset;
  display: block;
  font-size: var(--t-cmp-radiogroup-title, var(--t-heading-s));
  font-weight: var(--fw-cmp-radiogroup-title, var(--fw-medium));
  margin: var(--s-cmp-radiogroup-title, 0 0 var(--s-1));
  color: var(--c-cmp-radiogroup-title, var(--c-gray-600));
}

.AerCheckboxGroup-module--radioInput--f627c {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--s-cmp-radio, var(--s-1));
  color: var(--c-cmp-radio-label, var(--c-body));
}
.AerCheckboxGroup-module--radioInput--f627c[data-disabled] {
  color: var(--c-input-border-disabled);
  pointer-events: none;
}

.AerCheckboxGroup-module--indicator--c3088 {
  position: relative;
  color: var(--c-cmp-radio-icon, currentColor);
  padding: var(--s-cmp-radio-padding, 1px);
  width: var(--s-cmp-radio-icon, var(--s-icon));
  height: var(--s-cmp-radio-icon, var(--s-icon));
  border-radius: var(--s-cmp-radio-icon-br, 100%);
}
.AerCheckboxGroup-module--indicator--c3088 > * {
  width: 100%;
  height: 100%;
}

.AerCheckboxGroup-module--checkedIcon--3b048 {
  margin-top: -1px;
  transform: scale(1.5);
}

.AerCheckboxGroup-module--imgWrapper--fc06b {
  position: relative;
  display: grid;
  grid-template-columns: var(--s-cmp-radio-icon, var(--s-icon));
  grid-template-rows: var(--s-cmp-radio-icon, var(--s-icon));
  justify-content: stretch;
  align-items: stretch;
}
.AerCheckboxGroup-module--imgWrapper--fc06b > * {
  grid-column: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.AerCheckboxGroup-module--radioBackground--da417 {
  border: var(--cmp-radio-icon-border, 2px solid currentColor);
  border-radius: var(--s-cmp-radio-icon-br, 100%);
}
.AerCheckboxGroup-module--radioBackground--da417 > * {
  width: calc(var(--s-cmp-radio-icon, var(--s-icon)) - 4px);
  height: calc(var(--s-cmp-radio-icon, var(--s-icon)) - 4px);
}

.AerCheckboxGroup-module--input--9c141 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.01;
  z-index: 1;
}
.AerCheckboxGroup-module--input--9c141:hover + * {
  background-color: var(--c-cmp-radio-icon-bg-hover, var(--c-gray-200));
}
.AerCheckboxGroup-module--input--9c141:focus-visible + * {
  box-shadow: 0 0 0 2px var(--c-focus);
}

.AerCheckboxGroup-module--label--fc1dd {
  display: inline-block;
  font-size: var(--t-cmp-radio, var(--c-body-m));
}

.AerCheckboxGroup-module--invalid--d2708 {
  color: var(--c-negative);
}

.AerCheckboxGroup-module--errorMessage--d36d7 {
  color: var(--c-negative);
}
/** Local theme
 * input: gap: var(--s-cmp-checkbox, var(--s-1));
 * input:icon: color: var(--c-cmp-checkbox-icon, var(--c-body));
 * input:icon: width/height: var(--s-cmp-checkbox-icon, var(--s-icon));
 * input:icon: padding: var(--s-cmp-checkbox-padding, 1px);
 * input:icon: border-radius: var(--s-cmp-checkbox-icon-br, var(--s-border-radius-xs));
 * input:icon:hover: background-color: var(--c-cmp-checkbox-icon-bg-hover, var(--c-gray-200));
 * input:icon:border: border: 2px solid var(--c-cmp-checkbox-icon-border, currentColor);
 *
 * label: color: var(--c-cmp-checkbox-label, var(--c-body));
 * label: padding: var(--s-cmp-checkbox-padding, 0 0 0 var(--s-1));
 * label: font-size: var(--t-cmp-checkbox, var(--c-body-m));
 */
.AerCheckbox-module--visuallyHidden--676e2 {
}

.AerCheckbox-module--noPointer--1481a {
}

.AerCheckbox-module--wrapper--6ddb1 {
  display: flex;
  flex-flow: column wrap;
  gap: calc(var(--s-1) * 0.5);
}

.AerCheckbox-module--component--53f13 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--s-cmp-checkbox, var(--s-1));
  color: var(--c-cmp-checkbox-label, var(--c-body));
}
.AerCheckbox-module--component--53f13[data-disabled] {
  color: var(--c-input-border-disabled);
  pointer-events: none;
}

.AerCheckbox-module--indicator--70eda {
  position: relative;
  color: var(--c-cmp-checkbox-icon, currentColor);
  padding: var(--s-cmp-checkbox-padding, 1px);
  width: var(--s-cmp-checkbox-icon, var(--s-icon));
  height: var(--s-cmp-checkbox-icon, var(--s-icon));
  border-radius: var(--s-cmp-checkbox-icon-br, var(--s-border-radius-xs));
}
.AerCheckbox-module--indicator--70eda > * {
  width: 100%;
  height: 100%;
}

.AerCheckbox-module--imgWrapper--6fa70 {
  position: relative;
  display: grid;
  grid-template-columns: var(--s-cmp-checkbox-icon, var(--s-icon));
  grid-template-rows: var(--s-cmp-checkbox-icon, var(--s-icon));
  justify-content: stretch;
  align-items: stretch;
}
.AerCheckbox-module--imgWrapper--6fa70 > * {
  grid-column: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.AerCheckbox-module--checkBox--23e9e {
  border: 2px solid var(--c-cmp-checkbox-icon-border, currentColor);
  border-radius: var(--s-cmp-checkbox-icon-br, var(--s-border-radius-xs));
}
.AerCheckbox-module--checkBox--23e9e > * {
  width: calc(var(--s-cmp-checkbox-icon, var(--s-icon)) - 4px);
  height: calc(var(--s-cmp-checkbox-icon, var(--s-icon)) - 4px);
}

.AerCheckbox-module--input--61ff6 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.01;
  z-index: 1;
}
.AerCheckbox-module--input--61ff6:hover + * {
  background-color: var(--c-cmp-checkbox-icon-bg-hover, var(--c-gray-200));
}
.AerCheckbox-module--input--61ff6:focus-visible + * {
  box-shadow: 0 0 0 2px var(--c-focus);
}

.AerCheckbox-module--label--d8e2c {
  display: inline-block;
  padding: var(--s-cmp-checkbox-padding, 0 0 0 var(--s-1));
  font-size: var(--t-cmp-checkbox, var(--c-body-m));
}

.AerCheckbox-module--invalid--2571c {
}

.AerCheckbox-module--errorMessage--52e48 {
}
.utils-module--visuallyHidden--2dcc8 {
  appearance: none !important;
  clip-path: circle(0) !important;
  position: absolute !important;
  overflow: hidden !important;
  line-height: 0 !important;
  text-indent: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.utils-module--noListStyle--f3218 {
  list-style-type: none;
}

.utils-module--noPointer--8b54c {
  pointer-events: none;
}
.formElements-module--label--5dd53 {
  font-weight: var(--fw-normal);
}

.formElements-module--hiddenLabel--15c51 {
}

.formElements-module--input--7e179 {
  display: block;
  width: 100%;
  align-self: stretch;

  line-height: var(--lh-body-s);
  border-width: var(--s-border-width);
  border-radius: var(--s-border-radius-xs);
  border-color: var(--c-input-border);
  border-style: solid;
  background-color: var(--c-input-bg);
  padding: calc(var(--s-1) - var(--s-border-width)) var(--s-2);
}

.formElements-module--input--7e179::placeholder {
  color: var(--c-input-placeholder);
}

.formElements-module--input--7e179:focus {
  border-color: var(--c-input-border-focus);
  background-color: var(--c-input-bg-focus);
}

.formElements-module--input--7e179:active {
  border-color: var(--c-input-border-active);
  background-color: var(--c-input-bg-active);
}

.formElements-module--disabled--8efbb,
.formElements-module--disabled--8efbb>*,
.formElements-module--input--7e179:disabled {
  /* can't compose in pseudo elements, so duplicating the style here */
  color: var(--c-input-disabled);
  border-color: var(--c-input-border-disabled);
  background-color: var(--c-input-bg-disabled);
  cursor: not-allowed;
}

.formElements-module--textArea--13368 {
  min-height: 11ch;
}

.formElements-module--error--bc7b9 {
  color: var(--c-input-invalid);
  border-color: var(--c-input-border-invalid);
}

.formElements-module--helpTextBase--66245 {
  font-size: var(--t-body-s);
  line-height: var(--lh-body-s);
  margin: 0;
}

.formElements-module--helpText--9d73a {
  color: var(--c-input-helper-text);
}

.formElements-module--errorMessage--ffdb8 {
  color: var(--c-error);
}

.formElements-module--characterCount--a4823 {
  font-size: var(--t-body-xs);
  color: var(--c-input-helper-text);
  align-self: flex-end;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CheckboxGroup-module--checkbox--cd840 {
  border: 2px solid var(--c-brand-quaternary);
  border-radius: 2px;
}

.CheckboxGroup-module--checkboxItem--babc6 {
  margin-block-start: var(--s-1);
}
.CheckboxGroup-module--checkboxItem--babc6 input + * {
  background: var(--c-white);
}
.CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--firstItem--249b7 {
  margin-block-start: 0;
}

.CheckboxGroup-module--checkedIcon--d0247 {
  text-align: center;
  background: var(--c-brand-quaternary);
}

.CheckboxGroup-module--checkboxTick--a3a0a {
  width: 13px;
}
@media (min-width: 64rem) {
  .CheckboxGroup-module--checkboxTick--a3a0a {
    margin-bottom: 12px;
  }
}

.CheckboxGroup-module--lastStepCheckboxGroup--f34f9 .CheckboxGroup-module--checkboxItem--babc6 {
  font-family: var(--font-family-heading);
}

.CheckboxGroup-module--checkboxGroupWrapper--a960d {
  position: relative;
  width: 100%;
  height: 100%;
}

.CheckboxGroup-module--checkboxGroup--979b7 {
  display: flex;
  justify-content: center;
  width: 100%;
}
.CheckboxGroup-module--checkboxGroup--979b7 div {
  width: 100% !important;
}
@media screen and (min-width: 64rem) {
  .CheckboxGroup-module--checkboxGroup--979b7 div {
    width: auto;
    margin: 0;
    flex-basis: 475px;
  }
}
@media screen and (min-width: 64rem) {
  .CheckboxGroup-module--checkboxGroup--979b7.CheckboxGroup-module--groupWithImages--ff840 {
    flex-direction: row;
    justify-content: flex-start;
    column-gap: var(--s-2);
  }
  .CheckboxGroup-module--checkboxGroup--979b7.CheckboxGroup-module--groupWithImages--ff840 div {
    width: auto !important;
    /** assuming the last checkobox is always one without an image **/
  }
  .CheckboxGroup-module--checkboxGroup--979b7.CheckboxGroup-module--groupWithImages--ff840 div:last-child {
    width: 100% !important;
  }
}
.CheckboxGroup-module--checkboxGroup--979b7 legend {
  font-size: var(--t-body-l);
  margin-block-end: var(--s-2);
  text-align: left;
  font-family: var(--font-family);
  font-weight: var(--fw-normal);
  color: var(--c-midnight);
}
@media screen and (min-width: 64rem) {
  .CheckboxGroup-module--checkboxGroup--979b7 {
    flex-direction: row;
    column-gap: var(--s-5);
    row-gap: var(--s-5);
    justify-content: flex-start;
  }
}

.CheckboxGroup-module--checkbox--cd840 {
  border: 2px solid var(--c-midnight);
  border-radius: 2px;
}

.CheckboxGroup-module--checkboximage--c2fa8 {
  position: relative;
  width: 100%;
  /* 352px */
  max-width: calc(var(--s-1) * 44);
}
@media screen and (min-width: 64rem) {
  .CheckboxGroup-module--checkboximage--c2fa8 {
    max-width: 275px;
  }
}

.CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--withImage--6cd30:focus-within {
  outline: 2px solid blue;
}
.CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--withImage--6cd30.CheckboxGroup-module--withImageIsChecked--d4983 {
  border-color: var(--c-sunshine-yellow);
}
.CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--withImage--6cd30 {
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  background-color: var(--c-white);
  padding-block-start: 12px;
  padding-block-end: 12px;
  padding-inline-end: var(--s-2);
  padding-inline-start: var(--s-2);
  border-radius: 6px;
  border: 6px solid var(--c-oatmeal);
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-family);
  text-align: left;
  width: 100%;
  align-items: flex-end;
  justify-content: center;
  column-gap: 5px;
  text-align: center;
  height: 100%;
}
.CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--withImage--6cd30 span:nth-child(1) {
  order: 2;
}
.CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--withImage--6cd30 span:nth-child(2) {
  order: 1;
  width: 100%;
}
.CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--withImage--6cd30 input + * {
  background: v ar(--c-white);
}
.CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--withImage--6cd30.CheckboxGroup-module--firstItem--249b7 {
  margin-block-start: 0;
}
.CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--withImage--6cd30[data-disabled=true] {
  background-color: var(--c-mist);
  cursor: not-allowed;
}
.CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--withImage--6cd30[data-disabled=true] input + * {
  background-color: var(--c-mist);
}
@media screen and (min-width: 64rem) {
  .CheckboxGroup-module--checkboxItem--babc6.CheckboxGroup-module--withImage--6cd30 {
    height: 100%;
    margin: 0;
  }
}

.CheckboxGroup-module--withImage--6cd30 .CheckboxGroup-module--checkedIcon--d0247 {
  text-align: center;
  background: var(--c-midnight);
  display: flex;
  justify-content: center;
  align-items: center;
}

.CheckboxGroup-module--withImage--6cd30 .CheckboxGroup-module--checkboxTick--a3a0a {
  margin: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SocialSharing-module--socialmediawrapper--60eef {
  width: 100%;
}

.SocialSharing-module--socialmediawrapperprimary--c9749 {
  width: 100%;
  position: relative;
  display: flex;
  min-height: calc(var(--s-1) * 28);
  /* 224px */
  margin-block-start: var(--s-2);
}
.SocialSharing-module--socialmediawrapperprimary--c9749 .SocialSharing-module--sharetoicons--1f8f6 {
  width: auto;
  position: absolute;
  inset-block-end: -5px;
  inset-inline-start: 133px;
  z-index: 1;
}
.SocialSharing-module--socialmediawrapperprimary--c9749 .SocialSharing-module--sharetoicons--1f8f6 a {
  margin-inline-start: 5px;
  margin-inline-end: 5px;
}
@media screen and (min-width: 32.5rem) {
  .SocialSharing-module--socialmediawrapperprimary--c9749 .SocialSharing-module--sharetoicons--1f8f6 {
    inset-block-end: calc(var(--s-1) * -1);
  }
}

.SocialSharing-module--sharetolabelhighlighted--d7ebe {
  width: 100%;
}

.SocialSharing-module--sharetolabelcontainer--54d5e {
  width: 271px;
  height: 184px;
  position: absolute;
  inset-block-start: -15px;
  inset-inline-start: 73px;
  display: flex;
}
@media screen and (min-width: 32.5rem) {
  .SocialSharing-module--sharetolabelcontainer--54d5e {
    width: 237px;
    height: 161px;
  }
}

.SocialSharing-module--sharetolabel--af3e6 {
  position: absolute;
  align-self: center;
  justify-self: center;
  font-size: 21px;
  line-height: var(--lh-body-s);
  padding-inline-start: 61px;
  padding-inline-end: 23px;
  color: var(--c-black);
  font-weight: 700;
  font-family: var(--font-family-heading);
}

.SocialSharing-module--sharetoicons--1f8f6 {
  justify-content: flex-start;
}
.SocialSharing-module--sharetoicons--1f8f6 a:first-child {
  margin-left: 0;
}
.SocialSharing-module--sharetoicons--1f8f6 a {
  margin-inline-start: var(--s-1);
  margin-inline-end: var(--s-1);
}

.SocialSharing-module--doganimation--9e5a5 {
  /* 144px */
  width: calc(var(--s-1) * 18);
  height: auto;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .SocialSharing-module--doganimation--9e5a5 {
    display: none;
  }
}

.SocialSharing-module--dogstatic--0c63b {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .SocialSharing-module--dogstatic--0c63b {
    display: block;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroBreed-module--breedherocontainer--b3055 {
  position: relative;
  width: 100%;
  height: auto;
}

.IntroBreed-module--topsectionouter--43a13 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  padding: 0 0 var(--s-8) 0;
  box-sizing: border-box;
  background-color: var(--c-sandy-fur);
}
@media (min-width: 64rem) {
  .IntroBreed-module--topsectionouter--43a13 {
    padding: var(--s-8) 0;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-end;
  }
}

.IntroBreed-module--imagecontainer--6b354 {
  position: relative;
  width: 90%;
  background-color: var(--c-sunshine-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: auto;
  border-radius: var(--s-1);
  margin: 0 auto;
  max-height: 256px;
}
@media (min-width: 32.5rem) {
  .IntroBreed-module--imagecontainer--6b354 {
    /* 352px */
    max-height: calc(var(--s-1) * 44);
  }
}
@media (min-width: 64rem) {
  .IntroBreed-module--imagecontainer--6b354 {
    /* 504px */
    max-width: calc(var(--s-1) * 63);
    max-height: 423px;
    margin: 0;
  }
}
@media (min-width: 75rem) {
  .IntroBreed-module--imagecontainer--6b354 {
    max-width: 565px;
  }
}
.IntroBreed-module--imagecontainer--6b354 .IntroBreed-module--imagewrapper--ed03d {
  box-sizing: border-box;
  height: 256px;
}
@media (min-width: 32.5rem) {
  .IntroBreed-module--imagecontainer--6b354 .IntroBreed-module--imagewrapper--ed03d {
    /* 352px */
    height: calc(var(--s-1) * 44);
  }
}
@media (min-width: 64rem) {
  .IntroBreed-module--imagecontainer--6b354 .IntroBreed-module--imagewrapper--ed03d {
    height: 423px;
  }
}
.IntroBreed-module--imagecontainer--6b354 .IntroBreed-module--imagewrapper--ed03d img {
  max-height: 100%;
  object-fit: contain;
}

.IntroBreed-module--bordersection--16201 {
  position: relative;
  display: flex;
  width: 100%;
  background-color: var(--c-sandy-fur);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
}
.IntroBreed-module--bordersection--16201 .IntroBreed-module--border--5cb43 {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  pointer-events: none;
}
@media (min-width: 37.5rem) {
  .IntroBreed-module--bordersection--16201 .IntroBreed-module--border--5cb43 {
    margin-block-start: calc(var(--s-6) * -1);
  }
}
.IntroBreed-module--bordersection--16201 .IntroBreed-module--border--5cb43 svg {
  width: 100%;
}

.IntroBreed-module--detailscontainer--7437b {
  position: relative;
}
@media (min-width: 64rem) {
  .IntroBreed-module--detailscontainer--7437b {
    /* 504px */
    width: calc(var(--s-1) * 63);
  }
}
@media (min-width: 75rem) {
  .IntroBreed-module--detailscontainer--7437b {
    width: 565px;
  }
}

.IntroBreed-module--textcontainer--b5747 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: 0 auto;
  padding: var(--s-4) 0 var(--s-1) 0;
  box-sizing: border-box;
}
@media screen and (min-width: 64rem) {
  .IntroBreed-module--textcontainer--b5747 {
    width: 100%;
    padding: var(--s-4) 0;
  }
}
.IntroBreed-module--textcontainer--b5747 .IntroBreed-module--title--40eae {
  width: 100%;
}
.IntroBreed-module--textcontainer--b5747 .IntroBreed-module--intro--b976a {
  width: 100%;
}

.IntroBreed-module--keydetails--53055 {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
  width: 90%;
  margin: 0 auto;
}
@media screen and (min-width: 64rem) {
  .IntroBreed-module--keydetails--53055 {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.IntroBreed-module--detail--00b50 {
  border-radius: var(--s-1);
  background-color: rgba(255, 255, 255, 0.6);
  flex: 0 1 auto;
  align-self: auto;
  padding: var(--s-1) var(--s-2);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-block-end: var(--s-3);
  /* 104px */
  height: calc(var(--s-1) * 13);
}
@media screen and (min-width: 64rem) {
  .IntroBreed-module--detail--00b50 {
    margin-block-end: var(--s-2);
  }
  .IntroBreed-module--detail--00b50:last-child {
    margin-bottom: 0;
  }
}
.IntroBreed-module--detail--00b50 .IntroBreed-module--icon--0f3a6 {
  margin-inline-end: 12px;
}
.IntroBreed-module--detail--00b50 .IntroBreed-module--text--1e920 .IntroBreed-module--optiontitle--89d9d {
  font-family: var(--font-family);
  font-weight: bold;
  line-height: var(--lh-body-s);
  display: block;
}
.IntroBreed-module--detail--00b50 .IntroBreed-module--text--1e920 .IntroBreed-module--optionvalue--5c515 {
  font-family: var(--font-family);
  font-weight: normal;
  line-height: var(--lh-body-s);
  color: var(--c-dawn);
  display: block;
}
.IntroBreed-module--detail--00b50 .IntroBreed-module--text--1e920 p {
  margin: 0;
}

.IntroBreed-module--sizeguide--1113e {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 100%;
  font-family: var(--font-family);
  font-weight: bold;
  text-decoration: underline;
  text-underline-position: under;
  text-underline-offset: 4px;
  cursor: pointer;
  flex-basis: 100%;
}

.IntroBreed-module--sizeguidecontent--f8d48 {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: auto;
  align-self: flex-end;
  /* 120px */
  width: calc(var(--s-1) * 15);
}
.IntroBreed-module--sizeguidecontent--f8d48 > svg {
  margin-inline-start: var(--s-1);
}
:root {
  --ease-1: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-2: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-duration-s: 0.15s;
  --ease-duration-m: 0.3s;
  --ease-duration-l: 0.8s;
  --ease-duration-xl: 1.3s;
}

@keyframes AerTooltip-module--slideUpAndFade--0bfe7 {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes AerTooltip-module--slideRightAndFade--d7329 {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes AerTooltip-module--slideDownAndFade--fd6c0 {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes AerTooltip-module--slideLeftAndFade--8aae7 {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes AerTooltip-module--fadeIn--64a35 {
  0% {
    opacity: 0;
  }
  90% {
    opacity: inherit;
  }
}
@keyframes AerTooltip-module--fadeGrowIn--f3fcf {
  0% {
    opacity: 0;
    scale: 0.5;
  }
  50% {
    scale: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes AerTooltip-module--slideInFromBlockEnd--4e7bb {
  0% {
    translatex: 100%;
  }
  100% {
    translatex: 0;
  }
}
/** Local theme
 * content: border: var(--cmp-tooltip-border, 0px solid transparent);
 * content: border-radius: var(--s-cmp-tooltip-border-radius, var(--s-border-radius-s));
 * content: padding: var(--s-cmp-tooltip-padding, var(--s-1) var(--s-2));
 * content: font-size: var(--cmp-tooltip-t, var(--t-body));
 * content: color: var(--c-cmp-tooltip-text, var(--c-body));
 * content: box-shadow: var(--sh-cmp-tooltip-box, var(--sh-box-l));
 * content: box-shadow: animation-timing-function: var(--cmp-tooltip-animation-timing, var(--ease-1));
 * content: background: linear-gradient(
    0deg,
    var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50)) 0%,
    var(--c-cmp-tooltip-bg2, var(--c-brand-primary-25)) 100%
  );
 * arrow: fill: var(
    --c-cmp-tooltip-arrow,
    var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50))
  );
 * arrow (on right): fill: var(
    --c-cmp-tooltip-arrow-right,
    var(
      --c-cmp-tooltip-arrow,
      var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50))
    )
  );
 * arrow (on left): fill: var(
    --c-cmp-tooltip-arrow-left,
    var(
      --c-cmp-tooltip-arrow,
      var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50))
    )
  );
 * arrow(on top): fill: var(
    --c-cmp-tooltip-arrow-top,
    var(
      --c-cmp-tooltip-arrow,
      var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50))
    )
  );
 * arrow(on bottom): fill: var(
    --c-cmp-tooltip-arrow-bottom,
    var(
      --c-cmp-tooltip-arrow,
      var(--c-cmp-tooltip-bg2, var(--c-brand-primary-25))
    )
  );
 */
.AerTooltip-module--content--d1d62 {
  border: var(--cmp-tooltip-border, 0px solid transparent);
  border-radius: var(--s-cmp-tooltip-border-radius, var(--s-border-radius-s));
  padding: var(--s-cmp-tooltip-padding, var(--s-1) var(--s-2));
  font-size: var(--cmp-tooltip-t, var(--t-body));
  color: var(--c-cmp-tooltip-text, var(--c-body));
  background: var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50));
  background: linear-gradient(0deg, var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50)) 0%, var(--c-cmp-tooltip-bg2, var(--c-brand-primary-25)) 100%);
  box-shadow: var(--sh-cmp-tooltip-box, var(--sh-box-l));
  -webkit-user-select: none;
          user-select: none;
  animation-duration: 400ms;
  animation-timing-function: var(--cmp-tooltip-animation-timing, var(--ease-1));
  will-change: transform, opacity;
}

.AerTooltip-module--content--d1d62[data-state=delayed-open][data-side=top] {
  animation-name: AerTooltip-module--slideDownAndFade--fd6c0;
}

.AerTooltip-module--content--d1d62[data-state=delayed-open][data-side=right] {
  animation-name: AerTooltip-module--slideLeftAndFade--8aae7;
}

.AerTooltip-module--content--d1d62[data-state=delayed-open][data-side=bottom] {
  animation-name: AerTooltip-module--slideUpAndFade--0bfe7;
}

.AerTooltip-module--content--d1d62[data-state=delayed-open][data-side=left] {
  animation-name: AerTooltip-module--slideRightAndFade--d7329;
}

.AerTooltip-module--arrow--e4237 {
  fill: var(--c-cmp-tooltip-arrow, var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50)));
}

[data-side=top] .AerTooltip-module--arrow--e4237 {
  fill: var(--c-cmp-tooltip-arrow-top, var(--c-cmp-tooltip-arrow, var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50))));
}

[data-side=bottom] .AerTooltip-module--arrow--e4237 {
  fill: var(--c-cmp-tooltip-arrow-bottom, var(--c-cmp-tooltip-arrow, var(--c-cmp-tooltip-bg2, var(--c-brand-primary-25))));
}

[data-side=left] .AerTooltip-module--arrow--e4237 {
  fill: var(--c-cmp-tooltip-arrow-left, var(--c-cmp-tooltip-arrow, var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50))));
}

[data-side=right] .AerTooltip-module--arrow--e4237 {
  fill: var(--c-cmp-tooltip-arrow-right, var(--c-cmp-tooltip-arrow, var(--c-cmp-tooltip-bg1, var(--c-brand-primary-50))));
}
.Tooltip-module--button--e87a2 {
  background: none;
  border: none;
  padding: 0;
  height: fit-content;
  min-width: fit-content;
}

.Tooltip-module--icon--e7991 {
  background: var(--c-black);
  border: 1px solid var(--c-black);
  border-radius: 50%;
  color: var(--c-white);
}
.Tooltip-module--icon--e7991.Tooltip-module--active--36092 {
  color: var(--c-active);
}

.Tooltip-module--tooltip--28df4 {
  padding: var(--s-2);
  border: 2px solid var(--c-tooltip-border);
  border-radius: var(--s-border-radius-s);
  background: var(--c-tooltip-bg);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  color: var(--c-black);
  /* 240px */
  width: calc(var(--s-1) * 30);
}
.Tooltip-module--tooltip--28df4 a {
  word-wrap: break-all;
}

.Tooltip-module--content--e6fe4 {
  background: unset !important;
  animation-name: unset !important;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.Label-module--labelWrapper--d0299 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  margin-block-end: var(--s-2);
}
.Label-module--labelWrapper--d0299 [data-radix-popper-content-wrapper] {
  z-index: 1 !important;
}

.Label-module--required--62596 {
  color: var(--c-negative);
}
/** Local theme
 * group: gap: var(--s-cmp-radiogroup-gap, var(--s-1));
 * group:title font-size: var(--t-cmp-radiogroup-title, var(--t-heading-s));
 * group:title font-weight: var(--fw-cmp-radiogroup-title, var(--fw-medium));
 * group:title margin: var(--s-cmp-radiogroup-title, 0 0 var(--s-1));
 * group:title color: var(--c-cmp-radiogroup-title, var(--c-gray-600));
 *
 * radio: width: var(--s-cmp-radio-icon, var(--s-icon));
 * radio: height: var(--s-cmp-radio-icon, var(--s-icon));
 * radio: gap: var(--s-cmp-radio, var(--s-1));
 * radio: border: var(--cmp-radio-icon-border, 2px solid currentColor);
 * radio: border-radius: var(--s-cmp-radio-icon-br, 100%);
 * radio:disabled color: var(--c-input-border-disabled);
 *
 * radio:indicator: color: var(--c-cmp-radio-icon, currentColor);
 * radio:indicator: padding: var(--s-cmp-radio-padding, 1px);
 * radio:indicator: width: var(--s-cmp-radio-icon, var(--s-icon));
 * radio:indicator: height: var(--s-cmp-radio-icon, var(--s-icon));
 * radio:indicator: border-radius: var(--s-cmp-radio-icon-br, 100%);
 *
 * label: color: var(--c-cmp-radio-label, var(--c-body));
 * label: font-size: var(--t-cmp-radio, var(--c-body-m));
 * label:disabled color: var(--c-input-border-disabled);
 */
.AerRadioGroup-module--visuallyHidden--d019d {
}

.AerRadioGroup-module--noPointer--3adf3 {
}

.AerRadioGroup-module--component--9eb61 {
  all: unset;
  display: flex;
  gap: var(--s-cmp-radiogroup-gap, var(--s-1));
  flex-flow: column wrap;
}

.AerRadioGroup-module--title--72238 {
  all: unset;
  display: block;
  font-size: var(--t-cmp-radiogroup-title, var(--t-heading-s));
  font-weight: var(--fw-cmp-radiogroup-title, var(--fw-medium));
  margin: var(--s-cmp-radiogroup-title, 0 0 var(--s-1));
  color: var(--c-cmp-radiogroup-title, var(--c-gray-600));
}

.AerRadioGroup-module--radioInput--eebb6 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--s-cmp-radio, var(--s-1));
  color: var(--c-cmp-radio-label, var(--c-body));
}
.AerRadioGroup-module--radioInput--eebb6[data-disabled] {
  color: var(--c-input-border-disabled);
  pointer-events: none;
}

.AerRadioGroup-module--indicator--ea0d3 {
  position: relative;
  color: var(--c-cmp-radio-icon, currentColor);
  padding: var(--s-cmp-radio-padding, 1px);
  width: var(--s-cmp-radio-icon, var(--s-icon));
  height: var(--s-cmp-radio-icon, var(--s-icon));
  border-radius: var(--s-cmp-radio-icon-br, 100%);
}
.AerRadioGroup-module--indicator--ea0d3 > * {
  width: 100%;
  height: 100%;
}

.AerRadioGroup-module--checkedIcon--9da0c {
  margin-top: -1px;
  transform: scale(1.5);
}

.AerRadioGroup-module--imgWrapper--7be6f {
  position: relative;
  display: grid;
  grid-template-columns: var(--s-cmp-radio-icon, var(--s-icon));
  grid-template-rows: var(--s-cmp-radio-icon, var(--s-icon));
  justify-content: stretch;
  align-items: stretch;
}
.AerRadioGroup-module--imgWrapper--7be6f > * {
  grid-column: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.AerRadioGroup-module--radioBackground--2e936 {
  border: var(--cmp-radio-icon-border, 2px solid currentColor);
  border-radius: var(--s-cmp-radio-icon-br, 100%);
}
.AerRadioGroup-module--radioBackground--2e936 > * {
  width: calc(var(--s-cmp-radio-icon, var(--s-icon)) - 4px);
  height: calc(var(--s-cmp-radio-icon, var(--s-icon)) - 4px);
}

.AerRadioGroup-module--input--818f4 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.01;
  z-index: 1;
}
.AerRadioGroup-module--input--818f4:hover + * {
  background-color: var(--c-cmp-radio-icon-bg-hover, var(--c-gray-200));
}
.AerRadioGroup-module--input--818f4:focus-visible + * {
  box-shadow: 0 0 0 2px var(--c-focus);
}

.AerRadioGroup-module--label--fc48a {
  display: inline-block;
  font-size: var(--t-cmp-radio, var(--c-body-m));
}

.AerRadioGroup-module--invalid--e9937 {
  color: var(--c-negative);
}

.AerRadioGroup-module--errorMessage--203a7 {
  color: var(--c-negative);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.RadioGroup-module--radioOption--1f93a {
  margin-block-start: var(--s-1);
}
.RadioGroup-module--radioOption--1f93a span:nth-of-type(2) {
  margin-left: var(--s-1);
}
.RadioGroup-module--radioOption--1f93a input + * {
  background-color: var(--c-white);
}
.RadioGroup-module--radioOption--1f93a .RadioGroup-module--selectedRadio--a1329 {
  background: var(--c-brand-primary);
  border-radius: 50%;
  width: 50%;
  height: 50%;
  border: 7px solid;
  box-sizing: content-box;
  transform: translate(-50%, -50%);
  inset-inline-start: 50%;
  inset-block-start: 50%;
}
.RadioGroup-module--radioOption--1f93a.RadioGroup-module--firstItem--b4e53 {
  margin-block-start: 0;
}

.RadioGroup-module--radioGroupWrapperInline--cc552 {
  display: flex;
  width: 100%;
}
.RadioGroup-module--radioGroupWrapperInline--cc552 legend {
  font-size: var(--t-body-l);
  margin-block-end: var(--s-2);
  text-align: left;
  color: var(--c-black);
  font-family: var(--font-family);
}
@media screen and (min-width: 64rem) {
  .RadioGroup-module--radioGroupWrapperInline--cc552 {
    flex-direction: row;
    column-gap: var(--s-5);
    row-gap: var(--s-5);
    justify-content: flex-start;
  }
}

.RadioGroup-module--inlineOption--47cf6 {
}
.RadioGroup-module--inlineOption--47cf6:focus-within {
  outline: 2px solid blue;
}
.RadioGroup-module--inlineOption--47cf6 {
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  background-color: var(--c-white);
  padding-block-start: calc(var(--s-1) * 1.5);
  padding-block-end: calc(var(--s-1) * 1.5);
  padding-inline-end: var(--s-2);
  padding-inline-start: var(--s-2);
  border-radius: var(--s-1);
  cursor: pointer;
  text-align: left;
}
.RadioGroup-module--inlineOption--47cf6 span:nth-of-type(2) {
  margin-inline-start: var(--s-1);
  font-weight: var(--fw-bold);
}
.RadioGroup-module--inlineOption--47cf6 input + * {
  background-color: var(--c-white);
}
.RadioGroup-module--inlineOption--47cf6 .RadioGroup-module--selectedRadio--a1329 {
  background: var(--c-sunshine-yellow);
  border-radius: 50%;
  width: 50%;
  height: 50%;
  border: 7px solid;
  box-sizing: content-box;
  transform: translate(-50%, -50%);
  inset-inline-start: 50%;
  inset-block-start: 50%;
}
.RadioGroup-module--inlineOption--47cf6.RadioGroup-module--firstItem--b4e53 {
  margin-block-start: 0;
}
@media screen and (min-width: 64rem) {
  .RadioGroup-module--inlineOption--47cf6 {
    flex-basis: 475px;
    margin: 0;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CommonQuestion-module--commonquestion--16033 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
}

.CommonQuestion-module--commonquestionnospace--c23ec {
  padding-block-end: 0;
}

.CommonQuestion-module--caqsectionbreak--b5e10 {
  width: 95%;
  border-block-end: var(--bb-section-break);
  margin: var(--s-4) 0;
}

.CommonQuestion-module--title--367f2 {
  margin-block-end: var(--s-2);
}

.CommonQuestion-module--answertext--c12e0 p a {
  font-weight: 600;
}
.CommonQuestion-module--answertext--c12e0 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}

.CommonQuestion-module--gradient--e777f {
  position: absolute;
  z-index: var(--z-raised);
  inset-inline-end: 0;
  inset-block-end: var(--s-4);
  inset-inline-start: 0;
  height: calc(var(--s-10) * 2);
  background: url(data:image/svg+xml;base64,alotofcodehere);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);
}

.CommonQuestion-module--showmore--636c3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: var(--s-2);
  z-index: var(--z-app-shell);
  cursor: pointer;
  padding: var(--s-1);
  max-width: fit-content;
}
.CommonQuestion-module--showmore--636c3 p {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.CommonQuestion-module--showmore--636c3 p:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.CommonQuestion-module--showmore--636c3 p:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.CommonQuestion-module--showmore--636c3 p:visited {
  text-decoration-style: solid;
}
.CommonQuestion-module--showmore--636c3 p:hover {
  background-color: var(--c-white);
}
.CommonQuestion-module--showmore--636c3 p {
  margin: 0;
}

.CommonQuestion-module--visibilityhidden--35785 {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphCAQ-module--paragraphcaq--ad986 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  z-index: var(--z-toast);
  height: auto;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.ParagraphCAQ-module--paragraphcaq--ad986 *::selection {
  background-color: var(--c-sunshine-yellow);
}

.ParagraphCAQ-module--caqheading--36e12 {
  width: 100%;
  margin: var(--s-4) 0;
  text-align: start;
}

.ParagraphCAQ-module--cards--79456 {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-inline: auto;
  row-gap: var(--s-1);
}
.swiper-pagination {
	margin-bottom: 12px;
}
.swiper-pagination-bullet {
	background-color: white;
	height: 10px;
	width: 10px;
	height: 16px;
	width: 16px;
}
.swiper-pagination-bullet-active {
	background-color: white;
	height: 14px;
	width: 14px;
	opacity: 1;
	height: 16px;
	width: 16px;
}
.swiper-wrapper {
	position: relative;
	min-height: 100%;
}
.swiper-slide {
	position: relative;
	height: auto;
}

@media screen and (min-width: 1024px) {
	.swiper-pagination-bullet {
		background-color: white;
		height: 16px;
		width: 16px;
	}
	.swiper-pagination-bullet-active {
		background-color: white;
		height: 16px;
		width: 16px;
	}
}
.swiper-scrollbar-horizontal {
	margin-top: 2rem;
}

.swiper-horizontal {
	min-height: 100%;
	max-height: 100%;
}

/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SimpleSignPostCarouselCard-module--cardwrapper--dcd99 {
  position: relative;
  display: flex;
  justify-content: center;
  /* 240px */
  width: calc(var(--s-1) * 30);
}

.SimpleSignPostCarouselCard-module--card--a13f9 {
  position: relative;
  max-width: calc(100% - 32px);
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  margin: var(--s-1);
  background: var(--c-white);
  height: 100%;
  min-width: calc(var(--s-1) * 28);
  /* 224px */
  max-width: calc(var(--s-1) * 28);
  /* 224px */
}

.SimpleSignPostCarouselCard-module--image--939f9 {
  position: relative;
  height: calc(var(--s-1) * 19);
  /* 150px */
  border-top-right-radius: var(--s-1);
  border-top-left-radius: var(--s-1);
}
@media (min-width: 37.5rem) {
  .SimpleSignPostCarouselCard-module--image--939f9 {
    height: calc(var(--s-1) * 21);
    /* 168px */
  }
}
.SimpleSignPostCarouselCard-module--image--939f9 {
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.SimpleSignPostCarouselCard-module--customborderprovider--67cd6 {
  height: 100%;
  width: 100%;
}

.SimpleSignPostCarouselCard-module--cardimg--12029 {
  position: relative;
  height: 100%;
  width: 100%;
  background-position: center center;
  object-fit: cover;
}

.SimpleSignPostCarouselCard-module--details--4bf8a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 15px;
  padding: 22px;
  min-height: 103px;
  border-bottom-right-radius: var(--s-1);
  border-bottom-left-radius: var(--s-1);
}

.SimpleSignPostCarouselCard-module--title--11563 {
  position: relative;
  text-align: center;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphCaseStudy-module--paragraphcasestudycontainer--e3208 {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background-color: var(--c-sandy-fur);
  padding-block-start: 43px;
  padding-inline-start: 23px;
  padding-inline-end: 23px;
  margin-block-end: 86px;
}
@media (min-width: 768px) {
  .ParagraphCaseStudy-module--paragraphcasestudycontainer--e3208 {
    flex-direction: row;
    justify-content: center;
    padding-block-start: 78px;
    padding-block-end: 78px;
    margin-block-end: 0;
  }
}

.ParagraphCaseStudy-module--image--83299 {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ParagraphCaseStudy-module--image--83299 img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--s-1);
}
@media (max-width: 767px) {
  .ParagraphCaseStudy-module--image--83299 img {
    height: 100%;
  }
}
@media (min-width: 768px) {
  .ParagraphCaseStudy-module--image--83299 {
    width: 50%;
    align-items: center;
    padding-inline-end: var(--s-4);
  }
}

.ParagraphCaseStudy-module--details--4ea84 {
  display: flex;
  flex-direction: column;
  /* 48px */
  padding-block-start: calc(var(--s-1) * 6);
}
@media (min-width: 768px) {
  .ParagraphCaseStudy-module--details--4ea84 {
    width: 50%;
    padding: 0;
    justify-content: center;
    /* 568px */
    max-width: calc(var(--s-1) * 71);
  }
}

.ParagraphCaseStudy-module--title--42a6e {
  font-size: var(--s-5);
  line-height: var(--s-7);
  margin-block-end: 18px;
}
@media (min-width: 768px) {
  .ParagraphCaseStudy-module--title--42a6e {
    font-size: var(--s-7);
    line-height: var(--s-8);
    margin-block-end: var(--s-5);
  }
}

.ParagraphCaseStudy-module--subheading--36ac9 {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
  margin-block-end: 18px;
}
@media (min-width: 768px) {
  .ParagraphCaseStudy-module--subheading--36ac9 {
    font-size: var(--t-heading-xl);
    line-height: var(--s-5);
    margin-block-end: var(--s-5);
  }
}

.ParagraphCaseStudy-module--text--63fc2 {
  box-sizing: border-box;
  margin-block-start: 0;
  margin-block-end: 18px;
}
@media (min-width: 768px) {
  .ParagraphCaseStudy-module--text--63fc2 {
    width: 100%;
    margin-block-end: var(--s-5);
  }
}

.ParagraphCaseStudy-module--buttonwrapper--4c277 {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .ParagraphCaseStudy-module--buttonwrapper--4c277 {
    justify-content: flex-start;
  }
}

.ParagraphCaseStudy-module--signpostcardcarouselinner--aafc0 {
  text-align: left;
  height: auto;
  width: 100%;
  margin-inline-start: auto;
  margin-inline-end: auto;
  box-sizing: border-box;
  padding-block-end: var(--s-4);
}
@media screen and (min-width: 75rem) {
  .ParagraphCaseStudy-module--signpostcardcarouselinner--aafc0 {
    width: 90%;
  }
}
@media screen and (min-width: 90rem) {
  .ParagraphCaseStudy-module--signpostcardcarouselinner--aafc0 {
    width: 80%;
  }
}

.ParagraphCaseStudy-module--swiperwrapper--28e89 {
  position: relative;
  width: 100%;
}

.ParagraphCaseStudy-module--swiper--74f3c {
  max-width: 100%;
  box-sizing: border-box;
}

.ParagraphCaseStudy-module--navbuttons--e9187 {
  position: absolute;
  width: calc(100% - var(--s-2));
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  inset-block-start: 0;
  pointer-events: none;
  inset-inline-start: var(--s-1);
  inset-inline-end: var(--s-1);
}
@media screen and (min-width: 75rem) {
  .ParagraphCaseStudy-module--navbuttons--e9187 {
    inset-inline-start: calc(var(--s-2) * -1);
    inset-inline-end: calc(var(--s-2) * -1);
    width: calc(100% - var(--s-5));
  }
}

.ParagraphCaseStudy-module--back--36738 {
  z-index: 2;
  pointer-events: all;
}

.ParagraphCaseStudy-module--next--073b4 {
  z-index: 2;
  pointer-events: all;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphChecklist-module--contentarea--34ee8 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: relative;
  height: 100%;
  width: 100%;
}
.ParagraphChecklist-module--contentarea--34ee8 *::selection {
  background-color: var(--c-sunshine-yellow);
}
.ParagraphChecklist-module--contentarea--34ee8 ul li {
  display: unset;
  position: relative;
  padding-inline-start: var(--s-5);
  margin-block-end: var(--s-1);
}

.ParagraphChecklist-module--title--3bec7 {
  width: 100%;
  padding-block-start: var(--s-4);
  text-align: left;
  margin-inline-start: 0;
}

.ParagraphChecklist-module--checklist--dad7d {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  margin-inline-end: var(--s-1);
}
.ParagraphChecklist-module--checklist--dad7d ul li::before {
  position: absolute;
  display: block;
  content: " ";
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGVjay1jaXJjbGUiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1jaGVjay1jaXJjbGUgZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICAgIDxwYXRoIGZpbGw9IiNGRkM4MDAiIGQ9Ik01MDQgMjU2YzAgMTM2Ljk2Ny0xMTEuMDMzIDI0OC0yNDggMjQ4UzggMzkyLjk2NyA4IDI1NiAxMTkuMDMzIDggMjU2IDhzMjQ4IDExMS4wMzMgMjQ4IDI0OHpNMjI3LjMxNCAzODcuMzE0bDE4NC0xODRjNi4yNDgtNi4yNDggNi4yNDgtMTYuMzc5IDAtMjIuNjI3bC0yMi42MjctMjIuNjI3Yy02LjI0OC02LjI0OS0xNi4zNzktNi4yNDktMjIuNjI4IDBMMjE2IDMwOC4xMThsLTcwLjA1OS03MC4wNTljLTYuMjQ4LTYuMjQ4LTE2LjM3OS02LjI0OC0yMi42MjggMGwtMjIuNjI3IDIyLjYyN2MtNi4yNDggNi4yNDgtNi4yNDggMTYuMzc5IDAgMjIuNjI3bDEwNCAxMDRjNi4yNDkgNi4yNDkgMTYuMzc5IDYuMjQ5IDIyLjYyOC4wMDF6Ij48L3BhdGg+Cjwvc3ZnPg==);
  background-repeat: no-repeat;
  height: var(--s-3);
  width: var(--s-3);
  margin-inline-start: calc(var(--s-5) * -1);
  margin-block-start: calc(var(--s-0-5) * -1);
}

.ParagraphChecklist-module--bulletlist--4a3d4 {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  margin-inline-end: var(--s-1);
}
.ParagraphChecklist-module--bulletlist--4a3d4 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-sandy-fur);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphContactBlock-module--paragraphcontactblockouter--b7ee7 {
  height: auto;
  width: 100%;
  margin: 0;
  background-color: var(--c-sunshine-yellow);
  display: flex;
  justify-content: center;
}

.ParagraphContactBlock-module--paragraphcontactblockinner--89e7b {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  z-index: var(--z-toast);
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
}

.ParagraphContactBlock-module--title--1281c {
  width: 100%;
}

.ParagraphContactBlock-module--content--2fd54 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-block-start: var(--s-2);
}

.ParagraphContactBlock-module--icon--1d204 {
  height: auto;
  width: auto;
  margin-inline-end: var(--s-1);
  margin-inline-start: calc(var(--s-1) * -1);
}

.ParagraphContactBlock-module--url--22d2e {
  display: flex;
  align-items: center;
  width: 100%;
}

.ParagraphContactBlock-module--sharewrapper--7fc7e {
  width: 100%;
  margin-block-start: var(--s-2);
}

.ParagraphContactBlock-module--bordertop--e7fc5 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  z-index: var(--z-app-shell);
  background-color: var(--c-sandy-fur);
}
.ParagraphContactBlock-module--bordertop--e7fc5 svg {
  height: 100%;
  width: 100%;
  margin-block-end: -6px;
}
.TextArea-module--textArea--b7d59 {
  position: relative;
  border-radius: 6px;
  resize: none;
}

.TextArea-module--textArea--b7d59::placeholder {
  color: var(--c-input-placeholder);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ArticleMeta-module--wrapper--f7b88 {
  position: relative;
  background: var(--c-sandy-fur);
  width: 90%;
  padding: 0 var(--s-2);
  box-sizing: border-box;
  border-radius: var(--s-1);
  margin: var(--s-4) 0;
  overflow: hidden;
}
@media only screen and (min-width: 37.5rem) {
  .ArticleMeta-module--wrapper--f7b88 {
    width: 100%;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.InformationBox-module--base--59101 {
  width: 100%;
}

.InformationBox-module--clearinformationbox--6593d {
  position: relative;
}
.InformationBox-module--clearinformationbox--6593d h3 {
  margin-block-end: var(--s-2);
}

.InformationBox-module--informationbox--c6f78 {
  background: var(--c-gray-200);
  padding: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.TaggedTopics-module--tagswrapper--59c28 {
  position: relative;
  padding-inline-start: var(--s-5);
  margin-block: calc(var(--s-2) + var(--s-0-5));
}

.TaggedTopics-module--icon--c8c4a {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 6px;
}

.TaggedTopics-module--label--f8ae1 {
  margin-block-end: var(--s-0-5);
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-midnight);
}

.TaggedTopics-module--tagwrapper--9b35c {
  margin-inline-end: var(--s-1);
  display: inline-block;
}

.TaggedTopics-module--tag--2be52 {
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-dawn);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xs);
}
@media (min-width: 25.875rem) {
  .TaggedTopics-module--tag--2be52 {
    line-height: var(--lh-body-s);
  }
}
.UserId-module--userId--45391 {
  display: none !important;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.AuthorAttribution-module--authorwrapper--9bf52 {
  position: relative;
  padding-inline-start: var(--s-5);
  margin-top: calc(var(--s-2) + var(--s-0-5));
}

.AuthorAttribution-module--icon--7adaa {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
}

.AuthorAttribution-module--label--6a5ee {
  margin-block-end: var(--s-0-5);
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-midnight);
}

.AuthorAttribution-module--author--ff0fc {
  margin-block-start: 0;
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-dawn);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xs);
}
@media (min-width: 25.875rem) {
  .AuthorAttribution-module--author--ff0fc {
    line-height: var(--lh-body-s);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.Breadcrumbs-module--breadcrumbswrapper--0b016 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-inline-start: var(--s-2);
  font-weight: 600;
  font-size: var(--t-body-s);
  color: var(--c-dawn) !important;
}

.Breadcrumbs-module--breadcrumbs--f2ba3 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-weight: 600;
  font-size: var(--t-body-s);
  color: var(--c-dawn) !important;
  height: 100%;
}

.Breadcrumbs-module--breadcrumb--dc0e0 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: var(--font-family);
  font-weight: 600;
}
.Breadcrumbs-module--breadcrumb--dc0e0 a {
  color: var(--c-dawn) !important;
  height: 100%;
}

.Breadcrumbs-module--chevron--f5a45 {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.Breadcrumbs-module--breadcrumbdivider--abbf6 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: var(--font-family);
  margin-inline-start: var(--s-0-5);
  margin-inline-end: var(--s-0-5);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.DogBioLinks-module--dogbiolinkscontainer--61e2d {
  margin-block-start: var(--s-1);
  padding: var(--s-2);
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  /* 352px */
  width: calc(var(--s-1) * 44);
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  height: 368px;
  background-color: var(--c-white);
}

.DogBioLinks-module--dogbiolinkscontainerireland--7b8ec {
  height: 444px;
}

.DogBioLinks-module--title--43120 {
  position: relative;
  height: 30%;
}

.DogBioLinks-module--buttons--08ce1 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--s-2);
  height: 35%;
  width: 100%;
  /* 112px */
  min-height: calc(var(--s-1) * 14);
}
@media screen and (min-width: 37.5rem) {
  .DogBioLinks-module--buttons--08ce1 {
    flex-direction: row;
    justify-content: space-evenly;
  }
}
@media screen and (min-width: 64rem) {
  .DogBioLinks-module--buttons--08ce1 {
    flex-direction: column;
    justify-content: space-between;
  }
}

.DogBioLinks-module--buttonsireland--394d5 {
  /* 112px */
  height: calc(var(--s-1) * 14);
}

.DogBioLinks-module--biolinkbutton--18671 {
  margin-inline-start: 0;
  margin-inline-end: 0;
}
@media screen and (min-width: 37.5rem) {
  .DogBioLinks-module--biolinkbutton--18671 {
    margin-left: var(--s-1);
    margin-inline-end: var(--s-1);
  }
}
@media screen and (min-width: 64rem) {
  .DogBioLinks-module--biolinkbutton--18671 {
    margin-left: 0;
    margin-inline-end: 0;
  }
}

.DogBioLinks-module--socmed--2f6a9 {
  position: relative;
  height: 30%;
  width: 100%;
  margin-block-start: var(--s-1);
  box-sizing: border-box;
}

.DogBioLinks-module--socmedtitle--762b3 {
  font-family: var(--font-family);
  font-weight: 600;
  line-height: var(--lh-body-xs);
  font-size: var(--t-body-s);
}
@media (min-width: 25.875rem) {
  .DogBioLinks-module--socmedtitle--762b3 {
    font-size: var(--t-body-l);
    line-height: var(--lh-body-s);
  }
}
.DogBioLinks-module--socmedtitle--762b3 {
  height: var(--s-2);
  margin-inline-start: var(--s-1);
  margin-block-end: 12px;
  color: var(--c-dawn);
}

.DogBioLinks-module--socmedicons--93968 {
  position: relative;
}

.DogBioLinks-module--modalcontainer--e2733 {
  max-width: 295px;
  display: flex;
  flex-direction: column;
  row-gap: var(--s-2);
}
.DogBioLinks-module--modalcontainer--e2733 h3 {
  font-size: var(--t-heading-s);
}

.DogBioLinks-module--login--19179 {
  margin: 0;
}

.DogBioLinks-module--loginlink--f292b {
  background: none;
  font-weight: 700;
  border: 0;
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  padding: 0;
  display: inline-block;
  cursor: pointer;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.BreedCardCarousel-module--swiperwrapper--36e34 {
  position: relative;
  width: 100%;
}

.BreedCardCarousel-module--swiper--d4f27 {
  max-width: 100%;
  box-sizing: border-box;
}

.BreedCardCarousel-module--pagination--64584 {
  height: var(--s-10);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.BreedCardCarousel-module--cardslide--5978f {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.Pagination-module--paginationwrapper--b84d7 {
  position: absolute;
  height: var(--s-10);
  border-radius: var(--s-2);
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin-block-end: calc(var(--s-4) * -2);
  width: calc(100% - var(--s-2));
}
@media (min-width: 37.5rem) {
  .Pagination-module--paginationwrapper--b84d7 {
    margin-block-start: 0;
    width: calc(var(--s-10) * 4.5);
  }
}

.Pagination-module--slim--a3ee5 {
  height: var(--s-7);
}

.Pagination-module--narrow--755d3 {
  width: calc(100% - var(--s-6));
}
@media (min-width: 37.5rem) {
  .Pagination-module--narrow--755d3 {
    width: calc(var(--s-10) * 3.5);
  }
}

.Pagination-module--nobackground--15a12 {
  background-color: transparent;
  box-shadow: none;
}

.Pagination-module--nooffset--7da05 {
  margin-block-end: 0;
}

.Pagination-module--withshowall--8bb18 {
  display: flex;
  flex-direction: column;
  height: unset;
  padding-block: var(--s-2) var(--s-1);
}

.Pagination-module--controls--6c92f {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.Pagination-module--largepaginationcontrol--939a4 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--s-5);
  height: var(--s-5);
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
}
.Pagination-module--largepaginationcontrol--939a4:disabled {
  background-color: var(--c-oatmeal);
  cursor: default;
}

.Pagination-module--smallpaginationcontrol--46f12 {
  width: var(--s-4);
  height: var(--s-4);
}

.Pagination-module--paginationtext--82ba1 {
  padding-inline: var(--s-1);
  margin: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SimpleBreedCarouselCard-module--cardwrapper--80947 {
  position: relative;
  display: flex;
  justify-content: center;
  /* 240px */
  height: 100%;
  margin-bottom: var(--s-1);
}

.SimpleBreedCarouselCard-module--card--a54f9 {
  position: relative;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  margin: var(--s-1);
  background: var(--c-white);
  min-width: calc(var(--s-1) * 24);
  max-width: calc(var(--s-1) * 24);
  display: block;
  width: 100%;
}

.SimpleBreedCarouselCard-module--image--c0b07 {
  position: relative;
  /* 150px */
  height: calc(var(--s-1) * 19);
  border-top-right-radius: var(--s-1);
  border-top-left-radius: var(--s-1);
}
@media (min-width: 37.5rem) {
  .SimpleBreedCarouselCard-module--image--c0b07 {
    /* 168px */
    height: calc(var(--s-1) * 21);
  }
}
.SimpleBreedCarouselCard-module--image--c0b07 {
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.SimpleBreedCarouselCard-module--customborderprovider--9bfb5 {
  height: 100%;
  width: 100%;
}

.SimpleBreedCarouselCard-module--cardimg--4ad8d {
  position: relative;
  height: 100%;
  width: 100%;
  background-position: center center;
  object-fit: cover;
}

.SimpleBreedCarouselCard-module--details--cb4f4 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 15px;
  padding-block-start: var(--s-1);
  padding-block-end: 22px;
  padding-inline-start: var(--s-1);
  padding-inline-end: var(--s-1);
  min-height: 103px;
  border-bottom-right-radius: var(--s-1);
  border-bottom-left-radius: var(--s-1);
}

.SimpleBreedCarouselCard-module--title--03c02 {
  position: relative;
  text-align: center;
}

.SimpleBreedCarouselCard-module--text--4e715 {
  font-size: var(--t-body-s);
  text-align: center;
  margin-block-end: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.BodyCondition-module--swiperwrapper--98d03 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--c-sandy-fur);
  border-radius: var(--s-1);
  margin: var(--s-3) auto;
  padding: var(--s-2) var(--s-2) var(--s-4);
}
@media (min-width: 37.5rem) {
  .BodyCondition-module--swiperwrapper--98d03 {
    padding: var(--s-5);
  }
}
.BodyCondition-module--swiperwrapper--98d03 svg {
  max-width: inherit;
}
.BodyCondition-module--swiperwrapper--98d03 li {
  min-height: inherit;
  padding-inline-start: 0;
}
@media (min-width: 37.5rem) {
  .BodyCondition-module--swiperwrapper--98d03 li {
    padding-inline-start: var(--s-2);
  }
}
.BodyCondition-module--swiperwrapper--98d03 li span {
  margin-left: var(--s-2);
  display: block;
}
.BodyCondition-module--swiperwrapper--98d03 li::before {
  background-color: var(--c-black);
  height: var(--s-0-75);
  width: var(--s-0-75);
  inset-block-start: calc(var(--s-1) + var(--s-0-5));
}

.BodyCondition-module--swiper--bb473 {
  max-width: 100%;
  box-sizing: border-box;
}

.BodyCondition-module--cardslide--39ea7 {
  padding: var(--s-1);
}

.BodyCondition-module--animationSlider--cfe62 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: calc(var(--s-1) * 66.5);
  margin: 0 0 var(--s-4) 0;
}

.BodyCondition-module--cardslideCondition--cbeb0 {
  display: flex;
  align-content: center;
  justify-content: space-between;
  width: 100%;
  max-width: calc(var(--s-1) * 36);
}
.BodyCondition-module--cardslideCondition--cbeb0 button {
  border: 2px solid var(--c-midnight);
  height: var(--s-4);
  font-weight: bold;
}
.BodyCondition-module--cardslideCondition--cbeb0 button:disabled {
  background-color: var(--c-midnight);
  color: var(--c-sunshine-yellow);
  border: 2px solid var(--c-midnight);
}

.BodyCondition-module--largepaginationcontrol--2eb23 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s-1);
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
}
.BodyCondition-module--largepaginationcontrol--2eb23:disabled {
  background-color: var(--c-oatmeal);
  cursor: default;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CmsMapLocationModal-module--cardsectionbreak--758bd {
  width: 100%;
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
  padding: 0;
  box-sizing: border-box;
}

.CmsMapLocationModal-module--text--ab808 {
  justify-content: space-between;
  box-sizing: border-box;
  max-width: 100%;
}

.CmsMapLocationModal-module--textcontainer--5b604 {
  display: flex;
  column-gap: var(--s-2);
}

.CmsMapLocationModal-module--title--55888 {
  width: 100%;
}

.CmsMapLocationModal-module--heading--965ca {
  font-family: "Work Sans";
  font-size: var(--t-body-s);
  font-weight: 700;
  color: var(--c-black);
}

.CmsMapLocationModal-module--subheading--21891 {
  font-weight: 400;
  color: #737373;
  margin-block-end: 0;
}

.CmsMapLocationModal-module--cardtext--3e258 {
  font-weight: 400;
}

.CmsMapLocationModal-module--gmaplink--8b52a {
}

.CmsMapLocationModal-module--htmltext--b2fcc > p,
.CmsMapLocationModal-module--htmltext--b2fcc li {
  font-family: "Work Sans";
  font-size: var(--t-body-s);
  color: var(--c-black);
}
.CmsMapLocationModal-module--htmltext--b2fcc ul {
  padding-inline-start: 0;
  list-style: none;
}
.CmsMapLocationModal-module--htmltext--b2fcc ul li {
  padding-inline-start: var(--s-5);
  position: relative;
  margin-block-end: var(--s-2);
}
.CmsMapLocationModal-module--htmltext--b2fcc ul li::before {
  background-color: var(--c-midnight);
  border-radius: 50%;
  content: "";
  height: 12px;
  inset-block-start: 8px;
  margin: auto;
  position: absolute;
  text-align: center;
  width: 12px;
  inset-inline-start: 0;
}

.CmsMapLocationModal-module--nomargin--ef8e0 {
  margin-block-end: 0;
}

.CmsMapLocationModal-module--buttonscontainer--0ef0f {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  align-items: flex-end;
  height: 100%;
  margin-block-start: var(--s-1);
}

.CmsMapLocationModal-module--iconWrapper--7e30d {
  position: absolute;
  inset-block-start: 15px;
  inset-inline-end: 15px;
  cursor: pointer;
  border: 0;
  background: none;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.DogCardCarousel-module--swiperwrapper--94106 {
  position: relative;
  width: 100vw;
  max-width: min(100vw, var(--s-max-content-width));
  padding-inline-start: var(--s-2);
  margin-inline-start: calc((100% - 100vw) / 2);
  margin-inline-end: calc((100% - 100vw) / 2);
}
@media (min-width: 64rem) {
  .DogCardCarousel-module--swiperwrapper--94106 {
    width: 100%;
    padding-inline-start: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
}
@media (min-width: 64rem) {
  .DogCardCarousel-module--swiperwrapper--94106 {
    padding-inline-start: var(--s-2);
  }
}
.DogCardCarousel-module--swiperwrapper--94106 {
  padding-block: var(--s-2);
}

.DogCardCarousel-module--fullwidth--54b3f {
  width: 100%;
}

.DogCardCarousel-module--swiper--ab248 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-block: var(--s-1);
  max-height: unset;
}

.DogCardCarousel-module--curvedborder--8fa35 {
  pointer-events: none;
  padding: 0;
  margin: 0;
  position: absolute;
  inset-block-start: -18.5185185185vw px;
  inset-inline-start: 0;
  inset-block-end: calc(var(--s-1) * -1);
  z-index: var(--z-app-shell);
  overflow: hidden;
}

.DogCardCarousel-module--pagination--bcffc {
  position: relative;
  display: flex;
  width: 100%;
  height: var(--s-8);
  justify-content: center;
  align-items: flex-end;
  margin-block: var(--s-0-5) var(--s-2);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.DogCarouselCard-module--dogcardwrapper--82958 {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: calc(var(--s-1) * 28);
  height: 100%;
  min-height: 100%;
  padding: var(--s-2) var(--s-1);
  align-self: stretch;
  justify-self: stretch;
}

.DogCarouselCard-module--dogcard--09aa4 {
  position: relative;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  background: var(--c-white);
  height: 100%;
}

.DogCarouselCard-module--image--08e66 {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-top-right-radius: var(--s-1);
  border-top-left-radius: var(--s-1);
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.DogCarouselCard-module--customborderprovider--8381e {
  height: 100%;
  width: 100%;
}

.DogCarouselCard-module--cardimg--65ee0 {
  position: relative;
  height: 100%;
  width: 100%;
  background-position: center center;
  object-fit: cover;
}

.DogCarouselCard-module--details--5e6db {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 100%;
  border-bottom-right-radius: var(--s-1);
  border-bottom-left-radius: var(--s-1);
  padding: var(--s-2) var(--s-1);
}

.DogCarouselCard-module--title--ad573 {
  position: relative;
  text-align: center;
}

.DogCarouselCard-module--text--525bb {
  position: relative;
  margin: 0;
  word-wrap: break-word;
  width: 100%;
  overflow: hidden;
  text-align: center;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
}
@media (min-width: 25.875rem) {
  .DogCarouselCard-module--text--525bb {
    font-size: var(--t-body-m);
    line-height: var(--lh-body-m);
  }
}
.DogCarouselCard-module--text--525bb {
  color: var(--c-midnight);
}
.DogCarouselCard-module--text--525bb:nth-child(3) {
  color: var(--c-dawn);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FavouriteIcon-module--favouriteiconwrapper--188cd {
  position: absolute;
  inset-block-start: 2%;
  inset-inline-end: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 1px;
  line-height: 1px;
  color: transparent;
}

.FavouriteIcon-module--smallfavicon--d3024 {
  /* 48px */
  height: calc(var(--s-1) * 6);
  /* 48px */
  width: calc(var(--s-1) * 6);
}

.FavouriteIcon-module--mediumfavicon--9940f {
  height: var(--s-10);
  width: var(--s-10);
}

.FavouriteIcon-module--largefavicon--014e6 {
  /* 120px */
  height: calc(var(--s-1) * 15);
  /* 120px */
  width: calc(var(--s-1) * 15);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.PlaceholderDogCarouselCard-module--dogcardwrapper--5e1d4 {
  display: flex;
  justify-content: center;
  width: calc(var(--s-1) * 24);
}
.PlaceholderDogCarouselCard-module--dogcardwrapper--5e1d4 .PlaceholderDogCarouselCard-module--dogcard--6e35c {
  position: relative;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  margin: var(--s-1);
  background: var(--c-white);
  width: 100%;
  height: calc(var(--s-1) * 35);
}
.PlaceholderDogCarouselCard-module--dogcardwrapper--5e1d4 .PlaceholderDogCarouselCard-module--dogcard--6e35c .PlaceholderDogCarouselCard-module--image--64922 {
  position: relative;
  height: calc(var(--s-1) * 19);
  border-top-right-radius: var(--s-1);
  border-top-left-radius: var(--s-1);
  width: 100%;
}
@media (min-width: 37.5rem) {
  .PlaceholderDogCarouselCard-module--dogcardwrapper--5e1d4 .PlaceholderDogCarouselCard-module--dogcard--6e35c .PlaceholderDogCarouselCard-module--image--64922 {
    height: calc(var(--s-1) * 21);
  }
}
.PlaceholderDogCarouselCard-module--dogcardwrapper--5e1d4 .PlaceholderDogCarouselCard-module--dogcard--6e35c .PlaceholderDogCarouselCard-module--image--64922 {
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  background-color: #e4ded5;
  overflow: hidden;
}
.PlaceholderDogCarouselCard-module--dogcardwrapper--5e1d4 .PlaceholderDogCarouselCard-module--dogcard--6e35c .PlaceholderDogCarouselCard-module--image--64922 .PlaceholderDogCarouselCard-module--svgwrapper--2a438 {
  position: relative;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.PlaceholderDogCarouselCard-module--dogcardwrapper--5e1d4 .PlaceholderDogCarouselCard-module--dogcard--6e35c .PlaceholderDogCarouselCard-module--details--f8938 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 112px */
  height: calc(var(--s-1) * 14);
  min-width: 100%;
  border-bottom-right-radius: var(--s-1);
  border-bottom-left-radius: var(--s-1);
}
@media (min-width: 37.5rem) {
  .PlaceholderDogCarouselCard-module--dogcardwrapper--5e1d4 .PlaceholderDogCarouselCard-module--dogcard--6e35c .PlaceholderDogCarouselCard-module--details--f8938 {
    /* 120px */
    height: calc(var(--s-1) * 15);
  }
}
.PlaceholderDogCarouselCard-module--dogcardwrapper--5e1d4 .PlaceholderDogCarouselCard-module--dogcard--6e35c .PlaceholderDogCarouselCard-module--details--f8938 {
  overflow: hidden;
}
.PlaceholderDogCarouselCard-module--dogcardwrapper--5e1d4 .PlaceholderDogCarouselCard-module--dogcard--6e35c .PlaceholderDogCarouselCard-module--details--f8938 .PlaceholderDogCarouselCard-module--svgwrapper--2a438 {
  width: auto;
  height: var(--s-7);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FavouriteDogCardCarousel-module--wrapper--82220 {
  position: relative;
  width: 100%;
}

.FavouriteDogCardCarousel-module--swiper--2a24e {
  box-sizing: border-box;
  min-height: 185px;
  margin-block-start: var(--s-4);
  display: flex;
  height: 100%;
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .FavouriteDogCardCarousel-module--swiper--2a24e {
    max-width: calc(100% - var(--s-10));
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FavouriteDogCarouselCard-module--cardcontainer--847b7 {
  position: relative;
  background-color: var(--c-white);
  border-radius: var(--s-1);
  /* 104px */
  width: calc(var(--s-1) * 13);
  overflow: hidden;
}

.FavouriteDogCarouselCard-module--link--4dd86 {
  overflow: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.FavouriteDogCarouselCard-module--imagewrapper--99b84 {
  position: relative;
  overflow: hidden;
  /* 104px */
  width: calc(var(--s-1) * 13);
  /* 104px */
  height: calc(var(--s-1) * 13);
}

.FavouriteDogCarouselCard-module--cardimg--afb27 {
  position: relative;
  /* 104px */
  height: calc(var(--s-1) * 13);
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

.FavouriteDogCarouselCard-module--namewrapper--e429e {
  padding: 5px;
}

.FavouriteDogCarouselCard-module--name--77e0f {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FrequentQuestion-module--frequentquestion--22dca {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  margin: var(--s-2) 0;
  padding: var(--s-2);
  box-sizing: border-box;
  border-radius: var(--s-2);
  box-shadow: var(--sh-box-card);
}

.FrequentQuestion-module--frequentquestionnospace--967a7 {
  padding-block-end: 0;
}

.FrequentQuestion-module--questionheading--055ea {
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.FrequentQuestion-module--answertext--d8b6f p a {
  font-weight: 600;
}
.FrequentQuestion-module--answertext--d8b6f ul li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
  padding-inline-start: var(--s-5);
  margin-block-end: var(--s-1);
}
.FrequentQuestion-module--answertext--d8b6f ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}

.FrequentQuestion-module--showmore--7b4fd {
  position: absolute;
  inset-block-end: -16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--s-4);
  width: var(--s-4);
  border: 1px solid var(--c-mist);
  background-color: var(--c-white);
  border-radius: 50%;
  align-self: center;
  cursor: pointer;
}
.FrequentQuestion-module--showmore--7b4fd p {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.FrequentQuestion-module--showmore--7b4fd p:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.FrequentQuestion-module--showmore--7b4fd p:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.FrequentQuestion-module--showmore--7b4fd p:visited {
  text-decoration-style: solid;
}
.FrequentQuestion-module--showmore--7b4fd p:hover {
  background-color: var(--c-white);
}

.FrequentQuestion-module--visibilityhidden--23dbf {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ImageCarouselModal-module--modal--5d462 {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas: ". imageModal closeButton" ". imageModal .";
  grid-template-columns: var(--s-8) auto var(--s-8);
  grid-template-rows: var(--s-8) calc(100vh - var(--s-9));
}
@media (orientation: portrait) {
  .ImageCarouselModal-module--modal--5d462 {
    grid-template-areas: ". . closeButton" ". rotateScreen ." "imageModal imageModal imageModal";
    grid-template-columns: var(--s-8) calc(100% - var(--s-8) * 2) var(--s-8);
    grid-template-rows: var(--s-8) 120px auto;
  }
}

.ImageCarouselModal-module--modalswiper--3430b {
  position: relative;
  grid-area: imageModal;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (orientation: portrait) {
  .ImageCarouselModal-module--modalswiper--3430b {
    flex-direction: column;
    justify-content: space-evenly;
  }
}

.ImageCarouselModal-module--modalcontainer--e02fc {
  position: relative;
  margin-block-start: var(--s-1);
  aspect-ratio: 4/3;
  height: 90%;
  max-width: 100%;
}
@media (orientation: portrait) {
  .ImageCarouselModal-module--modalcontainer--e02fc {
    height: unset;
    width: 100%;
  }
}
.ImageCarouselModal-module--modalcontainer--e02fc img {
  height: 100%;
  width: 100%;
}

@media (orientation: landscape) {
  .ImageCarouselModal-module--rotatedevice--249a1 {
    display: none;
  }
}
.ImageCarouselModal-module--rotatedevice--249a1 {
  grid-area: rotateScreen;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ImageCarouselModal-module--rotatetext--340fc {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  width: 60%;
  color: var(--c-white);
  text-align: center;
}

.ImageCarouselModal-module--pagination--77168 {
  position: absolute;
  width: 100%;
  height: var(--s-8);
  display: flex;
  justify-content: center;
  inset-block-end: 0;
  z-index: var(--z-app-shell);
}

.ImageCarouselModal-module--closebutton--91440 {
  grid-area: closeButton;
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: all;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SwiperImage-module--imagewrapper--b530a {
  position: relative;
  border-radius: var(--s-1);
  overflow: hidden;
  width: calc(100% - var(--s-2));
  aspect-ratio: 16/9;
}
.SwiperImage-module--imagewrapper--b530a img {
  position: absolute;
  width: 100%;
  object-position: center center;
  object-fit: cover;
  height: auto;
}

.SwiperImage-module--standalone--c5dea {
  aspect-ratio: 4/3;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MyBasketSponsorDogCard-module--container--9bfc5 {
  width: 100%;
  background-color: var(--c-white);
  /* 312px */
  height: calc(var(--s-1) * 39);
  /* 344px */
  max-width: calc(var(--s-1) * 43);
  margin: var(--s-1);
  margin-block-end: var(--s-2);
  padding: var(--s-2);
  box-sizing: border-box;
  box-shadow: var(--sh-box-card);
}
.MyBasketSponsorDogCard-module--container--9bfc5 .MyBasketSponsorDogCard-module--content--50420 {
  width: 100%;
}

.MyBasketSponsorDogCard-module--fullwidthcontainer--1b5bc {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--c-white);
  /* 200px */
  height: calc(var(--s-1) * 25);
  max-width: 688px;
  margin: var(--s-1);
  margin-inline-start: var(--s-0-5);
  margin-inline-end: var(--s-0-5);
  margin-block-end: var(--s-2);
  padding: var(--s-2);
  box-sizing: border-box;
  box-shadow: var(--sh-box-card);
}
.MyBasketSponsorDogCard-module--fullwidthcontainer--1b5bc .MyBasketSponsorDogCard-module--content--50420 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.MyBasketSponsorDogCard-module--yellow--c09e9 {
  background-color: var(--c-sandy-fur);
}

.MyBasketSponsorDogCard-module--removesponsorship--4c1f8 {
  width: 70%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-black);
}
.MyBasketSponsorDogCard-module--removesponsorship--4c1f8 svg {
  margin-inline-end: var(--s-2);
}

.MyBasketSponsorDogCard-module--dogdetails--13e17 {
  /* 120px */
  height: calc(var(--s-1) * 15);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.MyBasketSponsorDogCard-module--sponsordogname--703ad {
}

.MyBasketSponsorDogCard-module--whosponsortitle--d554d {
}

.MyBasketSponsorDogCard-module--dogimage--5d6e7 {
  border-radius: var(--s-2);
  /* 88px */
  height: calc(var(--s-1) * 11);
  /* 120px */
  width: calc(var(--s-1) * 15);
  overflow: hidden;
}
.MyBasketSponsorDogCard-module--dogimage--5d6e7 img {
  /* 88px */
  height: calc(var(--s-1) * 11);
  /* 120px */
  width: calc(var(--s-1) * 15);
}

.MyBasketSponsorDogCard-module--dogdetailstext--b7056 {
  /* 224px */
  width: calc(var(--s-1) * 28);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: var(--s-2);
  box-sizing: border-box;
}
.MyBasketSponsorDogCard-module--dogdetailstext--b7056 h4 {
  line-height: var(--lh-body-s);
  margin: 0;
}
.MyBasketSponsorDogCard-module--dogdetailstext--b7056 p {
  line-height: var(--lh-body-xs);
  margin: 0;
  color: var(--c-dawn);
}

.MyBasketSponsorDogCard-module--sponsorcontrols--75bc2 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /* 264px */
  min-width: calc(var(--s-1) * 33);
  /* 144px */
  height: calc(var(--s-1) * 18);
  padding: var(--s-1);
  box-sizing: border-box;
}

.MyBasketSponsorDogCard-module--sponsorcontrolstitle--75336 {
  width: 100%;
}

.MyBasketSponsorDogCard-module--sponsorcontrolsbuttons--91d96 {
  width: 70%;
  display: flex;
  justify-content: flex-start;
}

.MyBasketSponsorDogCard-module--sponsorcontrolbutton--cad8f {
  padding: var(--s-1);
  font-size: var(--t-body-s);
  min-width: var(--s-10);
  height: 36px;
  margin-inline-end: var(--s-2);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionSponsorPaymentOptions-module--outerwrapper--b1526 {
  width: 100%;
  padding-block-start: var(--s-1);
  background-color: var(--c-sandy-fur);
}

.SectionSponsorPaymentOptions-module--innerwrapper--0615e {
  width: 100%;
  height: auto;
  padding-block-start: var(--s-1);
  padding-block-end: var(--s-1);
  padding-inline-start: 22px;
  padding-inline-end: 22px;
}
@media screen and (min-width: 64rem) {
  .SectionSponsorPaymentOptions-module--innerwrapper--0615e {
    margin: var(--s-1);
  }
}
.SectionSponsorPaymentOptions-module--innerwrapper--0615e h3 {
  color: var(--c-midnight) !important;
  margin-block-end: var(--s-2);
}
.SectionSponsorPaymentOptions-module--innerwrapper--0615e h4 {
  color: var(--c-midnight) !important;
  margin-block-end: var(--s-2);
}
.SectionSponsorPaymentOptions-module--innerwrapper--0615e p {
  color: var(--c-midnight) !important;
}

.SectionSponsorPaymentOptions-module--sponsoranotherdog--39014 {
  margin: var(--s-2);
}

.SectionSponsorPaymentOptions-module--sponsorcontrols--59f00 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  /* 104px */
  height: calc(var(--s-1) * 13);
  padding: var(--s-1);
  box-sizing: border-box;
}

.SectionSponsorPaymentOptions-module--sponsorcontrolstitle--7f111 {
  width: 100%;
  padding: var(--s-1);
  box-sizing: border-box;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.SectionSponsorPaymentOptions-module--title--0c8d0 {
}

.SectionSponsorPaymentOptions-module--sponsorcontrolsbuttons--0bff6 {
  /* 360px */
  max-width: calc(var(--s-1) * 45);
  display: flex;
  justify-content: space-evenly;
}

.SectionSponsorPaymentOptions-module--sponsorcontrolbutton--2aefe {
  padding: var(--s-1);
  font-size: var(--t-body-s);
  min-width: var(--s-10);
  height: 36px;
}

.SectionSponsorPaymentOptions-module--paymentdetails--6a773 {
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 32.5rem) {
  .SectionSponsorPaymentOptions-module--paymentdetails--6a773 {
    /* 104px */
    height: calc(var(--s-1) * 13);
    flex-direction: row;
  }
}

.SectionSponsorPaymentOptions-module--paymentamounts--7b3c1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--s-2);
  box-sizing: border-box;
}
@media screen and (min-width: 32.5rem) {
  .SectionSponsorPaymentOptions-module--paymentamounts--7b3c1 {
    width: 50%;
  }
}

.SectionSponsorPaymentOptions-module--amount--842b7 {
  width: 100%;
  display: flex;
  color: var(--c-midnight);
  font-family: var(--font-family);
  align-items: center;
  line-height: var(--lh-body-l);
}

.SectionSponsorPaymentOptions-module--amountvalue--0518b {
  height: var(--s-5);
  font-size: var(--s-3);
  height: var(--s-5);
  font-weight: 600;
}

.SectionSponsorPaymentOptions-module--amountinterval--0ca9a {
  height: 100%;
}

.SectionSponsorPaymentOptions-module--paymentoptions--2e2ff {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 32.5rem) {
  .SectionSponsorPaymentOptions-module--paymentoptions--2e2ff {
    width: 50%;
    display: block;
  }
}

.SectionSponsorPaymentOptions-module--paymenticonsmall--9a6b3 {
  height: var(--s-5);
  margin-inline-end: var(--s-1);
}

.SectionSponsorPaymentOptions-module--paymenticonmedium--9206f {
  height: 55px;
  margin-inline-end: var(--s-2);
}

.SectionSponsorPaymentOptions-module--paymentoptionstop--ed663 {
  display: flex;
  padding-inline-start: var(--s-2);
}
@media screen and (min-width: 32.5rem) {
  .SectionSponsorPaymentOptions-module--paymentoptionstop--ed663 {
    justify-content: flex-end;
    width: 100%;
    padding-inline-start: 0;
  }
}

.SectionSponsorPaymentOptions-module--paymentoptionsbottom--b394b {
  display: flex;
  width: 100%;
}
@media screen and (min-width: 32.5rem) {
  .SectionSponsorPaymentOptions-module--paymentoptionsbottom--b394b {
    justify-content: flex-end;
  }
}

.SectionSponsorPaymentOptions-module--submitouter--53170 {
  width: 100%;
  background-color: var(--c-white);
  margin: var(--s-2);
}

.SectionSponsorPaymentOptions-module--submitinner--d67f5 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  max-width: var(--s-common-element-width-m);
  /* 104px */
  height: calc(var(--s-1) * 13);
}

.SectionSponsorPaymentOptions-module--sectionbreak--9934e {
  width: 95%;
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MediaContentItem-module--mediacontentitem--8cb07 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100%;
}
@media screen and (min-width: 64rem) {
  .MediaContentItem-module--mediacontentitem--8cb07 {
    flex-direction: row;
  }
}

.MediaContentItem-module--first--5598b {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 64rem) {
  .MediaContentItem-module--first--5598b {
    max-width: 40%;
  }
}
.MediaContentItem-module--first--5598b img {
  max-width: 100%;
  border-radius: var(--s-1);
  height: auto;
}
@media screen and (min-width: 64rem) {
  .MediaContentItem-module--first--5598b img {
    max-width: 50%;
  }
}

.MediaContentItem-module--second--7a072 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 64rem) {
  .MediaContentItem-module--second--7a072 {
    max-width: 70%;
  }
}
.MediaContentItem-module--second--7a072 {
  padding: var(--s-2);
  box-sizing: border-box;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MyAccountIcon-module--styledlink--77e1f,
.MyAccountIcon-module--styledlink--77e1f:hover {
  font-size: 1px;
  line-height: 1px;
  color: transparent;
  padding: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MyBasketIcon-module--basketnotification--0e287 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-heading);
  background-color: var(--c-sunshine-yellow);
  inset-block-start: calc(var(--s-1) * -1);
  inset-inline-end: calc(var(--s-2) * -0.75);
  height: calc(var(--s-2) * 1.5);
  width: calc(var(--s-2) * 1.5);
  border-radius: 50%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MyFavouritesIcon-module--favnotification--12bce {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-heading);
  background-color: var(--c-sunshine-yellow);
  inset-block-start: calc(var(--s-1) * -1);
  inset-inline-end: calc(var(--s-2) * -0.75);
  height: calc(var(--s-2) * 1.5);
  width: calc(var(--s-2) * 1.5);
  border-radius: 50%;
}

.MyFavouritesIcon-module--favnotificationie--90643 {
  inset-block-start: var(--s-1);
  left: 50%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NDSSurveyResults-module--ndsSurveyResults--2d7ed {
  width: 100%;
  padding-block: var(--s-3);
  padding-inline: var(--s-2);
}
@media (min-width: 64rem) {
  .NDSSurveyResults-module--ndsSurveyResults--2d7ed {
    padding: var(--s-3);
    padding-inline: calc(var(--s-1) * 8);
  }
}

.NDSSurveyResults-module--container--817b1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--s-3);
}

.NDSSurveyResults-module--topRow--b6252,
.NDSSurveyResults-module--bottomRow--0be9a {
  display: flex;
  width: 100%;
  gap: var(--s-4);
}

.NDSSurveyResults-module--leftPane--1dca7 {
  flex: 0 0 calc(var(--s-1) * 37.5);
}

.NDSSurveyResults-module--rightPane--2c144 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Visibility helpers */
.NDSSurveyResults-module--mobileOnly--ffbf1 {
  display: none;
}

.NDSSurveyResults-module--desktopOnly--97cfb {
  display: contents;
}

/* Mobile adjustments */
@media screen and (max-width: 56.25rem) {
  .NDSSurveyResults-module--desktopOnly--97cfb {
    display: none;
  }
  .NDSSurveyResults-module--mobileOnly--ffbf1 {
    display: block;
  }
  .NDSSurveyResults-module--ndsSurveyResults--2d7ed {
    padding: var(--s-2);
  }
  .NDSSurveyResults-module--container--817b1 {
    gap: var(--s-2);
  }
  .NDSSurveyResults-module--topRow--b6252,
  .NDSSurveyResults-module--bottomRow--0be9a {
    flex-direction: column;
    gap: var(--s-2);
  }
  .NDSSurveyResults-module--leftPane--1dca7 {
    flex-basis: auto;
  }
  .NDSSurveyResults-module--rightPane--2c144 {
    gap: var(--s-2);
  }
}
/* BreedNameDisplay styles (kept local to avoid an extra folder) */
.NDSSurveyResults-module--breedNameStack--5f312 {
  display: inline-flex;
  flex-direction: column;
  gap: calc(var(--s-0-5) / 2);
}

.NDSSurveyResults-module--breedBase--cf582 {
  white-space: normal;
  word-break: break-word;
}

.NDSSurveyResults-module--breedExtra--a6ed4 {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--c-midnight);
  white-space: normal;
  word-break: break-word;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
:root {
  --font-family-fido: "Fido", Arial;
  --font-family-work-sans: "Work Sans", "Arial";
  --font-family-m-plus-1p: "M PLUS 1p", Arial;
  --font-family-m-plus-1p-check: "M PLUS 1p Check", Arial;
  --font-family: var(--font-family-work-sans);
  --font-family-heading: var(--font-family-fido);
  --fw-bolder: 700;
  --fw-bold: 600;
  --fw-medium: 500;
  --fw-normal: 400;
  --fw-light: 300;
  --fw-lighter: 200;
  --t-base: 16;
  /** Design token **/
  --t-body-xxs: calc(10rem / var(--t-base));
  --t-body-xs: calc(12rem / var(--t-base));
  --t-body-s: calc(14rem / var(--t-base));
  --t-body-m: 1rem;
  --t-body-l: calc(20rem / var(--t-base));
  --t-body-xl: calc(22rem / var(--t-base));
  --t-body-xxl: calc(28rem / var(--t-base));
  --t-heading-xxs: calc(14rem / var(--t-base));
  --t-heading-xs: calc(18rem / var(--t-base));
  --t-heading-s: calc(22rem / var(--t-base));
  --t-heading-m: calc(24rem / var(--t-base));
  --t-heading-l: calc(28rem / var(--t-base));
  --t-heading-xl: calc(36rem / var(--t-base));
  --t-heading-xxl: calc(56rem / var(--t-base));
  --lh-body-xxs: calc(calc(10rem / var(--t-base)) * 1.6);
  --lh-body-xs: calc(calc(12rem / var(--t-base)) * 1.6);
  --lh-body-s: calc(calc(14rem / var(--t-base)) * 1.6);
  --lh-body-m: calc(1rem * 1.6);
  --lh-body-l: calc(calc(20rem / var(--t-base)) * 1.6);
  --lh-body-xl: calc(calc(22rem / var(--t-base)) * 1.6);
  --lh-body-xxl: calc(calc(28rem / var(--t-base)) * 1.6);
  --lh-heading-xxs: calc(calc(22rem / var(--t-base)) * 1.1);
  --lh-heading-xs: calc(calc(28rem / var(--t-base)) * 1.1);
  --lh-heading-s: calc(calc(34rem / var(--t-base)) * 1.1);
  --lh-heading-m: calc(calc(36rem / var(--t-base)) * 1.1);
  --lh-heading-l: calc(calc(42rem / var(--t-base)) * 1.1);
  --lh-heading-xl: calc(calc(54rem / var(--t-base)) * 1.1);
  --lh-heading-xxl: calc(calc(64rem / var(--t-base)) * 1.1);
  --td-link-decoration: underline;
  --td-link-hover-decoration: none;
}

:root {
  /***** 
  Primary Brand Palette (SCSS variables for local scoping)
  Do not use these values directly if you can help it
  *****/
  /* Primary Palette */
  --c-sunshine-yellow: hsl(47, 100%, 50%);
  --c-sunshine-yellow-10pc-lighter: hsl(46, 100%, 60%);
  --c-sunshine-yellow-30pc-lighter: hsl(48, 100%, 70%);
  --c-sunshine-yellow-off-colour: #e7d79b;
  --c-teal: #80c2ab;
  --c-white: #ffffff;
  --c-black: #222222;
  /* Secondary Palette */
  --c-sandy-fur: #faf5e6;
  --c-sandy-fur-light: #fcfaf5;
  --c-sandy-fur-alt: #f4efe0;
  --c-sandy-fur-60: rgba(250, 245, 230, 0.6);
  --c-sandy-fur-40: rgba(250, 245, 230, 0.4);
  --c-oatmeal: #d2c8b9;
  --c-oatmeal-light: #edeae4;
  --c-oatmeal-60: rgba(210, 200, 185, 0.6);
  --c-oatmeal-40: rgba(210, 200, 185, 0.4);
  --c-oatmeal-20: rgba(210, 200, 185, 0.2);
  --c-alto: #E0E0E0;
  --c-pampas: #F6F4F1;
  /* Supporting Palette */
  --c-pink-tongue: #fa9b9b;
  --c-pink-tongue-dark: #8d5265;
  --c-blue-sky: #8cd7e6;
  --c-blue-sky-dark: #6296a1;
  --c-green-grass: #dceb9b;
  --c-green-grass-dark: #99a46c;
  --c-dark-grey: #585858;
  --c-mid-grey: #d0d0d0;
  /* Supporting Text and Icon Palette */
  --c-midnight: #222222;
  --c-midnight-16pc-opacity: rgba(34, 34, 34, 0.16);
  --c-dawn: #595959;
  --c-mist: #dddddd;
  --c-mist-38pc-opacity: rgba(221, 221, 221, 0.38);
  --c-red: #ac2b3e;
  --c-brand-primary: rgb(255, 200, 0);
  --c-brand-primary-50: rgba(255, 200, 0, 0.5);
  --c-brand-primary-25: rgba(255, 200, 0, 0.25);
  --c-brand-secondary: rgb(250, 245, 230);
  --c-brand-secondary-50: rgba(250, 245, 230, 0.5);
  --c-brand-secondary-25: rgba(250, 245, 230, 0.25);
  --c-brand-tertiary: rgb(210, 200, 185);
  --c-brand-quaternary: rgb(34, 34, 34);
  --c-brand-quinary: rgb(221, 221, 221);
  /***** Grayscale Palette *****/
  --c-gray-100: hsl(0, 0%, 96%);
  --c-gray-200: hsl(0, 0%, 92%);
  --c-gray-300: hsl(0, 0%, 78%);
  --c-gray-400: hsl(0, 0%, 69%);
  --c-gray-500: hsl(0, 0%, 56%);
  --c-gray-600: hsl(0, 0%, 44%);
  --c-gray-700: hsl(0, 0%, 20%);
  --c-gray-800: hsl(0, 0%, 17%);
  /* // TODO will need to define all of these and use them where necessary */
  /***** Usage Semantics (design tokens) *****/
  --c-focus: var(--c-brand-primary);
  --c-active: var(--c-brand-primary);
  --c-separator: var(--c-brand-quaternary);
  --c-tooltip-bg: var(--c-brand-primary);
  --c-tooltip-border: var(--c-gray-800);
  --c-positive: var(--c-green);
  --c-negative: var(--c-red);
  --c-error: var(--c-red);
  --c-informational: var(--c-brand-quinary);
  --c-advisory: var(--c-amber);
  --c-body-bg: var(--c-white);
  --c-body: var(--c-brand-quaternary);
  --c-link: var(--c-brand-quaternary);
  --c-link-hover: var(--c-brand-quaternary);
  --c-link-disabled: var(--c-gray-600);
  --c-input-border-disabled: var(--c-brand-quaternary);
  --c-input-bg: var(--c-white);
  --c-input-bg-focus: var(--c-white);
  --c-input-bg-disabled: #efece3;
  --c-input-bg-active: var(--c-white);
  --c-input-border: var(--c-brand-quaternary);
  --c-input-border-focus: var(--c-brand-quaternary);
  --c-input-border-active: var(--c-brand-quaternary);
  --c-input-invalid: var(--c-negative);
  --c-input-bg-invalid: var(--c-white);
  --c-input-border-invalid: var(--c-negative);
  --c-input-helper-text: var(--c-brand-quaternary);
  --c-btn: var(--c-brand-quaternary);
  --c-btn-bg: transparent;
  --c-btn-border: var(--c-brand-quaternary);
  --c-btn-hover: var(--c-brand-quaternary);
  --c-btn-hover-bg: var(--c-gray-300);
  --c-btn-hover-border: var(--c-gray-300);
  --c-btn-disabled: var(--c-brand-quaternary);
  --c-btn-disabled-border: var(--c-gray-500);
  --c-btn-disabled-bg: var(--c-gray-500);
  --c-btn-primary: var(--c-white);
  --c-btn-primary-bg: var(--c-brand-quaternary);
  --c-btn-primary-border: var(--c-brand-quaternary);
  --c-btn-primary-hover: var(--c-brand-quaternary);
  --c-btn-primary-hover-bg: var(--c-white);
  --c-btn-primary-hover-border: var(--c-brand-quaternary);
  --c-btn-primary-disabled: var(--c-white);
  --c-btn-primary-disabled-border: var(--c-gray-700);
  --c-btn-primary-disabled-bg: var(--c-gray-700);
  --c-btn-important: var(--c-brand-quaternary);
  --c-btn-important-bg: var(--c-brand-primary);
  --c-btn-important-border: var(--c-brand-primary);
  --c-btn-important-hover: var(--c-brand-quaternary);
  --c-btn-important-hover-bg: var(--c-brand-primary-50);
  --c-btn-important-hover-border: var(--c-brand-primary-50);
  --c-btn-important-disabled: var(--c-brand-quaternary);
  --c-btn-important-disabled-border: var(--c-brand-primary-50);
  --c-btn-important-disabled-bg: var(--c-brand-primary-50);
  --c-btn-tertiary: var(--c-link);
  --c-btn-tertiary-bg: transparent;
  --c-btn-tertiary-border: transparent;
  --c-btn-tertiary-hover: var(--c-gray-600);
  --c-btn-tertiary-hover-border: var(--c-gray-600);
  --c-btn-tertiary-hover-bg: transparent;
  --c-btn-tertiary-disabled: var(--c-link-disabled);
  --c-btn-tertiary-disabled-border: transparent;
  --c-btn-tertiary-disabled-bg: transparent;
  --c-overlay-opacity: 0.7;
  --c-overlay-bg-color: var(--c-brand-secondary);
  --c-cmp-checkbox-icon-bg-hover: var(--c-brand-secondary);
  --c-cmp-radio-icon-bg-hover: var(--c-brand-secondary);
  --c-input-placeholder: var(--c-gray-300);
  --c-input-counter: var(--c-grey);
}

.NDSSurveyResultsControls-module--breedFilter--f2ef7 {
  display: flex;
  align-items: center;
  gap: calc(var(--s-1) + var(--s-0-5));
  padding: var(--s-2) 0;
  border-top: var(--s-border-width) solid #E0E0E0;
  margin-top: var(--s-2);
}

.NDSSurveyResultsControls-module--breedFilterLabel--ecf10 {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bold);
  font-size: var(--t-body-s);
  color: var(--color-text-primary, var(--c-midnight));
  margin: 0;
}

.NDSSurveyResultsControls-module--breedFilterSelect--14bb0 {
  padding: var(--s-1) calc(var(--s-1) + var(--s-0-5));
  border: var(--s-border-width) solid #E0E0E0;
  border-radius: var(--s-border-radius-s);
  background-color: white;
  font-family: var(--font-family-work-sans);
  font-size: var(--t-body-s);
  color: var(--color-text-primary, var(--c-midnight));
  min-width: calc(var(--s-1) * 25);
  cursor: pointer;
}
.NDSSurveyResultsControls-module--breedFilterSelect--14bb0:focus {
  border-color: var(--c-brand-primary);
  outline: none;
  box-shadow: 0 0 0 calc(var(--s-0-5) * 4) var(--c-brand-primary-25);
}
.NDSSurveyResultsControls-module--breedFilterSelect--14bb0:hover {
  border-color: #C0C0C0;
}

.NDSSurveyResultsControls-module--breedFilterInfo--8e83c {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bold);
  font-size: var(--t-body-s);
  color: var(--c-brand-primary);
  background-color: var(--c-sandy-fur);
  padding: var(--s-0-5) var(--s-1);
  border-radius: var(--s-border-radius-xs);
  border: var(--s-border-width) solid var(--c-sunshine-yellow-30pc-lighter);
}

.NDSSurveyResultsControls-module--yearNavigation--7de8f {
  display: flex;
  gap: var(--s-1);
  align-items: center;
  width: 100%;
}

.NDSSurveyResultsControls-module--yearSelector--5a717 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1);
  padding: 0 calc(var(--s-2) + var(--s-0-5));
  height: calc(var(--s-5) + var(--s-0-5));
  background-color: #F5F5F5;
  border: var(--s-border-width) solid #E0E0E0;
  border-radius: var(--s-1);
  flex: 1 1;
}

.NDSSurveyResultsControls-module--chevronButton--820a5 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s-3);
  height: var(--s-3);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.NDSSurveyResultsControls-module--chevronButton--820a5:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.1);
}
.NDSSurveyResultsControls-module--chevronButton--820a5:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.NDSSurveyResultsControls-module--chevronButton--820a5 svg {
  /* Slightly smaller chevrons */
  width: calc(var(--s-1) + var(--s-0-5));
  height: calc(var(--s-2));
  fill: var(--c-midnight);
}

.NDSSurveyResultsControls-module--currentYear--d5307 {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  text-align: center;
  color: var(--c-midnight);
  min-width: calc(var(--s-7) + var(--s-0-5));
}

.NDSSurveyResultsControls-module--pauseButton--4f115 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--s-5) + var(--s-0-5));
  height: calc(var(--s-5) + var(--s-0-5));
  background-color: var(--c-sandy-fur-light);
  border: var(--s-border-width) solid var(--c-alto);
  border-radius: 50%;
  cursor: pointer;
}

.NDSSurveyResultsControls-module--pauseIcon--950a5 {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  color: var(--c-midnight);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
:root {
  --font-family-fido: "Fido", Arial;
  --font-family-work-sans: "Work Sans", "Arial";
  --font-family-m-plus-1p: "M PLUS 1p", Arial;
  --font-family-m-plus-1p-check: "M PLUS 1p Check", Arial;
  --font-family: var(--font-family-work-sans);
  --font-family-heading: var(--font-family-fido);
  --fw-bolder: 700;
  --fw-bold: 600;
  --fw-medium: 500;
  --fw-normal: 400;
  --fw-light: 300;
  --fw-lighter: 200;
  --t-base: 16;
  /** Design token **/
  --t-body-xxs: calc(10rem / var(--t-base));
  --t-body-xs: calc(12rem / var(--t-base));
  --t-body-s: calc(14rem / var(--t-base));
  --t-body-m: 1rem;
  --t-body-l: calc(20rem / var(--t-base));
  --t-body-xl: calc(22rem / var(--t-base));
  --t-body-xxl: calc(28rem / var(--t-base));
  --t-heading-xxs: calc(14rem / var(--t-base));
  --t-heading-xs: calc(18rem / var(--t-base));
  --t-heading-s: calc(22rem / var(--t-base));
  --t-heading-m: calc(24rem / var(--t-base));
  --t-heading-l: calc(28rem / var(--t-base));
  --t-heading-xl: calc(36rem / var(--t-base));
  --t-heading-xxl: calc(56rem / var(--t-base));
  --lh-body-xxs: calc(calc(10rem / var(--t-base)) * 1.6);
  --lh-body-xs: calc(calc(12rem / var(--t-base)) * 1.6);
  --lh-body-s: calc(calc(14rem / var(--t-base)) * 1.6);
  --lh-body-m: calc(1rem * 1.6);
  --lh-body-l: calc(calc(20rem / var(--t-base)) * 1.6);
  --lh-body-xl: calc(calc(22rem / var(--t-base)) * 1.6);
  --lh-body-xxl: calc(calc(28rem / var(--t-base)) * 1.6);
  --lh-heading-xxs: calc(calc(22rem / var(--t-base)) * 1.1);
  --lh-heading-xs: calc(calc(28rem / var(--t-base)) * 1.1);
  --lh-heading-s: calc(calc(34rem / var(--t-base)) * 1.1);
  --lh-heading-m: calc(calc(36rem / var(--t-base)) * 1.1);
  --lh-heading-l: calc(calc(42rem / var(--t-base)) * 1.1);
  --lh-heading-xl: calc(calc(54rem / var(--t-base)) * 1.1);
  --lh-heading-xxl: calc(calc(64rem / var(--t-base)) * 1.1);
  --td-link-decoration: underline;
  --td-link-hover-decoration: none;
}

:root {
  /***** 
  Primary Brand Palette (SCSS variables for local scoping)
  Do not use these values directly if you can help it
  *****/
  /* Primary Palette */
  --c-sunshine-yellow: hsl(47, 100%, 50%);
  --c-sunshine-yellow-10pc-lighter: hsl(46, 100%, 60%);
  --c-sunshine-yellow-30pc-lighter: hsl(48, 100%, 70%);
  --c-sunshine-yellow-off-colour: #e7d79b;
  --c-teal: #80c2ab;
  --c-white: #ffffff;
  --c-black: #222222;
  /* Secondary Palette */
  --c-sandy-fur: #faf5e6;
  --c-sandy-fur-light: #fcfaf5;
  --c-sandy-fur-alt: #f4efe0;
  --c-sandy-fur-60: rgba(250, 245, 230, 0.6);
  --c-sandy-fur-40: rgba(250, 245, 230, 0.4);
  --c-oatmeal: #d2c8b9;
  --c-oatmeal-light: #edeae4;
  --c-oatmeal-60: rgba(210, 200, 185, 0.6);
  --c-oatmeal-40: rgba(210, 200, 185, 0.4);
  --c-oatmeal-20: rgba(210, 200, 185, 0.2);
  --c-alto: #E0E0E0;
  --c-pampas: #F6F4F1;
  /* Supporting Palette */
  --c-pink-tongue: #fa9b9b;
  --c-pink-tongue-dark: #8d5265;
  --c-blue-sky: #8cd7e6;
  --c-blue-sky-dark: #6296a1;
  --c-green-grass: #dceb9b;
  --c-green-grass-dark: #99a46c;
  --c-dark-grey: #585858;
  --c-mid-grey: #d0d0d0;
  /* Supporting Text and Icon Palette */
  --c-midnight: #222222;
  --c-midnight-16pc-opacity: rgba(34, 34, 34, 0.16);
  --c-dawn: #595959;
  --c-mist: #dddddd;
  --c-mist-38pc-opacity: rgba(221, 221, 221, 0.38);
  --c-red: #ac2b3e;
  --c-brand-primary: rgb(255, 200, 0);
  --c-brand-primary-50: rgba(255, 200, 0, 0.5);
  --c-brand-primary-25: rgba(255, 200, 0, 0.25);
  --c-brand-secondary: rgb(250, 245, 230);
  --c-brand-secondary-50: rgba(250, 245, 230, 0.5);
  --c-brand-secondary-25: rgba(250, 245, 230, 0.25);
  --c-brand-tertiary: rgb(210, 200, 185);
  --c-brand-quaternary: rgb(34, 34, 34);
  --c-brand-quinary: rgb(221, 221, 221);
  /***** Grayscale Palette *****/
  --c-gray-100: hsl(0, 0%, 96%);
  --c-gray-200: hsl(0, 0%, 92%);
  --c-gray-300: hsl(0, 0%, 78%);
  --c-gray-400: hsl(0, 0%, 69%);
  --c-gray-500: hsl(0, 0%, 56%);
  --c-gray-600: hsl(0, 0%, 44%);
  --c-gray-700: hsl(0, 0%, 20%);
  --c-gray-800: hsl(0, 0%, 17%);
  /* // TODO will need to define all of these and use them where necessary */
  /***** Usage Semantics (design tokens) *****/
  --c-focus: var(--c-brand-primary);
  --c-active: var(--c-brand-primary);
  --c-separator: var(--c-brand-quaternary);
  --c-tooltip-bg: var(--c-brand-primary);
  --c-tooltip-border: var(--c-gray-800);
  --c-positive: var(--c-green);
  --c-negative: var(--c-red);
  --c-error: var(--c-red);
  --c-informational: var(--c-brand-quinary);
  --c-advisory: var(--c-amber);
  --c-body-bg: var(--c-white);
  --c-body: var(--c-brand-quaternary);
  --c-link: var(--c-brand-quaternary);
  --c-link-hover: var(--c-brand-quaternary);
  --c-link-disabled: var(--c-gray-600);
  --c-input-border-disabled: var(--c-brand-quaternary);
  --c-input-bg: var(--c-white);
  --c-input-bg-focus: var(--c-white);
  --c-input-bg-disabled: #efece3;
  --c-input-bg-active: var(--c-white);
  --c-input-border: var(--c-brand-quaternary);
  --c-input-border-focus: var(--c-brand-quaternary);
  --c-input-border-active: var(--c-brand-quaternary);
  --c-input-invalid: var(--c-negative);
  --c-input-bg-invalid: var(--c-white);
  --c-input-border-invalid: var(--c-negative);
  --c-input-helper-text: var(--c-brand-quaternary);
  --c-btn: var(--c-brand-quaternary);
  --c-btn-bg: transparent;
  --c-btn-border: var(--c-brand-quaternary);
  --c-btn-hover: var(--c-brand-quaternary);
  --c-btn-hover-bg: var(--c-gray-300);
  --c-btn-hover-border: var(--c-gray-300);
  --c-btn-disabled: var(--c-brand-quaternary);
  --c-btn-disabled-border: var(--c-gray-500);
  --c-btn-disabled-bg: var(--c-gray-500);
  --c-btn-primary: var(--c-white);
  --c-btn-primary-bg: var(--c-brand-quaternary);
  --c-btn-primary-border: var(--c-brand-quaternary);
  --c-btn-primary-hover: var(--c-brand-quaternary);
  --c-btn-primary-hover-bg: var(--c-white);
  --c-btn-primary-hover-border: var(--c-brand-quaternary);
  --c-btn-primary-disabled: var(--c-white);
  --c-btn-primary-disabled-border: var(--c-gray-700);
  --c-btn-primary-disabled-bg: var(--c-gray-700);
  --c-btn-important: var(--c-brand-quaternary);
  --c-btn-important-bg: var(--c-brand-primary);
  --c-btn-important-border: var(--c-brand-primary);
  --c-btn-important-hover: var(--c-brand-quaternary);
  --c-btn-important-hover-bg: var(--c-brand-primary-50);
  --c-btn-important-hover-border: var(--c-brand-primary-50);
  --c-btn-important-disabled: var(--c-brand-quaternary);
  --c-btn-important-disabled-border: var(--c-brand-primary-50);
  --c-btn-important-disabled-bg: var(--c-brand-primary-50);
  --c-btn-tertiary: var(--c-link);
  --c-btn-tertiary-bg: transparent;
  --c-btn-tertiary-border: transparent;
  --c-btn-tertiary-hover: var(--c-gray-600);
  --c-btn-tertiary-hover-border: var(--c-gray-600);
  --c-btn-tertiary-hover-bg: transparent;
  --c-btn-tertiary-disabled: var(--c-link-disabled);
  --c-btn-tertiary-disabled-border: transparent;
  --c-btn-tertiary-disabled-bg: transparent;
  --c-overlay-opacity: 0.7;
  --c-overlay-bg-color: var(--c-brand-secondary);
  --c-cmp-checkbox-icon-bg-hover: var(--c-brand-secondary);
  --c-cmp-radio-icon-bg-hover: var(--c-brand-secondary);
  --c-input-placeholder: var(--c-gray-300);
  --c-input-counter: var(--c-grey);
}

.NDSSurveyResultsTabs-module--tabsContainer--d4208 {
  display: flex;
  width: 100%;
}

.NDSSurveyResultsTabs-module--tabsList--9f074 {
  display: flex;
  width: 100%;
  gap: 0;
  border-bottom: 1px solid var(--c-alto);
  position: relative;
}

.NDSSurveyResultsTabs-module--tabButton--43669 {
  flex: 1 1;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--s-2) var(--s-3);
  height: calc(var(--s-5) + var(--s-0-5));
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  color: var(--c-dawn);
  position: relative;
  transition: all 0.2s ease;
  box-shadow: none;
  outline: none;
}
.NDSSurveyResultsTabs-module--tabButton--43669:hover {
  background-color: var(--c-pampas);
  border: none;
  outline: none;
}
.NDSSurveyResultsTabs-module--tabButton--43669:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.NDSSurveyResultsTabs-module--tabButton--43669:active {
  border: none;
  outline: none;
  box-shadow: none;
}
.NDSSurveyResultsTabs-module--tabButton--43669[aria-pressed=true] {
  color: var(--c-midnight);
  background: var(--c-gray-200);
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}
.NDSSurveyResultsTabs-module--tabButton--43669[aria-pressed=true]:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.NDSSurveyResultsTabs-module--tabButton--43669[aria-pressed=true]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: var(--s-0-5);
  background-color: var(--c-brand-primary);
}
@media screen and (max-width: 37.5rem) {
  .NDSSurveyResultsTabs-module--tabButton--43669 {
    padding: var(--s-1) var(--s-2);
    font-size: var(--t-body-xs);
    line-height: 1.2;
    height: calc(var(--s-5) + var(--s-0-5));
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.StandardSignPostCard-module--cardcontainer--4e8db {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  background-color: var(--c-white);
  height: 100%;
}
@supports (-webkit-touch-callout: none) {
  .StandardSignPostCard-module--cardcontainer--4e8db {
    align-self: stretch;
    height: auto;
  }
}
.StandardSignPostCard-module--cardcontainer--4e8db .StandardSignPostCard-module--verticalcardborder--f3064 {
  position: absolute;
  height: 0;
  width: 0;
  display: none;
}
@media ((min-width: 37.5rem) and (max-width: 56.25rem)) {
  .StandardSignPostCard-module--cardcontainer--4e8db {
    flex-direction: row;
    grid-column: span 2;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db .StandardSignPostCard-module--cardimagecontainer--812c9 {
    position: relative;
    min-width: 40%;
    max-width: 40%;
    inset-block-start: 0;
    height: unset;
    min-height: 100%;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db .StandardSignPostCard-module--cardimagecontainer--812c9 picture {
    display: flex;
    height: 100%;
    width: 100%;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db .StandardSignPostCard-module--cardimage--1eecb {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db .StandardSignPostCard-module--cardbordercontainer--3e502 {
    position: absolute;
    inset-block: calc(var(--s-0-5) * -1);
    inset-inline-end: calc(var(--s-0-5) * -1);
    width: 100%;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db .StandardSignPostCard-module--cardborder--c6822 {
    width: 0;
    height: 0;
    position: absolute;
    display: none;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db .StandardSignPostCard-module--verticalcardborder--f3064 {
    position: absolute;
    display: flex;
    height: 100%;
    inset-inline-end: 0;
    width: auto;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db .StandardSignPostCard-module--carddetails--f3497 {
    justify-content: center;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db .StandardSignPostCard-module--cardcta--fe061 {
    margin-block-start: var(--s-2);
  }
}
.StandardSignPostCard-module--cardcontainer--4e8db {
  /* Orphaned card - needs to be nested as we are targeting the classes on the selectors */
}
@media (min-width: 32.5rem) {
  .StandardSignPostCard-module--cardcontainer--4e8db:not(.StandardSignPostCard-module--withinThreeColLayout--9907a):last-child:nth-child(odd) {
    flex-direction: row;
    grid-column: span 2;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db:not(.StandardSignPostCard-module--withinThreeColLayout--9907a):last-child:nth-child(odd) .StandardSignPostCard-module--cardimagecontainer--812c9 {
    position: relative;
    min-width: 40%;
    max-width: 40%;
    inset-block-start: 0;
    height: unset;
    min-height: 100%;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db:not(.StandardSignPostCard-module--withinThreeColLayout--9907a):last-child:nth-child(odd) .StandardSignPostCard-module--cardimagecontainer--812c9 picture {
    display: flex;
    height: 100%;
    width: 100%;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db:not(.StandardSignPostCard-module--withinThreeColLayout--9907a):last-child:nth-child(odd) .StandardSignPostCard-module--cardimage--1eecb {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db:not(.StandardSignPostCard-module--withinThreeColLayout--9907a):last-child:nth-child(odd) .StandardSignPostCard-module--cardbordercontainer--3e502 {
    position: absolute;
    inset-block: calc(var(--s-0-5) * -1);
    inset-inline-end: calc(var(--s-0-5) * -1);
    width: 100%;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db:not(.StandardSignPostCard-module--withinThreeColLayout--9907a):last-child:nth-child(odd) .StandardSignPostCard-module--cardborder--c6822 {
    width: 0;
    height: 0;
    position: absolute;
    display: none;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db:not(.StandardSignPostCard-module--withinThreeColLayout--9907a):last-child:nth-child(odd) .StandardSignPostCard-module--verticalcardborder--f3064 {
    position: absolute;
    display: flex;
    height: 100%;
    inset-inline-end: 0;
    width: auto;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db:not(.StandardSignPostCard-module--withinThreeColLayout--9907a):last-child:nth-child(odd) .StandardSignPostCard-module--carddetails--f3497 {
    justify-content: center;
  }
  .StandardSignPostCard-module--cardcontainer--4e8db:not(.StandardSignPostCard-module--withinThreeColLayout--9907a):last-child:nth-child(odd) .StandardSignPostCard-module--cardcta--fe061 {
    margin-block-start: var(--s-2);
  }
}

.StandardSignPostCard-module--cardcontainersquare--b8141 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  background-color: var(--c-white);
  min-height: min(100%, var(--s-1) * 65);
  max-height: min(100%, var(--s-1) * 75);
}
.StandardSignPostCard-module--cardcontainersquare--b8141 .StandardSignPostCard-module--verticalcardborder--f3064 {
  position: absolute;
  height: 0;
  width: 0;
  display: none;
}

.StandardSignPostCard-module--cardimagecontainer--812c9 {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: var(--c-sunshine-yellow);
}

.StandardSignPostCard-module--cardimage--1eecb {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.StandardSignPostCard-module--cardbordercontainer--3e502 {
  position: absolute;
  inset-block-end: calc(var(--s-0-5) * -1);
  width: 100%;
}

.StandardSignPostCard-module--cardborder--c6822 {
  width: 100%;
}

.StandardSignPostCard-module--carddetails--f3497 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-2);
  row-gap: var(--s-1);
  box-sizing: border-box;
  flex: 1 1;
}

.StandardSignPostCard-module--cardtitle--2201a {
  font-size: var(--t-heading-s);
  line-height: var(--lh-heading-s);
}

.StandardSignPostCard-module--cardtext--978e4 p {
  color: var(--c-dawn);
}

.StandardSignPostCard-module--cardcta--fe061 {
  margin-block-start: auto;
}

.StandardSignPostCard-module--date--a30c2 {
  position: relative;
  padding-inline-start: var(--s-1);
  padding-block-end: var(--s-1);
}
.yt-lite {
	background-color: #000;
	position: relative;
	display: block;
	contain: content;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	cursor: pointer;
	border: 2px solid red !important;
}

.yt-lite.lyt-activated::before {
	content: "";
	box-sizing: content-box;
	display: block;
	position: absolute;
	top: 0;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
	background-position: center;
	background-repeat: no-repeat;
	height: 60px;
	padding-bottom: 50px;
	width: 100%;
	transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.yt-lite::after {
	content: "";
	display: block;
	padding-bottom: var(--aspect-ratio);
}
.yt-lite > iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.yt-lite > .lty-playbtn {
	width: 70px;
	height: 46px;
	background-color: #212121 !important;
	z-index: 1;
	opacity: 0.8;
	border-radius: 14%;
	transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.yt-lite:hover > .lty-playbtn {
	background-color: red;
	opacity: 1;
}
.yt-lite > .lty-playbtn::before {
	content: "";
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: 11px 0 11px 19px;
}
.yt-lite > .lty-playbtn,
.yt-lite > .lty-playbtn::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}
.yt-lite.lyt-activated {
	cursor: unset;
}
.yt-lite.lyt-activated::before,
.yt-lite.lyt-activated > .lty-playbtn {
	opacity: 0;
	pointer-events: none;
}

/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroTripleCarousel-module--dogbiointrocontainer--d272d {
  position: relative;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: auto;
  background-color: var(--c-sunshine-yellow);
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "main" "pagination";
  grid-template-rows: auto var(--s-4);
  gap: var(--s-1);
}
@media (min-width: 64rem) {
  .IntroTripleCarousel-module--dogbiointrocontainer--d272d {
    padding: var(--s-6) var(--s-4) var(--s-4);
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "main image1" "main image2" "pagination pagination";
    grid-template-rows: calc(var(--s-10) * 3) calc(var(--s-10) * 3) 0;
    gap: var(--s-4);
  }
}

.IntroTripleCarousel-module--singleimagecontainer--84b36 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--c-sunshine-yellow);
  gap: var(--s-2);
}
@media (min-width: 64rem) {
  .IntroTripleCarousel-module--singleimagecontainer--84b36 {
    padding: var(--s-6) var(--s-4) var(--s-4);
  }
}

.IntroTripleCarousel-module--defaultimage--86b16 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--s-2);
  overflow: hidden;
}

.IntroTripleCarousel-module--mainimagecontainer--d3d1c {
  position: relative;
  grid-area: main;
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4/3;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 64rem) {
  .IntroTripleCarousel-module--mainimagecontainer--d3d1c {
    margin: var(--s-4) auto 0;
    box-shadow: var(--sh-box-card);
    border-radius: var(--s-2);
  }
}

.IntroTripleCarousel-module--carouselimagecontainer--b09eb {
  position: relative;
  grid-area: main;
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4/3;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 64rem) {
  .IntroTripleCarousel-module--carouselimagecontainer--b09eb {
    aspect-ratio: unset;
    margin: 0 auto;
    box-shadow: var(--sh-box-card);
    border-radius: var(--s-2);
  }
}

.IntroTripleCarousel-module--onlyimagecontainer--234a4 {
  position: relative;
  grid-area: main;
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  aspect-ratio: 4/3;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 64rem) {
  .IntroTripleCarousel-module--onlyimagecontainer--234a4 {
    box-shadow: var(--sh-box-card);
    border-radius: var(--s-2);
  }
}

.IntroTripleCarousel-module--previewimage1container--f7c5a {
  display: none;
}
@media (min-width: 64rem) {
  .IntroTripleCarousel-module--previewimage1container--f7c5a {
    box-shadow: var(--sh-box-card);
    grid-area: image1;
    display: flex;
    border-radius: var(--s-2);
    overflow: hidden;
  }
}

.IntroTripleCarousel-module--previewimage2container--acdb8 {
  display: none;
}
@media (min-width: 64rem) {
  .IntroTripleCarousel-module--previewimage2container--acdb8 {
    box-shadow: var(--sh-box-card);
    grid-area: image2;
    display: flex;
    border-radius: var(--s-2);
    overflow: hidden;
  }
}

.IntroTripleCarousel-module--paginationcontainer--2b640 {
  position: relative;
  grid-area: pagination;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: var(--z-toast);
  width: 100%;
}

.IntroTripleCarousel-module--mediawrapper--8182c {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.IntroTripleCarousel-module--mediawrapper--8182c div,
.IntroTripleCarousel-module--mediawrapper--8182c img,
.IntroTripleCarousel-module--mediawrapper--8182c iframe {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.IntroTripleCarousel-module--video--ee22f {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.IntroTripleCarousel-module--expand--2e87b {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--s-0-5);
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
  height: var(--s-4);
  width: var(--s-4);
  background-color: var(--c-midnight);
  opacity: 0.8;
  padding: var(--s-0-5);
  box-sizing: border-box;
  z-index: var(--z-app-shell);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
:root {
  --font-family-fido: "Fido", Arial;
  --font-family-work-sans: "Work Sans", "Arial";
  --font-family-m-plus-1p: "M PLUS 1p", Arial;
  --font-family-m-plus-1p-check: "M PLUS 1p Check", Arial;
  --font-family: var(--font-family-work-sans);
  --font-family-heading: var(--font-family-fido);
  --fw-bolder: 700;
  --fw-bold: 600;
  --fw-medium: 500;
  --fw-normal: 400;
  --fw-light: 300;
  --fw-lighter: 200;
  --t-base: 16;
  /** Design token **/
  --t-body-xxs: calc(10rem / var(--t-base));
  --t-body-xs: calc(12rem / var(--t-base));
  --t-body-s: calc(14rem / var(--t-base));
  --t-body-m: 1rem;
  --t-body-l: calc(20rem / var(--t-base));
  --t-body-xl: calc(22rem / var(--t-base));
  --t-body-xxl: calc(28rem / var(--t-base));
  --t-heading-xxs: calc(14rem / var(--t-base));
  --t-heading-xs: calc(18rem / var(--t-base));
  --t-heading-s: calc(22rem / var(--t-base));
  --t-heading-m: calc(24rem / var(--t-base));
  --t-heading-l: calc(28rem / var(--t-base));
  --t-heading-xl: calc(36rem / var(--t-base));
  --t-heading-xxl: calc(56rem / var(--t-base));
  --lh-body-xxs: calc(calc(10rem / var(--t-base)) * 1.6);
  --lh-body-xs: calc(calc(12rem / var(--t-base)) * 1.6);
  --lh-body-s: calc(calc(14rem / var(--t-base)) * 1.6);
  --lh-body-m: calc(1rem * 1.6);
  --lh-body-l: calc(calc(20rem / var(--t-base)) * 1.6);
  --lh-body-xl: calc(calc(22rem / var(--t-base)) * 1.6);
  --lh-body-xxl: calc(calc(28rem / var(--t-base)) * 1.6);
  --lh-heading-xxs: calc(calc(22rem / var(--t-base)) * 1.1);
  --lh-heading-xs: calc(calc(28rem / var(--t-base)) * 1.1);
  --lh-heading-s: calc(calc(34rem / var(--t-base)) * 1.1);
  --lh-heading-m: calc(calc(36rem / var(--t-base)) * 1.1);
  --lh-heading-l: calc(calc(42rem / var(--t-base)) * 1.1);
  --lh-heading-xl: calc(calc(54rem / var(--t-base)) * 1.1);
  --lh-heading-xxl: calc(calc(64rem / var(--t-base)) * 1.1);
  --td-link-decoration: underline;
  --td-link-hover-decoration: none;
}

:root {
  /***** 
  Primary Brand Palette (SCSS variables for local scoping)
  Do not use these values directly if you can help it
  *****/
  /* Primary Palette */
  --c-sunshine-yellow: hsl(47, 100%, 50%);
  --c-sunshine-yellow-10pc-lighter: hsl(46, 100%, 60%);
  --c-sunshine-yellow-30pc-lighter: hsl(48, 100%, 70%);
  --c-sunshine-yellow-off-colour: #e7d79b;
  --c-teal: #80c2ab;
  --c-white: #ffffff;
  --c-black: #222222;
  /* Secondary Palette */
  --c-sandy-fur: #faf5e6;
  --c-sandy-fur-light: #fcfaf5;
  --c-sandy-fur-alt: #f4efe0;
  --c-sandy-fur-60: rgba(250, 245, 230, 0.6);
  --c-sandy-fur-40: rgba(250, 245, 230, 0.4);
  --c-oatmeal: #d2c8b9;
  --c-oatmeal-light: #edeae4;
  --c-oatmeal-60: rgba(210, 200, 185, 0.6);
  --c-oatmeal-40: rgba(210, 200, 185, 0.4);
  --c-oatmeal-20: rgba(210, 200, 185, 0.2);
  --c-alto: #E0E0E0;
  --c-pampas: #F6F4F1;
  /* Supporting Palette */
  --c-pink-tongue: #fa9b9b;
  --c-pink-tongue-dark: #8d5265;
  --c-blue-sky: #8cd7e6;
  --c-blue-sky-dark: #6296a1;
  --c-green-grass: #dceb9b;
  --c-green-grass-dark: #99a46c;
  --c-dark-grey: #585858;
  --c-mid-grey: #d0d0d0;
  /* Supporting Text and Icon Palette */
  --c-midnight: #222222;
  --c-midnight-16pc-opacity: rgba(34, 34, 34, 0.16);
  --c-dawn: #595959;
  --c-mist: #dddddd;
  --c-mist-38pc-opacity: rgba(221, 221, 221, 0.38);
  --c-red: #ac2b3e;
  --c-brand-primary: rgb(255, 200, 0);
  --c-brand-primary-50: rgba(255, 200, 0, 0.5);
  --c-brand-primary-25: rgba(255, 200, 0, 0.25);
  --c-brand-secondary: rgb(250, 245, 230);
  --c-brand-secondary-50: rgba(250, 245, 230, 0.5);
  --c-brand-secondary-25: rgba(250, 245, 230, 0.25);
  --c-brand-tertiary: rgb(210, 200, 185);
  --c-brand-quaternary: rgb(34, 34, 34);
  --c-brand-quinary: rgb(221, 221, 221);
  /***** Grayscale Palette *****/
  --c-gray-100: hsl(0, 0%, 96%);
  --c-gray-200: hsl(0, 0%, 92%);
  --c-gray-300: hsl(0, 0%, 78%);
  --c-gray-400: hsl(0, 0%, 69%);
  --c-gray-500: hsl(0, 0%, 56%);
  --c-gray-600: hsl(0, 0%, 44%);
  --c-gray-700: hsl(0, 0%, 20%);
  --c-gray-800: hsl(0, 0%, 17%);
  /* // TODO will need to define all of these and use them where necessary */
  /***** Usage Semantics (design tokens) *****/
  --c-focus: var(--c-brand-primary);
  --c-active: var(--c-brand-primary);
  --c-separator: var(--c-brand-quaternary);
  --c-tooltip-bg: var(--c-brand-primary);
  --c-tooltip-border: var(--c-gray-800);
  --c-positive: var(--c-green);
  --c-negative: var(--c-red);
  --c-error: var(--c-red);
  --c-informational: var(--c-brand-quinary);
  --c-advisory: var(--c-amber);
  --c-body-bg: var(--c-white);
  --c-body: var(--c-brand-quaternary);
  --c-link: var(--c-brand-quaternary);
  --c-link-hover: var(--c-brand-quaternary);
  --c-link-disabled: var(--c-gray-600);
  --c-input-border-disabled: var(--c-brand-quaternary);
  --c-input-bg: var(--c-white);
  --c-input-bg-focus: var(--c-white);
  --c-input-bg-disabled: #efece3;
  --c-input-bg-active: var(--c-white);
  --c-input-border: var(--c-brand-quaternary);
  --c-input-border-focus: var(--c-brand-quaternary);
  --c-input-border-active: var(--c-brand-quaternary);
  --c-input-invalid: var(--c-negative);
  --c-input-bg-invalid: var(--c-white);
  --c-input-border-invalid: var(--c-negative);
  --c-input-helper-text: var(--c-brand-quaternary);
  --c-btn: var(--c-brand-quaternary);
  --c-btn-bg: transparent;
  --c-btn-border: var(--c-brand-quaternary);
  --c-btn-hover: var(--c-brand-quaternary);
  --c-btn-hover-bg: var(--c-gray-300);
  --c-btn-hover-border: var(--c-gray-300);
  --c-btn-disabled: var(--c-brand-quaternary);
  --c-btn-disabled-border: var(--c-gray-500);
  --c-btn-disabled-bg: var(--c-gray-500);
  --c-btn-primary: var(--c-white);
  --c-btn-primary-bg: var(--c-brand-quaternary);
  --c-btn-primary-border: var(--c-brand-quaternary);
  --c-btn-primary-hover: var(--c-brand-quaternary);
  --c-btn-primary-hover-bg: var(--c-white);
  --c-btn-primary-hover-border: var(--c-brand-quaternary);
  --c-btn-primary-disabled: var(--c-white);
  --c-btn-primary-disabled-border: var(--c-gray-700);
  --c-btn-primary-disabled-bg: var(--c-gray-700);
  --c-btn-important: var(--c-brand-quaternary);
  --c-btn-important-bg: var(--c-brand-primary);
  --c-btn-important-border: var(--c-brand-primary);
  --c-btn-important-hover: var(--c-brand-quaternary);
  --c-btn-important-hover-bg: var(--c-brand-primary-50);
  --c-btn-important-hover-border: var(--c-brand-primary-50);
  --c-btn-important-disabled: var(--c-brand-quaternary);
  --c-btn-important-disabled-border: var(--c-brand-primary-50);
  --c-btn-important-disabled-bg: var(--c-brand-primary-50);
  --c-btn-tertiary: var(--c-link);
  --c-btn-tertiary-bg: transparent;
  --c-btn-tertiary-border: transparent;
  --c-btn-tertiary-hover: var(--c-gray-600);
  --c-btn-tertiary-hover-border: var(--c-gray-600);
  --c-btn-tertiary-hover-bg: transparent;
  --c-btn-tertiary-disabled: var(--c-link-disabled);
  --c-btn-tertiary-disabled-border: transparent;
  --c-btn-tertiary-disabled-bg: transparent;
  --c-overlay-opacity: 0.7;
  --c-overlay-bg-color: var(--c-brand-secondary);
  --c-cmp-checkbox-icon-bg-hover: var(--c-brand-secondary);
  --c-cmp-radio-icon-bg-hover: var(--c-brand-secondary);
  --c-input-placeholder: var(--c-gray-300);
  --c-input-counter: var(--c-grey);
}

.NDSSurveyResultsChart-module--lineChartContainer--355ff {
  height: 100%;
}

@media screen and (max-width: 48rem) {
  .NDSSurveyResultsChart-module--lineChartContainer--355ff {
    height: calc(var(--s-10) * 3);
    min-height: calc(var(--s-10) * 3);
  }
}
.NDSSurveyResultsChart-module--lineChartLegend--a8b94 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-0-5);
  margin-top: var(--s-3);
}

.NDSSurveyResultsChart-module--legendItem--2b917 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  border: none;
  background: transparent;
  text-align: left;
  appearance: none;
  cursor: pointer;
  padding: 0;
  border-radius: calc(var(--s-border-radius-xs) * 0.5);
  transition: background-color 0.2s ease;
}
.NDSSurveyResultsChart-module--legendItem--2b917:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
.NDSSurveyResultsChart-module--legendItem--2b917:focus-visible {
  outline: none;
  box-shadow: none;
  border: none;
}
.NDSSurveyResultsChart-module--legendItem--2b917.NDSSurveyResultsChart-module--highlighted--1b6cb {
  background-color: var(--breed-color);
  border: none;
}
.NDSSurveyResultsChart-module--legendItem--2b917.NDSSurveyResultsChart-module--highlighted--1b6cb .NDSSurveyResultsChart-module--legendLabel--0fbe0 {
  color: var(--breed-text-color, #000000);
}

.NDSSurveyResultsChart-module--legendColorBox--bda6a {
  width: calc(var(--s-border-width) * 3);
  height: calc(var(--s-5) + --s-0-5);
  border-radius: 0;
  flex-shrink: 0;
}

.NDSSurveyResultsChart-module--legendLabel--0fbe0 {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-m);
  color: #000000;
}
.NDSSurveyResultsChart-module--legendLabel--0fbe0.NDSSurveyResultsChart-module--highlighted--1b6cb {
  color: var(--c-midnight);
}
.NDSSurveyResultsChart-module--legendLabel--0fbe0.NDSSurveyResultsChart-module--highlighted--1b6cb .NDSSurveyResultsChart-module--breedExtra--1f11e {
  color: var(var(--c-midnight));
}
@media screen and (max-width: 37.5rem) {
  .NDSSurveyResultsChart-module--legendLabel--0fbe0 {
    font-size: var(--t-body-s);
    line-height: 1.3;
  }
}
.NDSSurveyResultsChart-module--legendLabel--0fbe0 .NDSSurveyResultsChart-module--breedNameStack--02fac {
  display: inline-flex;
  flex-direction: column;
  gap: var(--s-0-5);
}
.NDSSurveyResultsChart-module--legendLabel--0fbe0 .NDSSurveyResultsChart-module--breedBase--b4001 {
  white-space: normal;
  word-break: break-word;
}
.NDSSurveyResultsChart-module--legendLabel--0fbe0 .NDSSurveyResultsChart-module--breedExtra--1f11e {
  font-weight: var(--fw-bold);
  font-size: var(--t-body-xs);
  line-height: 1.2;
  color: var(--c-midnight);
  white-space: normal;
  word-break: break-word;
}
@media screen and (max-width: 37.5rem) {
  .NDSSurveyResultsChart-module--legendLabel--0fbe0 .NDSSurveyResultsChart-module--breedExtra--1f11e {
    font-size: var(--t-body-xxs);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
:root {
  --font-family-fido: "Fido", Arial;
  --font-family-work-sans: "Work Sans", "Arial";
  --font-family-m-plus-1p: "M PLUS 1p", Arial;
  --font-family-m-plus-1p-check: "M PLUS 1p Check", Arial;
  --font-family: var(--font-family-work-sans);
  --font-family-heading: var(--font-family-fido);
  --fw-bolder: 700;
  --fw-bold: 600;
  --fw-medium: 500;
  --fw-normal: 400;
  --fw-light: 300;
  --fw-lighter: 200;
  --t-base: 16;
  /** Design token **/
  --t-body-xxs: calc(10rem / var(--t-base));
  --t-body-xs: calc(12rem / var(--t-base));
  --t-body-s: calc(14rem / var(--t-base));
  --t-body-m: 1rem;
  --t-body-l: calc(20rem / var(--t-base));
  --t-body-xl: calc(22rem / var(--t-base));
  --t-body-xxl: calc(28rem / var(--t-base));
  --t-heading-xxs: calc(14rem / var(--t-base));
  --t-heading-xs: calc(18rem / var(--t-base));
  --t-heading-s: calc(22rem / var(--t-base));
  --t-heading-m: calc(24rem / var(--t-base));
  --t-heading-l: calc(28rem / var(--t-base));
  --t-heading-xl: calc(36rem / var(--t-base));
  --t-heading-xxl: calc(56rem / var(--t-base));
  --lh-body-xxs: calc(calc(10rem / var(--t-base)) * 1.6);
  --lh-body-xs: calc(calc(12rem / var(--t-base)) * 1.6);
  --lh-body-s: calc(calc(14rem / var(--t-base)) * 1.6);
  --lh-body-m: calc(1rem * 1.6);
  --lh-body-l: calc(calc(20rem / var(--t-base)) * 1.6);
  --lh-body-xl: calc(calc(22rem / var(--t-base)) * 1.6);
  --lh-body-xxl: calc(calc(28rem / var(--t-base)) * 1.6);
  --lh-heading-xxs: calc(calc(22rem / var(--t-base)) * 1.1);
  --lh-heading-xs: calc(calc(28rem / var(--t-base)) * 1.1);
  --lh-heading-s: calc(calc(34rem / var(--t-base)) * 1.1);
  --lh-heading-m: calc(calc(36rem / var(--t-base)) * 1.1);
  --lh-heading-l: calc(calc(42rem / var(--t-base)) * 1.1);
  --lh-heading-xl: calc(calc(54rem / var(--t-base)) * 1.1);
  --lh-heading-xxl: calc(calc(64rem / var(--t-base)) * 1.1);
  --td-link-decoration: underline;
  --td-link-hover-decoration: none;
}

:root {
  /***** 
  Primary Brand Palette (SCSS variables for local scoping)
  Do not use these values directly if you can help it
  *****/
  /* Primary Palette */
  --c-sunshine-yellow: hsl(47, 100%, 50%);
  --c-sunshine-yellow-10pc-lighter: hsl(46, 100%, 60%);
  --c-sunshine-yellow-30pc-lighter: hsl(48, 100%, 70%);
  --c-sunshine-yellow-off-colour: #e7d79b;
  --c-teal: #80c2ab;
  --c-white: #ffffff;
  --c-black: #222222;
  /* Secondary Palette */
  --c-sandy-fur: #faf5e6;
  --c-sandy-fur-light: #fcfaf5;
  --c-sandy-fur-alt: #f4efe0;
  --c-sandy-fur-60: rgba(250, 245, 230, 0.6);
  --c-sandy-fur-40: rgba(250, 245, 230, 0.4);
  --c-oatmeal: #d2c8b9;
  --c-oatmeal-light: #edeae4;
  --c-oatmeal-60: rgba(210, 200, 185, 0.6);
  --c-oatmeal-40: rgba(210, 200, 185, 0.4);
  --c-oatmeal-20: rgba(210, 200, 185, 0.2);
  --c-alto: #E0E0E0;
  --c-pampas: #F6F4F1;
  /* Supporting Palette */
  --c-pink-tongue: #fa9b9b;
  --c-pink-tongue-dark: #8d5265;
  --c-blue-sky: #8cd7e6;
  --c-blue-sky-dark: #6296a1;
  --c-green-grass: #dceb9b;
  --c-green-grass-dark: #99a46c;
  --c-dark-grey: #585858;
  --c-mid-grey: #d0d0d0;
  /* Supporting Text and Icon Palette */
  --c-midnight: #222222;
  --c-midnight-16pc-opacity: rgba(34, 34, 34, 0.16);
  --c-dawn: #595959;
  --c-mist: #dddddd;
  --c-mist-38pc-opacity: rgba(221, 221, 221, 0.38);
  --c-red: #ac2b3e;
  --c-brand-primary: rgb(255, 200, 0);
  --c-brand-primary-50: rgba(255, 200, 0, 0.5);
  --c-brand-primary-25: rgba(255, 200, 0, 0.25);
  --c-brand-secondary: rgb(250, 245, 230);
  --c-brand-secondary-50: rgba(250, 245, 230, 0.5);
  --c-brand-secondary-25: rgba(250, 245, 230, 0.25);
  --c-brand-tertiary: rgb(210, 200, 185);
  --c-brand-quaternary: rgb(34, 34, 34);
  --c-brand-quinary: rgb(221, 221, 221);
  /***** Grayscale Palette *****/
  --c-gray-100: hsl(0, 0%, 96%);
  --c-gray-200: hsl(0, 0%, 92%);
  --c-gray-300: hsl(0, 0%, 78%);
  --c-gray-400: hsl(0, 0%, 69%);
  --c-gray-500: hsl(0, 0%, 56%);
  --c-gray-600: hsl(0, 0%, 44%);
  --c-gray-700: hsl(0, 0%, 20%);
  --c-gray-800: hsl(0, 0%, 17%);
  /* // TODO will need to define all of these and use them where necessary */
  /***** Usage Semantics (design tokens) *****/
  --c-focus: var(--c-brand-primary);
  --c-active: var(--c-brand-primary);
  --c-separator: var(--c-brand-quaternary);
  --c-tooltip-bg: var(--c-brand-primary);
  --c-tooltip-border: var(--c-gray-800);
  --c-positive: var(--c-green);
  --c-negative: var(--c-red);
  --c-error: var(--c-red);
  --c-informational: var(--c-brand-quinary);
  --c-advisory: var(--c-amber);
  --c-body-bg: var(--c-white);
  --c-body: var(--c-brand-quaternary);
  --c-link: var(--c-brand-quaternary);
  --c-link-hover: var(--c-brand-quaternary);
  --c-link-disabled: var(--c-gray-600);
  --c-input-border-disabled: var(--c-brand-quaternary);
  --c-input-bg: var(--c-white);
  --c-input-bg-focus: var(--c-white);
  --c-input-bg-disabled: #efece3;
  --c-input-bg-active: var(--c-white);
  --c-input-border: var(--c-brand-quaternary);
  --c-input-border-focus: var(--c-brand-quaternary);
  --c-input-border-active: var(--c-brand-quaternary);
  --c-input-invalid: var(--c-negative);
  --c-input-bg-invalid: var(--c-white);
  --c-input-border-invalid: var(--c-negative);
  --c-input-helper-text: var(--c-brand-quaternary);
  --c-btn: var(--c-brand-quaternary);
  --c-btn-bg: transparent;
  --c-btn-border: var(--c-brand-quaternary);
  --c-btn-hover: var(--c-brand-quaternary);
  --c-btn-hover-bg: var(--c-gray-300);
  --c-btn-hover-border: var(--c-gray-300);
  --c-btn-disabled: var(--c-brand-quaternary);
  --c-btn-disabled-border: var(--c-gray-500);
  --c-btn-disabled-bg: var(--c-gray-500);
  --c-btn-primary: var(--c-white);
  --c-btn-primary-bg: var(--c-brand-quaternary);
  --c-btn-primary-border: var(--c-brand-quaternary);
  --c-btn-primary-hover: var(--c-brand-quaternary);
  --c-btn-primary-hover-bg: var(--c-white);
  --c-btn-primary-hover-border: var(--c-brand-quaternary);
  --c-btn-primary-disabled: var(--c-white);
  --c-btn-primary-disabled-border: var(--c-gray-700);
  --c-btn-primary-disabled-bg: var(--c-gray-700);
  --c-btn-important: var(--c-brand-quaternary);
  --c-btn-important-bg: var(--c-brand-primary);
  --c-btn-important-border: var(--c-brand-primary);
  --c-btn-important-hover: var(--c-brand-quaternary);
  --c-btn-important-hover-bg: var(--c-brand-primary-50);
  --c-btn-important-hover-border: var(--c-brand-primary-50);
  --c-btn-important-disabled: var(--c-brand-quaternary);
  --c-btn-important-disabled-border: var(--c-brand-primary-50);
  --c-btn-important-disabled-bg: var(--c-brand-primary-50);
  --c-btn-tertiary: var(--c-link);
  --c-btn-tertiary-bg: transparent;
  --c-btn-tertiary-border: transparent;
  --c-btn-tertiary-hover: var(--c-gray-600);
  --c-btn-tertiary-hover-border: var(--c-gray-600);
  --c-btn-tertiary-hover-bg: transparent;
  --c-btn-tertiary-disabled: var(--c-link-disabled);
  --c-btn-tertiary-disabled-border: transparent;
  --c-btn-tertiary-disabled-bg: transparent;
  --c-overlay-opacity: 0.7;
  --c-overlay-bg-color: var(--c-brand-secondary);
  --c-cmp-checkbox-icon-bg-hover: var(--c-brand-secondary);
  --c-cmp-radio-icon-bg-hover: var(--c-brand-secondary);
  --c-input-placeholder: var(--c-gray-300);
  --c-input-counter: var(--c-grey);
}

.NDSSurveyResultsTable-module--tableViewMobile--5673d {
  width: 100%;
}

.NDSSurveyResultsTable-module--mobileTableContainer--10c6a {
  display: grid;
  grid-template-columns: calc(var(--s-10) * 2) 1fr;
  width: 100%;
  border: none;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--c-white);
  font-size: var(--t-body-s);
  position: relative;
}

.NDSSurveyResultsTable-module--fixedColumn--98a3e {
  grid-column: 1;
  background-color: var(--c-white);
  border-right: 1px solid var(--c-mid-grey);
  position: relative;
  z-index: 2;
}

.NDSSurveyResultsTable-module--fixedColumnHeader--88d6f {
  height: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-1);
  background-color: var(--c-white);
  border-bottom: none;
  font-weight: var(--fw-bolder);
}

.NDSSurveyResultsTable-module--breedColumnTitle--26b13 {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: --t-body-s;
  line-height: 1.4;
  color: var(--color-text-primary, var(--c-midnight));
}

.NDSSurveyResultsTable-module--rangeHint--ef421 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-0-75);
}

.NDSSurveyResultsTable-module--rangeText--5d19a {
  font-size: var(--t-body-xs);
  font-weight: var(--fw-bolder);
  color: var(--c-midnight);
}

.NDSSurveyResultsTable-module--rangeButton--0da86 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--s-0-5) / 2);
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
}

.NDSSurveyResultsTable-module--doubleArrow--ccb61 {
  display: inline-flex;
  align-items: center;
  gap: 0px;
}
.NDSSurveyResultsTable-module--doubleArrow--ccb61 svg + svg {
  margin-left: calc(var(--s-0-75) * -1);
}

.NDSSurveyResultsTable-module--fixedColumnBody--506d1 {
  display: flex;
  flex-direction: column;
  gap: var(--s-0-5);
}

.NDSSurveyResultsTable-module--fixedColumnRow--85bb8 {
  display: flex;
  align-items: center;
  height: var(--s-5);
  padding: 0 var(--s-1);
  border: none;
  border-left: calc(var(--s-border-width) * 3) solid var(--breed-color, var(--c-midnight));
  background: var(--c-white);
  text-align: left;
  appearance: none;
  cursor: pointer;
  border-bottom: none;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  position: relative;
}
.NDSSurveyResultsTable-module--fixedColumnRow--85bb8:hover {
  background-color: rgba(0, 0, 0, 0.03);
}
.NDSSurveyResultsTable-module--fixedColumnRow--85bb8:focus {
  outline: none;
}
.NDSSurveyResultsTable-module--fixedColumnRow--85bb8.NDSSurveyResultsTable-module--highlighted--ed51f {
  background-color: transparent;
  position: relative;
  z-index: 10;
}
.NDSSurveyResultsTable-module--fixedColumnRow--85bb8.NDSSurveyResultsTable-module--highlighted--ed51f .NDSSurveyResultsTable-module--breedName--1ea2f {
  color: var(--breed-text-color, var(--c-midnight));
  font-weight: var(--fw-bolder);
  position: relative;
  z-index: 11;
}
.NDSSurveyResultsTable-module--fixedColumnRow--85bb8.NDSSurveyResultsTable-module--highlighted--ed51f .NDSSurveyResultsTable-module--breedExtra--e6cc5 {
  color: var(--breed-text-color, var(--c-midnight));
  position: relative;
  z-index: 11;
}
.NDSSurveyResultsTable-module--fixedColumnRow--85bb8.NDSSurveyResultsTable-module--highlighted--ed51f:focus {
  outline: none;
}
.NDSSurveyResultsTable-module--fixedColumnRow--85bb8 .NDSSurveyResultsTable-module--breedName--1ea2f {
  font-size: var(--t-body-xs);
  line-height: 1.3;
  font-weight: var(--fw-bolder);
}
.NDSSurveyResultsTable-module--fixedColumnRow--85bb8 .NDSSurveyResultsTable-module--breedExtra--e6cc5 {
  font-size: --t-body-xs;
  line-height: 1.2;
  font-weight: var(--fw-bold);
}
.NDSSurveyResultsTable-module--fixedColumnRow--85bb8.NDSSurveyResultsTable-module--hoverLinked--59804:not(.NDSSurveyResultsTable-module--highlighted--ed51f) {
  background-color: rgba(89, 89, 89, 0.12);
}

.NDSSurveyResultsTable-module--scrollableArea--47598 {
  grid-column: 2;
  overflow-x: auto;
  background-color: var(--c-white);
  width: 100%;
}

.NDSSurveyResultsTable-module--scrollableHeader--c6144 {
  display: flex;
  height: var(--s-5);
  background-color: var(--c-white);
  border-bottom: none;
  flex-shrink: 0;
  width: fit-content;
  min-width: 100%;
}

.NDSSurveyResultsTable-module--yearHeaderCell--2d9e3 {
  flex: 0 0 calc(var(--s-10) * 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: none;
  background-color: var(--c-mid-grey);
}
.NDSSurveyResultsTable-module--yearHeaderCell--2d9e3:not(:last-child) {
  margin-right: var(--s-0-5);
}
.NDSSurveyResultsTable-module--yearHeaderCell--2d9e3:last-child {
  border-right: none;
}

.NDSSurveyResultsTable-module--yearHeaderText--6418e {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-s);
  line-height: 1.4;
  color: var(--color-text-primary, var(--c-midnight));
}

.NDSSurveyResultsTable-module--scrollableBody--ee469 {
  display: flex;
  flex-direction: column;
  gap: var(--s-0-5);
}

.NDSSurveyResultsTable-module--scrollableRow--84af8 {
  display: flex;
  height: var(--s-5);
  align-items: center;
  border: none;
  text-align: left;
  appearance: none;
  cursor: pointer;
  border-bottom: none;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  position: relative;
  width: fit-content;
  min-width: 100%;
}
.NDSSurveyResultsTable-module--scrollableRow--84af8:hover {
  background-color: rgba(0, 0, 0, 0.03);
}
.NDSSurveyResultsTable-module--scrollableRow--84af8:focus {
  outline: none;
}
.NDSSurveyResultsTable-module--scrollableRow--84af8.NDSSurveyResultsTable-module--highlighted--ed51f {
  background-color: transparent;
  position: relative;
  z-index: 10;
}
.NDSSurveyResultsTable-module--scrollableRow--84af8.NDSSurveyResultsTable-module--highlighted--ed51f .NDSSurveyResultsTable-module--tableCellValue--5dc2b {
  color: var(--breed-text-color, var(--c-midnight));
  font-weight: var(--fw-bolder);
  position: relative;
  z-index: 11;
}
.NDSSurveyResultsTable-module--scrollableRow--84af8.NDSSurveyResultsTable-module--highlighted--ed51f:focus {
  outline: none;
}
.NDSSurveyResultsTable-module--scrollableRow--84af8.NDSSurveyResultsTable-module--hoverLinked--59804:not(.NDSSurveyResultsTable-module--highlighted--ed51f) {
  background-color: rgba(89, 89, 89, 0.12);
}

.NDSSurveyResultsTable-module--scrollableCell--56145 {
  flex: 0 0 calc(var(--s-10) * 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: none;
  height: var(--s-5);
  box-sizing: border-box;
  margin-right: var(--s-0-5);
}
.NDSSurveyResultsTable-module--scrollableCell--56145:last-child {
  border-right: none;
  margin-right: 0;
}
.NDSSurveyResultsTable-module--scrollableCell--56145 .NDSSurveyResultsTable-module--tableCellValue--5dc2b {
  font-size: var(--t-body-xs);
  font-weight: var(--fw-bolder);
  line-height: 1.3;
}

.NDSSurveyResultsTable-module--mobileTableContainer--10c6a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
}

.NDSSurveyResultsTable-module--fixedColumnRow--85bb8.NDSSurveyResultsTable-module--highlighted--ed51f::before,
.NDSSurveyResultsTable-module--scrollableRow--84af8.NDSSurveyResultsTable-module--highlighted--ed51f::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--breed-color);
  z-index: -1;
}

.NDSSurveyResultsTable-module--scrollableRow--84af8.NDSSurveyResultsTable-module--highlighted--ed51f::before {
  width: 100%;
}

@media screen and (max-width: 37.5rem) {
  .NDSSurveyResultsTable-module--mobileTableContainer--10c6a .NDSSurveyResultsTable-module--fixedColumnRow--85bb8 .NDSSurveyResultsTable-module--breedName--1ea2f {
    font-size: var(--t-body-s);
    line-height: 1.4;
  }
  .NDSSurveyResultsTable-module--yearHeaderCell--2d9e3 {
    min-width: var(--s-7);
    width: var(--s-7);
    flex: 0 0 var(--s-7);
  }
  .NDSSurveyResultsTable-module--scrollableCell--56145 {
    min-width: var(--s-7);
    width: var(--s-7);
    flex: 0 0 var(--s-7);
    margin-right: var(--s-0-5);
  }
  .NDSSurveyResultsTable-module--scrollableCell--56145:last-child {
    margin-right: 0;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
:root {
  --font-family-fido: "Fido", Arial;
  --font-family-work-sans: "Work Sans", "Arial";
  --font-family-m-plus-1p: "M PLUS 1p", Arial;
  --font-family-m-plus-1p-check: "M PLUS 1p Check", Arial;
  --font-family: var(--font-family-work-sans);
  --font-family-heading: var(--font-family-fido);
  --fw-bolder: 700;
  --fw-bold: 600;
  --fw-medium: 500;
  --fw-normal: 400;
  --fw-light: 300;
  --fw-lighter: 200;
  --t-base: 16;
  /** Design token **/
  --t-body-xxs: calc(10rem / var(--t-base));
  --t-body-xs: calc(12rem / var(--t-base));
  --t-body-s: calc(14rem / var(--t-base));
  --t-body-m: 1rem;
  --t-body-l: calc(20rem / var(--t-base));
  --t-body-xl: calc(22rem / var(--t-base));
  --t-body-xxl: calc(28rem / var(--t-base));
  --t-heading-xxs: calc(14rem / var(--t-base));
  --t-heading-xs: calc(18rem / var(--t-base));
  --t-heading-s: calc(22rem / var(--t-base));
  --t-heading-m: calc(24rem / var(--t-base));
  --t-heading-l: calc(28rem / var(--t-base));
  --t-heading-xl: calc(36rem / var(--t-base));
  --t-heading-xxl: calc(56rem / var(--t-base));
  --lh-body-xxs: calc(calc(10rem / var(--t-base)) * 1.6);
  --lh-body-xs: calc(calc(12rem / var(--t-base)) * 1.6);
  --lh-body-s: calc(calc(14rem / var(--t-base)) * 1.6);
  --lh-body-m: calc(1rem * 1.6);
  --lh-body-l: calc(calc(20rem / var(--t-base)) * 1.6);
  --lh-body-xl: calc(calc(22rem / var(--t-base)) * 1.6);
  --lh-body-xxl: calc(calc(28rem / var(--t-base)) * 1.6);
  --lh-heading-xxs: calc(calc(22rem / var(--t-base)) * 1.1);
  --lh-heading-xs: calc(calc(28rem / var(--t-base)) * 1.1);
  --lh-heading-s: calc(calc(34rem / var(--t-base)) * 1.1);
  --lh-heading-m: calc(calc(36rem / var(--t-base)) * 1.1);
  --lh-heading-l: calc(calc(42rem / var(--t-base)) * 1.1);
  --lh-heading-xl: calc(calc(54rem / var(--t-base)) * 1.1);
  --lh-heading-xxl: calc(calc(64rem / var(--t-base)) * 1.1);
  --td-link-decoration: underline;
  --td-link-hover-decoration: none;
}

:root {
  /***** 
  Primary Brand Palette (SCSS variables for local scoping)
  Do not use these values directly if you can help it
  *****/
  /* Primary Palette */
  --c-sunshine-yellow: hsl(47, 100%, 50%);
  --c-sunshine-yellow-10pc-lighter: hsl(46, 100%, 60%);
  --c-sunshine-yellow-30pc-lighter: hsl(48, 100%, 70%);
  --c-sunshine-yellow-off-colour: #e7d79b;
  --c-teal: #80c2ab;
  --c-white: #ffffff;
  --c-black: #222222;
  /* Secondary Palette */
  --c-sandy-fur: #faf5e6;
  --c-sandy-fur-light: #fcfaf5;
  --c-sandy-fur-alt: #f4efe0;
  --c-sandy-fur-60: rgba(250, 245, 230, 0.6);
  --c-sandy-fur-40: rgba(250, 245, 230, 0.4);
  --c-oatmeal: #d2c8b9;
  --c-oatmeal-light: #edeae4;
  --c-oatmeal-60: rgba(210, 200, 185, 0.6);
  --c-oatmeal-40: rgba(210, 200, 185, 0.4);
  --c-oatmeal-20: rgba(210, 200, 185, 0.2);
  --c-alto: #E0E0E0;
  --c-pampas: #F6F4F1;
  /* Supporting Palette */
  --c-pink-tongue: #fa9b9b;
  --c-pink-tongue-dark: #8d5265;
  --c-blue-sky: #8cd7e6;
  --c-blue-sky-dark: #6296a1;
  --c-green-grass: #dceb9b;
  --c-green-grass-dark: #99a46c;
  --c-dark-grey: #585858;
  --c-mid-grey: #d0d0d0;
  /* Supporting Text and Icon Palette */
  --c-midnight: #222222;
  --c-midnight-16pc-opacity: rgba(34, 34, 34, 0.16);
  --c-dawn: #595959;
  --c-mist: #dddddd;
  --c-mist-38pc-opacity: rgba(221, 221, 221, 0.38);
  --c-red: #ac2b3e;
  --c-brand-primary: rgb(255, 200, 0);
  --c-brand-primary-50: rgba(255, 200, 0, 0.5);
  --c-brand-primary-25: rgba(255, 200, 0, 0.25);
  --c-brand-secondary: rgb(250, 245, 230);
  --c-brand-secondary-50: rgba(250, 245, 230, 0.5);
  --c-brand-secondary-25: rgba(250, 245, 230, 0.25);
  --c-brand-tertiary: rgb(210, 200, 185);
  --c-brand-quaternary: rgb(34, 34, 34);
  --c-brand-quinary: rgb(221, 221, 221);
  /***** Grayscale Palette *****/
  --c-gray-100: hsl(0, 0%, 96%);
  --c-gray-200: hsl(0, 0%, 92%);
  --c-gray-300: hsl(0, 0%, 78%);
  --c-gray-400: hsl(0, 0%, 69%);
  --c-gray-500: hsl(0, 0%, 56%);
  --c-gray-600: hsl(0, 0%, 44%);
  --c-gray-700: hsl(0, 0%, 20%);
  --c-gray-800: hsl(0, 0%, 17%);
  /* // TODO will need to define all of these and use them where necessary */
  /***** Usage Semantics (design tokens) *****/
  --c-focus: var(--c-brand-primary);
  --c-active: var(--c-brand-primary);
  --c-separator: var(--c-brand-quaternary);
  --c-tooltip-bg: var(--c-brand-primary);
  --c-tooltip-border: var(--c-gray-800);
  --c-positive: var(--c-green);
  --c-negative: var(--c-red);
  --c-error: var(--c-red);
  --c-informational: var(--c-brand-quinary);
  --c-advisory: var(--c-amber);
  --c-body-bg: var(--c-white);
  --c-body: var(--c-brand-quaternary);
  --c-link: var(--c-brand-quaternary);
  --c-link-hover: var(--c-brand-quaternary);
  --c-link-disabled: var(--c-gray-600);
  --c-input-border-disabled: var(--c-brand-quaternary);
  --c-input-bg: var(--c-white);
  --c-input-bg-focus: var(--c-white);
  --c-input-bg-disabled: #efece3;
  --c-input-bg-active: var(--c-white);
  --c-input-border: var(--c-brand-quaternary);
  --c-input-border-focus: var(--c-brand-quaternary);
  --c-input-border-active: var(--c-brand-quaternary);
  --c-input-invalid: var(--c-negative);
  --c-input-bg-invalid: var(--c-white);
  --c-input-border-invalid: var(--c-negative);
  --c-input-helper-text: var(--c-brand-quaternary);
  --c-btn: var(--c-brand-quaternary);
  --c-btn-bg: transparent;
  --c-btn-border: var(--c-brand-quaternary);
  --c-btn-hover: var(--c-brand-quaternary);
  --c-btn-hover-bg: var(--c-gray-300);
  --c-btn-hover-border: var(--c-gray-300);
  --c-btn-disabled: var(--c-brand-quaternary);
  --c-btn-disabled-border: var(--c-gray-500);
  --c-btn-disabled-bg: var(--c-gray-500);
  --c-btn-primary: var(--c-white);
  --c-btn-primary-bg: var(--c-brand-quaternary);
  --c-btn-primary-border: var(--c-brand-quaternary);
  --c-btn-primary-hover: var(--c-brand-quaternary);
  --c-btn-primary-hover-bg: var(--c-white);
  --c-btn-primary-hover-border: var(--c-brand-quaternary);
  --c-btn-primary-disabled: var(--c-white);
  --c-btn-primary-disabled-border: var(--c-gray-700);
  --c-btn-primary-disabled-bg: var(--c-gray-700);
  --c-btn-important: var(--c-brand-quaternary);
  --c-btn-important-bg: var(--c-brand-primary);
  --c-btn-important-border: var(--c-brand-primary);
  --c-btn-important-hover: var(--c-brand-quaternary);
  --c-btn-important-hover-bg: var(--c-brand-primary-50);
  --c-btn-important-hover-border: var(--c-brand-primary-50);
  --c-btn-important-disabled: var(--c-brand-quaternary);
  --c-btn-important-disabled-border: var(--c-brand-primary-50);
  --c-btn-important-disabled-bg: var(--c-brand-primary-50);
  --c-btn-tertiary: var(--c-link);
  --c-btn-tertiary-bg: transparent;
  --c-btn-tertiary-border: transparent;
  --c-btn-tertiary-hover: var(--c-gray-600);
  --c-btn-tertiary-hover-border: var(--c-gray-600);
  --c-btn-tertiary-hover-bg: transparent;
  --c-btn-tertiary-disabled: var(--c-link-disabled);
  --c-btn-tertiary-disabled-border: transparent;
  --c-btn-tertiary-disabled-bg: transparent;
  --c-overlay-opacity: 0.7;
  --c-overlay-bg-color: var(--c-brand-secondary);
  --c-cmp-checkbox-icon-bg-hover: var(--c-brand-secondary);
  --c-cmp-radio-icon-bg-hover: var(--c-brand-secondary);
  --c-input-placeholder: var(--c-gray-300);
  --c-input-counter: var(--c-grey);
}

.NDSSurveyResultsDesktopViews-module--bottomRow--04237 {
  display: flex;
  width: 100%;
  gap: var(--s-2);
}
@media (min-width: 64rem) {
  .NDSSurveyResultsDesktopViews-module--bottomRow--04237 {
    gap: var(--s-4);
  }
}

.NDSSurveyResultsDesktopViews-module--leftPane--53ce8 {
  flex: 0 0 calc(var(--s-1) * 35);
}
@media (min-width: 64rem) {
  .NDSSurveyResultsDesktopViews-module--leftPane--53ce8 {
    flex: 0 0 calc(var(--s-1) * 37.5);
  }
}

.NDSSurveyResultsDesktopViews-module--rightPane--90e7b {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.NDSSurveyResultsDesktopViews-module--breedList--4ec46 {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s-1) + var(--s-0-75));
}

.NDSSurveyResultsDesktopViews-module--breedItem--a1168 {
  display: flex;
  align-items: center;
  min-height: calc(var(--s-5) + var(--s-0-5));
  border-left: calc(var(--s-border-width) * 3) solid var(--breed-color, var(--c-midnight));
  padding: 0 var(--s-2);
  background: transparent;
  border: none;
  text-align: left;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.NDSSurveyResultsDesktopViews-module--breedItem--a1168:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.NDSSurveyResultsDesktopViews-module--breedItem--a1168:focus {
  outline: calc(var(--s-border-width) * 2) solid var(--c-brand-primary);
  outline-offset: calc(var(--s-border-width) * 2);
}
.NDSSurveyResultsDesktopViews-module--breedItem--a1168.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 {
  background-color: var(--breed-color);
  outline: none;
}
.NDSSurveyResultsDesktopViews-module--breedItem--a1168.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 .NDSSurveyResultsDesktopViews-module--breedName--7d558 {
  color: var(--breed-text-color, var(--c-midnight));
  font-weight: 700;
}
.NDSSurveyResultsDesktopViews-module--breedItem--a1168.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 .NDSSurveyResultsDesktopViews-module--breedExtra--be67c {
  color: var(--breed-text-color, var(--c-midnight));
}
.NDSSurveyResultsDesktopViews-module--breedItem--a1168.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2:focus {
  outline: none;
}
.NDSSurveyResultsDesktopViews-module--breedItem--a1168.NDSSurveyResultsDesktopViews-module--hoverLinked--73788:not(.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2) {
  background-color: rgba(89, 89, 89, 0.12);
}

.NDSSurveyResultsDesktopViews-module--breedInfo--ff197 {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

.NDSSurveyResultsDesktopViews-module--breedName--7d558 {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  color: var(--c-midnight);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.NDSSurveyResultsDesktopViews-module--breedExtra--be67c {
  font-weight: var(--fw-bold);
  font-size: var(--t-body-xs);
  line-height: 1.2;
  color: var(--c-midnight);
  white-space: normal;
  word-break: break-word;
}

.NDSSurveyResultsDesktopViews-module--tableViewActive--056c6 .NDSSurveyResultsDesktopViews-module--breedItem--a1168.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 {
  background-color: transparent;
  position: relative;
}
.NDSSurveyResultsDesktopViews-module--tableViewActive--056c6 .NDSSurveyResultsDesktopViews-module--breedItem--a1168.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(var(--s-4) * -1);
  top: 0;
  bottom: 0;
  background-color: var(--breed-color);
  border-radius: 0;
  z-index: 0;
}
.NDSSurveyResultsDesktopViews-module--tableViewActive--056c6 .NDSSurveyResultsDesktopViews-module--breedItem--a1168.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 .NDSSurveyResultsDesktopViews-module--breedName--7d558 {
  position: relative;
  z-index: 1;
}
.NDSSurveyResultsDesktopViews-module--tableViewActive--056c6 .NDSSurveyResultsDesktopViews-module--breedItem--a1168.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 .NDSSurveyResultsDesktopViews-module--breedExtra--be67c {
  position: relative;
  z-index: 1;
  color: var(--breed-text-color, var(--c-midnight));
}
.NDSSurveyResultsDesktopViews-module--tableViewActive--056c6 .NDSSurveyResultsDesktopViews-module--tableRow--3cb15.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2::before {
  left: calc(var(--s-4) * -1);
  border-radius: 0;
}

.NDSSurveyResultsDesktopViews-module--tableView--60460 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: calc(var(--s-1) + var(--s-0-75));
}

.NDSSurveyResultsDesktopViews-module--yearHeaderRow--3ba3f {
  display: flex;
  min-height: calc(var(--s-5) + var(--s-0-5));
  align-items: center;
}

.NDSSurveyResultsDesktopViews-module--lineChartContainer--75d81 {
  height: 100%;
}

.NDSSurveyResultsDesktopViews-module--tableHeaderRow--029bf {
  display: flex;
  min-height: calc(var(--s-5) + var(--s-0-5));
  align-items: center;
}

.NDSSurveyResultsDesktopViews-module--tableHeaderCell--5447a {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--s-5) + var(--s-0-5));
  background-color: var(--c-mist);
}
.NDSSurveyResultsDesktopViews-module--tableHeaderCell--5447a:not(:last-child) {
  margin-right: var(--s-1);
}

.NDSSurveyResultsDesktopViews-module--tableHeaderText--a588f {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-m);
  line-height: 1.5;
  color: var(--c-midnight);
}

.NDSSurveyResultsDesktopViews-module--tableBody--68999 {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s-1) + var(--s-0-75));
}

.NDSSurveyResultsDesktopViews-module--tableRow--3cb15 {
  display: flex;
  min-height: calc(var(--s-5) + var(--s-0-5));
  align-items: center;
  position: relative;
  border: none;
  text-align: left;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: 100%;
}
.NDSSurveyResultsDesktopViews-module--tableRow--3cb15:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.NDSSurveyResultsDesktopViews-module--tableRow--3cb15:focus {
  outline: none;
}
.NDSSurveyResultsDesktopViews-module--tableRow--3cb15.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--breed-color);
  border-radius: 8px;
  z-index: 0;
}
.NDSSurveyResultsDesktopViews-module--tableRow--3cb15.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 .NDSSurveyResultsDesktopViews-module--tableCellValue--f46b1,
.NDSSurveyResultsDesktopViews-module--tableRow--3cb15.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 .NDSSurveyResultsDesktopViews-module--breedName--7d558,
.NDSSurveyResultsDesktopViews-module--tableRow--3cb15.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 .NDSSurveyResultsDesktopViews-module--breedExtra--be67c {
  color: var(--breed-text-color, var(--c-midnight));
  font-weight: var(--fw-bolder);
  position: relative;
  z-index: 1;
}
.NDSSurveyResultsDesktopViews-module--tableRow--3cb15.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2:focus {
  outline: none;
}
.NDSSurveyResultsDesktopViews-module--tableRow--3cb15.NDSSurveyResultsDesktopViews-module--hoverLinked--73788:not(.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2) {
  background-color: rgba(89, 89, 89, 0.12);
}

.NDSSurveyResultsDesktopViews-module--tableCell--f34fd {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--s-5);
  background-color: transparent;
  border: none;
  border-radius: var(--s-border-radius-s);
}
.NDSSurveyResultsDesktopViews-module--tableCell--f34fd:not(:last-child) {
  margin-right: var(--s-1);
}

.NDSSurveyResultsDesktopViews-module--tableCellValue--f46b1 {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  color: var(--c-midnight);
}

.NDSSurveyResultsDesktopViews-module--dataBarList--1215b {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.NDSSurveyResultsDesktopViews-module--dataBarItem--6e90b {
  display: flex;
  align-items: center;
  min-height: calc(var(--s-5) + var(--s-0-5));
  background: transparent;
  border: none;
  text-align: left;
  appearance: none;
  width: 100%;
}
.NDSSurveyResultsDesktopViews-module--dataBarItem--6e90b:focus {
  outline: none;
  box-shadow: none;
}
.NDSSurveyResultsDesktopViews-module--dataBarItem--6e90b:focus-visible {
  outline: none;
  box-shadow: none;
}
.NDSSurveyResultsDesktopViews-module--dataBarItem--6e90b.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 .NDSSurveyResultsDesktopViews-module--dataValueContainer--01e15 {
  background: var(--breed-color);
  border: calc(var(--s-border-width) * 2) solid var(--breed-color);
}
.NDSSurveyResultsDesktopViews-module--dataBarItem--6e90b.NDSSurveyResultsDesktopViews-module--highlighted--1ebe2 .NDSSurveyResultsDesktopViews-module--dataValue--6a54c {
  color: var(--breed-text-color, var(--c-midnight));
}

.NDSSurveyResultsDesktopViews-module--dataValueContainer--01e15 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--s-5);
  background-color: transparent;
  border: calc(var(--s-border-width) * 2) solid var(--breed-color, var(--c-midnight));
  border-radius: var(--s-border-radius-s);
  padding: 0 calc(var(--s-2) + var(--s-0-5));
  width: var(--bar-width, 100%);
  min-width: calc(var(--s-1) * 15);
  transition: width 0.3s ease;
}

.NDSSurveyResultsDesktopViews-module--dataValue--6a54c {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  color: var(--c-midnight);
  margin: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
:root {
  --font-family-fido: "Fido", Arial;
  --font-family-work-sans: "Work Sans", "Arial";
  --font-family-m-plus-1p: "M PLUS 1p", Arial;
  --font-family-m-plus-1p-check: "M PLUS 1p Check", Arial;
  --font-family: var(--font-family-work-sans);
  --font-family-heading: var(--font-family-fido);
  --fw-bolder: 700;
  --fw-bold: 600;
  --fw-medium: 500;
  --fw-normal: 400;
  --fw-light: 300;
  --fw-lighter: 200;
  --t-base: 16;
  /** Design token **/
  --t-body-xxs: calc(10rem / var(--t-base));
  --t-body-xs: calc(12rem / var(--t-base));
  --t-body-s: calc(14rem / var(--t-base));
  --t-body-m: 1rem;
  --t-body-l: calc(20rem / var(--t-base));
  --t-body-xl: calc(22rem / var(--t-base));
  --t-body-xxl: calc(28rem / var(--t-base));
  --t-heading-xxs: calc(14rem / var(--t-base));
  --t-heading-xs: calc(18rem / var(--t-base));
  --t-heading-s: calc(22rem / var(--t-base));
  --t-heading-m: calc(24rem / var(--t-base));
  --t-heading-l: calc(28rem / var(--t-base));
  --t-heading-xl: calc(36rem / var(--t-base));
  --t-heading-xxl: calc(56rem / var(--t-base));
  --lh-body-xxs: calc(calc(10rem / var(--t-base)) * 1.6);
  --lh-body-xs: calc(calc(12rem / var(--t-base)) * 1.6);
  --lh-body-s: calc(calc(14rem / var(--t-base)) * 1.6);
  --lh-body-m: calc(1rem * 1.6);
  --lh-body-l: calc(calc(20rem / var(--t-base)) * 1.6);
  --lh-body-xl: calc(calc(22rem / var(--t-base)) * 1.6);
  --lh-body-xxl: calc(calc(28rem / var(--t-base)) * 1.6);
  --lh-heading-xxs: calc(calc(22rem / var(--t-base)) * 1.1);
  --lh-heading-xs: calc(calc(28rem / var(--t-base)) * 1.1);
  --lh-heading-s: calc(calc(34rem / var(--t-base)) * 1.1);
  --lh-heading-m: calc(calc(36rem / var(--t-base)) * 1.1);
  --lh-heading-l: calc(calc(42rem / var(--t-base)) * 1.1);
  --lh-heading-xl: calc(calc(54rem / var(--t-base)) * 1.1);
  --lh-heading-xxl: calc(calc(64rem / var(--t-base)) * 1.1);
  --td-link-decoration: underline;
  --td-link-hover-decoration: none;
}

:root {
  /***** 
  Primary Brand Palette (SCSS variables for local scoping)
  Do not use these values directly if you can help it
  *****/
  /* Primary Palette */
  --c-sunshine-yellow: hsl(47, 100%, 50%);
  --c-sunshine-yellow-10pc-lighter: hsl(46, 100%, 60%);
  --c-sunshine-yellow-30pc-lighter: hsl(48, 100%, 70%);
  --c-sunshine-yellow-off-colour: #e7d79b;
  --c-teal: #80c2ab;
  --c-white: #ffffff;
  --c-black: #222222;
  /* Secondary Palette */
  --c-sandy-fur: #faf5e6;
  --c-sandy-fur-light: #fcfaf5;
  --c-sandy-fur-alt: #f4efe0;
  --c-sandy-fur-60: rgba(250, 245, 230, 0.6);
  --c-sandy-fur-40: rgba(250, 245, 230, 0.4);
  --c-oatmeal: #d2c8b9;
  --c-oatmeal-light: #edeae4;
  --c-oatmeal-60: rgba(210, 200, 185, 0.6);
  --c-oatmeal-40: rgba(210, 200, 185, 0.4);
  --c-oatmeal-20: rgba(210, 200, 185, 0.2);
  --c-alto: #E0E0E0;
  --c-pampas: #F6F4F1;
  /* Supporting Palette */
  --c-pink-tongue: #fa9b9b;
  --c-pink-tongue-dark: #8d5265;
  --c-blue-sky: #8cd7e6;
  --c-blue-sky-dark: #6296a1;
  --c-green-grass: #dceb9b;
  --c-green-grass-dark: #99a46c;
  --c-dark-grey: #585858;
  --c-mid-grey: #d0d0d0;
  /* Supporting Text and Icon Palette */
  --c-midnight: #222222;
  --c-midnight-16pc-opacity: rgba(34, 34, 34, 0.16);
  --c-dawn: #595959;
  --c-mist: #dddddd;
  --c-mist-38pc-opacity: rgba(221, 221, 221, 0.38);
  --c-red: #ac2b3e;
  --c-brand-primary: rgb(255, 200, 0);
  --c-brand-primary-50: rgba(255, 200, 0, 0.5);
  --c-brand-primary-25: rgba(255, 200, 0, 0.25);
  --c-brand-secondary: rgb(250, 245, 230);
  --c-brand-secondary-50: rgba(250, 245, 230, 0.5);
  --c-brand-secondary-25: rgba(250, 245, 230, 0.25);
  --c-brand-tertiary: rgb(210, 200, 185);
  --c-brand-quaternary: rgb(34, 34, 34);
  --c-brand-quinary: rgb(221, 221, 221);
  /***** Grayscale Palette *****/
  --c-gray-100: hsl(0, 0%, 96%);
  --c-gray-200: hsl(0, 0%, 92%);
  --c-gray-300: hsl(0, 0%, 78%);
  --c-gray-400: hsl(0, 0%, 69%);
  --c-gray-500: hsl(0, 0%, 56%);
  --c-gray-600: hsl(0, 0%, 44%);
  --c-gray-700: hsl(0, 0%, 20%);
  --c-gray-800: hsl(0, 0%, 17%);
  /* // TODO will need to define all of these and use them where necessary */
  /***** Usage Semantics (design tokens) *****/
  --c-focus: var(--c-brand-primary);
  --c-active: var(--c-brand-primary);
  --c-separator: var(--c-brand-quaternary);
  --c-tooltip-bg: var(--c-brand-primary);
  --c-tooltip-border: var(--c-gray-800);
  --c-positive: var(--c-green);
  --c-negative: var(--c-red);
  --c-error: var(--c-red);
  --c-informational: var(--c-brand-quinary);
  --c-advisory: var(--c-amber);
  --c-body-bg: var(--c-white);
  --c-body: var(--c-brand-quaternary);
  --c-link: var(--c-brand-quaternary);
  --c-link-hover: var(--c-brand-quaternary);
  --c-link-disabled: var(--c-gray-600);
  --c-input-border-disabled: var(--c-brand-quaternary);
  --c-input-bg: var(--c-white);
  --c-input-bg-focus: var(--c-white);
  --c-input-bg-disabled: #efece3;
  --c-input-bg-active: var(--c-white);
  --c-input-border: var(--c-brand-quaternary);
  --c-input-border-focus: var(--c-brand-quaternary);
  --c-input-border-active: var(--c-brand-quaternary);
  --c-input-invalid: var(--c-negative);
  --c-input-bg-invalid: var(--c-white);
  --c-input-border-invalid: var(--c-negative);
  --c-input-helper-text: var(--c-brand-quaternary);
  --c-btn: var(--c-brand-quaternary);
  --c-btn-bg: transparent;
  --c-btn-border: var(--c-brand-quaternary);
  --c-btn-hover: var(--c-brand-quaternary);
  --c-btn-hover-bg: var(--c-gray-300);
  --c-btn-hover-border: var(--c-gray-300);
  --c-btn-disabled: var(--c-brand-quaternary);
  --c-btn-disabled-border: var(--c-gray-500);
  --c-btn-disabled-bg: var(--c-gray-500);
  --c-btn-primary: var(--c-white);
  --c-btn-primary-bg: var(--c-brand-quaternary);
  --c-btn-primary-border: var(--c-brand-quaternary);
  --c-btn-primary-hover: var(--c-brand-quaternary);
  --c-btn-primary-hover-bg: var(--c-white);
  --c-btn-primary-hover-border: var(--c-brand-quaternary);
  --c-btn-primary-disabled: var(--c-white);
  --c-btn-primary-disabled-border: var(--c-gray-700);
  --c-btn-primary-disabled-bg: var(--c-gray-700);
  --c-btn-important: var(--c-brand-quaternary);
  --c-btn-important-bg: var(--c-brand-primary);
  --c-btn-important-border: var(--c-brand-primary);
  --c-btn-important-hover: var(--c-brand-quaternary);
  --c-btn-important-hover-bg: var(--c-brand-primary-50);
  --c-btn-important-hover-border: var(--c-brand-primary-50);
  --c-btn-important-disabled: var(--c-brand-quaternary);
  --c-btn-important-disabled-border: var(--c-brand-primary-50);
  --c-btn-important-disabled-bg: var(--c-brand-primary-50);
  --c-btn-tertiary: var(--c-link);
  --c-btn-tertiary-bg: transparent;
  --c-btn-tertiary-border: transparent;
  --c-btn-tertiary-hover: var(--c-gray-600);
  --c-btn-tertiary-hover-border: var(--c-gray-600);
  --c-btn-tertiary-hover-bg: transparent;
  --c-btn-tertiary-disabled: var(--c-link-disabled);
  --c-btn-tertiary-disabled-border: transparent;
  --c-btn-tertiary-disabled-bg: transparent;
  --c-overlay-opacity: 0.7;
  --c-overlay-bg-color: var(--c-brand-secondary);
  --c-cmp-checkbox-icon-bg-hover: var(--c-brand-secondary);
  --c-cmp-radio-icon-bg-hover: var(--c-brand-secondary);
  --c-input-placeholder: var(--c-gray-300);
  --c-input-counter: var(--c-grey);
}

.NDSSurveyResultsLeaderBoard-module--leaderBoardMobile--46000 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--s-5) + var(--s-0-5));
  padding: calc(var(--s-1)) calc(var(--s-2) + var(--s-0-5));
  border: calc(var(--s-border-width) * 2) solid var(--breed-color, var(--c-midnight));
  border-radius: var(--s-border-radius-m);
  background: transparent;
  text-align: left;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3:focus {
  outline: none;
  box-shadow: none;
}
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3:focus-visible {
  outline: none;
  box-shadow: none;
}
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--bar-width, 0%);
  background-color: var(--breed-color, var(--c-midnight));
  opacity: 0.15;
  border-radius: calc(var(--s-border-radius-s) * 0.75) 0 0 calc(var(--s-border-radius-s) * 0.75);
  pointer-events: none;
  z-index: 0;
}
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3 > * {
  position: relative;
  z-index: 1;
}
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3.NDSSurveyResultsLeaderBoard-module--highlighted--ac2dc {
  background-color: var(--breed-color);
}
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3.NDSSurveyResultsLeaderBoard-module--highlighted--ac2dc::before {
  opacity: 0;
  width: 0;
}
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3.NDSSurveyResultsLeaderBoard-module--highlighted--ac2dc .NDSSurveyResultsLeaderBoard-module--breedNameMobile--d476b,
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3.NDSSurveyResultsLeaderBoard-module--highlighted--ac2dc .NDSSurveyResultsLeaderBoard-module--dataValueMobile--0aef1 {
  color: var(--breed-text-color, var(--c-midnight));
}
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3.NDSSurveyResultsLeaderBoard-module--highlighted--ac2dc .NDSSurveyResultsLeaderBoard-module--breedExtra--9678c {
  color: var(--breed-text-color, var(--c-midnight));
}
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3.NDSSurveyResultsLeaderBoard-module--hoverLinked--e17c7:not(.NDSSurveyResultsLeaderBoard-module--highlighted--ac2dc) {
  border-color: var(--c-dawn);
}
.NDSSurveyResultsLeaderBoard-module--leaderBoardMobileItem--e2ec3.NDSSurveyResultsLeaderBoard-module--hoverLinked--e17c7:not(.NDSSurveyResultsLeaderBoard-module--highlighted--ac2dc)::before {
  background-color: var(--c-dawn);
  opacity: 0.15;
}

.NDSSurveyResultsLeaderBoard-module--breedNameMobile--d476b {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  color: var(--c-midnight);
  margin: 0;
  text-align: left;
}

.NDSSurveyResultsLeaderBoard-module--dataValueMobile--0aef1 {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  color: var(--c-midnight);
  margin: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
:root {
  --font-family-fido: "Fido", Arial;
  --font-family-work-sans: "Work Sans", "Arial";
  --font-family-m-plus-1p: "M PLUS 1p", Arial;
  --font-family-m-plus-1p-check: "M PLUS 1p Check", Arial;
  --font-family: var(--font-family-work-sans);
  --font-family-heading: var(--font-family-fido);
  --fw-bolder: 700;
  --fw-bold: 600;
  --fw-medium: 500;
  --fw-normal: 400;
  --fw-light: 300;
  --fw-lighter: 200;
  --t-base: 16;
  /** Design token **/
  --t-body-xxs: calc(10rem / var(--t-base));
  --t-body-xs: calc(12rem / var(--t-base));
  --t-body-s: calc(14rem / var(--t-base));
  --t-body-m: 1rem;
  --t-body-l: calc(20rem / var(--t-base));
  --t-body-xl: calc(22rem / var(--t-base));
  --t-body-xxl: calc(28rem / var(--t-base));
  --t-heading-xxs: calc(14rem / var(--t-base));
  --t-heading-xs: calc(18rem / var(--t-base));
  --t-heading-s: calc(22rem / var(--t-base));
  --t-heading-m: calc(24rem / var(--t-base));
  --t-heading-l: calc(28rem / var(--t-base));
  --t-heading-xl: calc(36rem / var(--t-base));
  --t-heading-xxl: calc(56rem / var(--t-base));
  --lh-body-xxs: calc(calc(10rem / var(--t-base)) * 1.6);
  --lh-body-xs: calc(calc(12rem / var(--t-base)) * 1.6);
  --lh-body-s: calc(calc(14rem / var(--t-base)) * 1.6);
  --lh-body-m: calc(1rem * 1.6);
  --lh-body-l: calc(calc(20rem / var(--t-base)) * 1.6);
  --lh-body-xl: calc(calc(22rem / var(--t-base)) * 1.6);
  --lh-body-xxl: calc(calc(28rem / var(--t-base)) * 1.6);
  --lh-heading-xxs: calc(calc(22rem / var(--t-base)) * 1.1);
  --lh-heading-xs: calc(calc(28rem / var(--t-base)) * 1.1);
  --lh-heading-s: calc(calc(34rem / var(--t-base)) * 1.1);
  --lh-heading-m: calc(calc(36rem / var(--t-base)) * 1.1);
  --lh-heading-l: calc(calc(42rem / var(--t-base)) * 1.1);
  --lh-heading-xl: calc(calc(54rem / var(--t-base)) * 1.1);
  --lh-heading-xxl: calc(calc(64rem / var(--t-base)) * 1.1);
  --td-link-decoration: underline;
  --td-link-hover-decoration: none;
}

:root {
  /***** 
  Primary Brand Palette (SCSS variables for local scoping)
  Do not use these values directly if you can help it
  *****/
  /* Primary Palette */
  --c-sunshine-yellow: hsl(47, 100%, 50%);
  --c-sunshine-yellow-10pc-lighter: hsl(46, 100%, 60%);
  --c-sunshine-yellow-30pc-lighter: hsl(48, 100%, 70%);
  --c-sunshine-yellow-off-colour: #e7d79b;
  --c-teal: #80c2ab;
  --c-white: #ffffff;
  --c-black: #222222;
  /* Secondary Palette */
  --c-sandy-fur: #faf5e6;
  --c-sandy-fur-light: #fcfaf5;
  --c-sandy-fur-alt: #f4efe0;
  --c-sandy-fur-60: rgba(250, 245, 230, 0.6);
  --c-sandy-fur-40: rgba(250, 245, 230, 0.4);
  --c-oatmeal: #d2c8b9;
  --c-oatmeal-light: #edeae4;
  --c-oatmeal-60: rgba(210, 200, 185, 0.6);
  --c-oatmeal-40: rgba(210, 200, 185, 0.4);
  --c-oatmeal-20: rgba(210, 200, 185, 0.2);
  --c-alto: #E0E0E0;
  --c-pampas: #F6F4F1;
  /* Supporting Palette */
  --c-pink-tongue: #fa9b9b;
  --c-pink-tongue-dark: #8d5265;
  --c-blue-sky: #8cd7e6;
  --c-blue-sky-dark: #6296a1;
  --c-green-grass: #dceb9b;
  --c-green-grass-dark: #99a46c;
  --c-dark-grey: #585858;
  --c-mid-grey: #d0d0d0;
  /* Supporting Text and Icon Palette */
  --c-midnight: #222222;
  --c-midnight-16pc-opacity: rgba(34, 34, 34, 0.16);
  --c-dawn: #595959;
  --c-mist: #dddddd;
  --c-mist-38pc-opacity: rgba(221, 221, 221, 0.38);
  --c-red: #ac2b3e;
  --c-brand-primary: rgb(255, 200, 0);
  --c-brand-primary-50: rgba(255, 200, 0, 0.5);
  --c-brand-primary-25: rgba(255, 200, 0, 0.25);
  --c-brand-secondary: rgb(250, 245, 230);
  --c-brand-secondary-50: rgba(250, 245, 230, 0.5);
  --c-brand-secondary-25: rgba(250, 245, 230, 0.25);
  --c-brand-tertiary: rgb(210, 200, 185);
  --c-brand-quaternary: rgb(34, 34, 34);
  --c-brand-quinary: rgb(221, 221, 221);
  /***** Grayscale Palette *****/
  --c-gray-100: hsl(0, 0%, 96%);
  --c-gray-200: hsl(0, 0%, 92%);
  --c-gray-300: hsl(0, 0%, 78%);
  --c-gray-400: hsl(0, 0%, 69%);
  --c-gray-500: hsl(0, 0%, 56%);
  --c-gray-600: hsl(0, 0%, 44%);
  --c-gray-700: hsl(0, 0%, 20%);
  --c-gray-800: hsl(0, 0%, 17%);
  /* // TODO will need to define all of these and use them where necessary */
  /***** Usage Semantics (design tokens) *****/
  --c-focus: var(--c-brand-primary);
  --c-active: var(--c-brand-primary);
  --c-separator: var(--c-brand-quaternary);
  --c-tooltip-bg: var(--c-brand-primary);
  --c-tooltip-border: var(--c-gray-800);
  --c-positive: var(--c-green);
  --c-negative: var(--c-red);
  --c-error: var(--c-red);
  --c-informational: var(--c-brand-quinary);
  --c-advisory: var(--c-amber);
  --c-body-bg: var(--c-white);
  --c-body: var(--c-brand-quaternary);
  --c-link: var(--c-brand-quaternary);
  --c-link-hover: var(--c-brand-quaternary);
  --c-link-disabled: var(--c-gray-600);
  --c-input-border-disabled: var(--c-brand-quaternary);
  --c-input-bg: var(--c-white);
  --c-input-bg-focus: var(--c-white);
  --c-input-bg-disabled: #efece3;
  --c-input-bg-active: var(--c-white);
  --c-input-border: var(--c-brand-quaternary);
  --c-input-border-focus: var(--c-brand-quaternary);
  --c-input-border-active: var(--c-brand-quaternary);
  --c-input-invalid: var(--c-negative);
  --c-input-bg-invalid: var(--c-white);
  --c-input-border-invalid: var(--c-negative);
  --c-input-helper-text: var(--c-brand-quaternary);
  --c-btn: var(--c-brand-quaternary);
  --c-btn-bg: transparent;
  --c-btn-border: var(--c-brand-quaternary);
  --c-btn-hover: var(--c-brand-quaternary);
  --c-btn-hover-bg: var(--c-gray-300);
  --c-btn-hover-border: var(--c-gray-300);
  --c-btn-disabled: var(--c-brand-quaternary);
  --c-btn-disabled-border: var(--c-gray-500);
  --c-btn-disabled-bg: var(--c-gray-500);
  --c-btn-primary: var(--c-white);
  --c-btn-primary-bg: var(--c-brand-quaternary);
  --c-btn-primary-border: var(--c-brand-quaternary);
  --c-btn-primary-hover: var(--c-brand-quaternary);
  --c-btn-primary-hover-bg: var(--c-white);
  --c-btn-primary-hover-border: var(--c-brand-quaternary);
  --c-btn-primary-disabled: var(--c-white);
  --c-btn-primary-disabled-border: var(--c-gray-700);
  --c-btn-primary-disabled-bg: var(--c-gray-700);
  --c-btn-important: var(--c-brand-quaternary);
  --c-btn-important-bg: var(--c-brand-primary);
  --c-btn-important-border: var(--c-brand-primary);
  --c-btn-important-hover: var(--c-brand-quaternary);
  --c-btn-important-hover-bg: var(--c-brand-primary-50);
  --c-btn-important-hover-border: var(--c-brand-primary-50);
  --c-btn-important-disabled: var(--c-brand-quaternary);
  --c-btn-important-disabled-border: var(--c-brand-primary-50);
  --c-btn-important-disabled-bg: var(--c-brand-primary-50);
  --c-btn-tertiary: var(--c-link);
  --c-btn-tertiary-bg: transparent;
  --c-btn-tertiary-border: transparent;
  --c-btn-tertiary-hover: var(--c-gray-600);
  --c-btn-tertiary-hover-border: var(--c-gray-600);
  --c-btn-tertiary-hover-bg: transparent;
  --c-btn-tertiary-disabled: var(--c-link-disabled);
  --c-btn-tertiary-disabled-border: transparent;
  --c-btn-tertiary-disabled-bg: transparent;
  --c-overlay-opacity: 0.7;
  --c-overlay-bg-color: var(--c-brand-secondary);
  --c-cmp-checkbox-icon-bg-hover: var(--c-brand-secondary);
  --c-cmp-radio-icon-bg-hover: var(--c-brand-secondary);
  --c-input-placeholder: var(--c-gray-300);
  --c-input-counter: var(--c-grey);
}

.NDSSurveyResultsTitle-module--title--b60c2 {
  font-family: var(--font-family-work-sans);
  font-weight: var(--fw-bolder);
  font-size: var(--t-heading-l);
  line-height: var(--t-heading-l);
  color: var(--c-midnight);
  margin: 0;
}
@media screen and (max-width: 37.5rem) {
  .NDSSurveyResultsTitle-module--title--b60c2 {
    font-size: var(--t-heading-m);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CheckboxGroup-module--checkboxGroupWrapper--446c3 {
  position: relative;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 37.5rem) {
  .CheckboxGroup-module--checkboxGroupWrapper--446c3 {
    grid-column: span 2;
  }
}

.CheckboxGroup-module--checkboxGroup--57b24 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  width: 100%;
}
.CheckboxGroup-module--checkboxGroup--57b24 div {
  width: 100% !important;
}
@media screen and (min-width: 64rem) {
  .CheckboxGroup-module--checkboxGroup--57b24.CheckboxGroup-module--groupWithImages--81a98 {
    flex-direction: row;
    justify-content: space-between;
    column-gap: var(--s-2);
  }
  .CheckboxGroup-module--checkboxGroup--57b24.CheckboxGroup-module--groupWithImages--81a98 div {
    width: auto !important;
    /** assuming the last checkobox is always one without an image **/
  }
  .CheckboxGroup-module--checkboxGroup--57b24.CheckboxGroup-module--groupWithImages--81a98 div:last-child {
    width: 100% !important;
  }
}
.CheckboxGroup-module--checkboxGroup--57b24 legend {
  font-size: var(--t-body-l);
  margin-block-end: var(--s-2);
  text-align: left;
  font-family: var(--font-family);
  font-weight: var(--fw-bold);
  color: var(--c-midnight);
}
@media screen and (min-width: 37.5rem) {
  .CheckboxGroup-module--checkboxGroup--57b24 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
}

.CheckboxGroup-module--exclusiveBreak--2e48e {
  border-block-start: 2px solid var(--c-midnight);
}
@media screen and (min-width: 37.5rem) {
  .CheckboxGroup-module--exclusiveBreak--2e48e {
    grid-column: span 2;
  }
}

.CheckboxGroup-module--checkbox--393cc {
  border: 2px solid var(--c-midnight);
  border-radius: 2px;
}

.CheckboxGroup-module--checkboximage--a7a6d {
  position: relative;
  width: 100%;
  /* 352px */
  max-width: calc(var(--s-1) * 44);
}
@media screen and (min-width: 64rem) {
  .CheckboxGroup-module--checkboximage--a7a6d {
    max-width: 275px;
  }
}

.CheckboxGroup-module--checkboxGroupLabel--cf9df {
  text-align: left;
  color: var(--c-black);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
}
@media screen and (min-width: 37.5rem) {
  .CheckboxGroup-module--checkboxGroupLabel--cf9df {
    grid-column: span 2;
  }
}

.CheckboxGroup-module--labelContent--1fbad {
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
}

.CheckboxGroup-module--checkboxItem--bfb9f {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.CheckboxGroup-module--checkboxItem--bfb9f:focus-within {
  outline: 2px solid blue;
}
.CheckboxGroup-module--checkboxItem--bfb9f {
  background-color: var(--c-white);
  padding-block-start: 12px;
  padding-block-end: 12px;
  padding-inline-end: var(--s-2);
  padding-inline-start: var(--s-2);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-family);
  text-align: left;
  width: 100%;
}
.CheckboxGroup-module--checkboxItem--bfb9f span:nth-of-type(1) {
  margin-block-start: calc(var(--s-0-5) / 3);
}
.CheckboxGroup-module--checkboxItem--bfb9f input + * {
  background: var(--c-white);
}
.CheckboxGroup-module--checkboxItem--bfb9f .CheckboxGroup-module--labelContent--1fbad > span {
  font-weight: 400;
}
.CheckboxGroup-module--checkboxItem--bfb9f.CheckboxGroup-module--withImage--10c84 {
  align-items: flex-end;
  justify-content: center;
  column-gap: 5px;
  text-align: center;
  height: 100%;
}
.CheckboxGroup-module--checkboxItem--bfb9f.CheckboxGroup-module--withImage--10c84 span:nth-child(1) {
  order: 2;
}
.CheckboxGroup-module--checkboxItem--bfb9f.CheckboxGroup-module--withImage--10c84 span:nth-child(2) {
  order: 1;
  width: 100%;
}
.CheckboxGroup-module--checkboxItem--bfb9f[data-disabled=true] {
  background-color: var(--c-mist);
  cursor: not-allowed;
}
.CheckboxGroup-module--checkboxItem--bfb9f[data-disabled=true] input + * {
  background-color: var(--c-mist);
}
@media screen and (min-width: 64rem) {
  .CheckboxGroup-module--checkboxItem--bfb9f {
    height: 100%;
    margin: 0;
  }
}

.CheckboxGroup-module--checkedIcon--c8718 {
  text-align: center;
  background: var(--c-midnight);
  display: flex;
  justify-content: center;
  align-items: center;
}

.CheckboxGroup-module--checkboxTick--c806f {
  margin: 0;
}

.CheckboxGroup-module--lastStepCheckboxGroup--cee5d .CheckboxGroup-module--checkboxItem--bfb9f {
  font-family: var(--font-family-heading);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NumberPicker-module--numberPickerFieldset--dcf47 {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  grid-column: span 2;
}
@media (min-width: 37.5rem) {
  .NumberPicker-module--numberPickerFieldset--dcf47 {
    grid-column: span 2;
    max-width: 75%;
  }
}

.NumberPicker-module--numberPicker--35761 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border: none;
  border-radius: var(--s-1);
  background-color: var(--c-white) !important;
  padding: var(--s-1) var(--s-2);
}
@media (min-width: 37.5rem) {
  .NumberPicker-module--numberPicker--35761 {
    grid-column: span 2;
    flex-direction: row;
    max-width: 75%;
    align-items: center;
  }
}

.NumberPicker-module--numberPickerLabel--c6156 {
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
  margin: 0;
  padding: 0;
  text-align: start;
  max-width: calc(var(--form-element-width) * 1.2);
  align-items: center;
  margin-block-end: var(--s-2);
}
@media (min-width: 37.5rem) {
  .NumberPicker-module--numberPickerLabel--c6156 {
    margin-block-end: 0;
    padding-inline-end: var(--s-2);
  }
}

.NumberPicker-module--numberPickerLegend--5d74e {
  margin-block-end: var(--s-2);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
  text-align: start;
  margin-block-start: auto;
}

.NumberPicker-module--numberPickerInputContainer--b9445 {
  /* 168px */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
@media (min-width: 37.5rem) {
  .NumberPicker-module--numberPickerInputContainer--b9445 {
    max-width: calc(var(--s-1) * 21);
  }
}

.NumberPicker-module--numberPickerInput--9989e {
  max-width: var(--s-5);
  border: 0;
  text-align: center;
  --moz-appearance: textfield;
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  font-weight: 600;
}
.NumberPicker-module--numberPickerInput--9989e::-webkit-outer-spin-button, .NumberPicker-module--numberPickerInput--9989e::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.NumberPicker-module--numberPickerInput--9989e:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
  border-radius: var(--s-0-5);
}

.NumberPicker-module--baseButton--19dbc, .NumberPicker-module--incrementButton--53446, .NumberPicker-module--decrementButton--f60e8 {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  padding: 0;
  background-color: var(--c-black);
  color: var(--c-white);
  border-radius: var(--s-1);
  height: var(--s-5);
  width: var(--s-5);
  font-weight: 500;
  font-size: var(--t-heading-l);
}
.NumberPicker-module--baseButton--19dbc:disabled, .NumberPicker-module--incrementButton--53446:disabled, .NumberPicker-module--decrementButton--f60e8:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.NumberPicker-module--baseButton--19dbc:focus, .NumberPicker-module--incrementButton--53446:focus, .NumberPicker-module--decrementButton--f60e8:focus {
  outline: 2px solid blue;
  outline-offset: 4px;
  border-radius: var(--s-0-5);
}

.NumberPicker-module--decrementButton--f60e8 {
  margin-inline-end: var(--s-2);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.NumberPicker-module--incrementButton--53446 {
  margin-inline-start: var(--s-2);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.RadioGroup-module--visuallyHidden--f13f2, .RadioGroup-module--radioOptionWithImage--9d132 > span:nth-of-type(1) {
  appearance: none !important;
  clip-path: circle(0) !important;
  position: absolute !important;
  overflow: hidden !important;
  line-height: 0 !important;
  text-indent: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.RadioGroup-module--radioGroupLabel--606df {
  text-align: left;
  color: var(--c-black);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
  margin-block-end: var(--s-1);
}
@media screen and (min-width: 37.5rem) {
  .RadioGroup-module--radioGroupLabel--606df {
    grid-column: span 2;
  }
}

.RadioGroup-module--radioGroupWrapper--b1e4d {
  position: relative;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 37.5rem) {
  .RadioGroup-module--radioGroupWrapper--b1e4d {
    grid-column: span 2;
  }
}

.RadioGroup-module--radioGroupWrapperYesNo--40ad6 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.RadioGroup-module--radioGroup--53625 {
  display: flex;
  width: 100%;
}
.RadioGroup-module--radioGroup--53625 legend {
  margin-block-end: var(--s-2);
  text-align: left;
  color: var(--c-black);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
}
@media screen and (min-width: 64rem) {
  .RadioGroup-module--radioGroup--53625.RadioGroup-module--groupWithImages--bd18c {
    flex-direction: row;
    justify-content: space-between;
    column-gap: var(--s-2);
  }
  .RadioGroup-module--radioGroup--53625.RadioGroup-module--groupWithImages--bd18c div {
    width: auto !important;
  }
}
@media screen and (min-width: 37.5rem) {
  .RadioGroup-module--radioGroup--53625 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
}

.RadioGroup-module--radioGroupYesNo--b5ff9 {
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-template-rows: 1fr;
  width: 100%;
  --s-cmp-radiogroup-gap: 0;
}
.RadioGroup-module--radioGroupYesNo--b5ff9 legend {
  margin-block-end: var(--s-2);
  text-align: left;
  color: var(--c-black);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
}
.RadioGroup-module--radioGroupYesNo--b5ff9 {
  margin-block-end: var(--s-4);
}
@media screen and (min-width: 64rem) {
  .RadioGroup-module--radioGroupYesNo--b5ff9 {
    margin-bottom: 0;
  }
}
.RadioGroup-module--radioGroupYesNo--b5ff9 label {
  border-radius: 0;
  /* If this is the second child... */
}
.RadioGroup-module--radioGroupYesNo--b5ff9 label:nth-child(3) {
  border-radius: 0;
  border-top-left-radius: var(--s-1);
  border-top-right-radius: var(--s-1);
}
.RadioGroup-module--radioGroupYesNo--b5ff9 label:last-child {
  border-radius: 0;
  border-bottom-left-radius: var(--s-1);
  border-bottom-right-radius: var(--s-1);
}
@media screen and (min-width: 37.5rem) {
  .RadioGroup-module--radioGroupYesNo--b5ff9 {
    margin: 0;
  }
}

.RadioGroup-module--radioOption--a2a4e {
  display: flex;
  align-items: center;
  font-size: var(--t-body-l);
}
.RadioGroup-module--radioOption--a2a4e:focus-within {
  outline: 2px solid blue;
}
.RadioGroup-module--radioOption--a2a4e {
  background-color: var(--c-white);
  padding-block-start: 12px;
  padding-block-end: 12px;
  padding-inline-end: var(--s-2);
  padding-inline-start: var(--s-2);
  border-radius: var(--s-1);
  cursor: pointer;
  text-align: left;
}
.RadioGroup-module--radioOption--a2a4e span:nth-of-type(1) {
  margin-block-start: calc(var(--s-0-5) / 2);
}
.RadioGroup-module--radioOption--a2a4e span:nth-of-type(2) {
  margin-inline-start: var(--s-1);
  font-weight: 600;
}
.RadioGroup-module--radioOption--a2a4e input + * {
  background-color: var(--c-white);
}
.RadioGroup-module--radioOption--a2a4e .RadioGroup-module--selectedRadio--3bdf4 {
  background: var(--c-sunshine-yellow);
  border-radius: 50%;
  width: 50%;
  height: 50%;
  border: 7px solid;
  box-sizing: content-box;
  transform: translate(-50%, -50%);
  inset-inline-start: 50%;
  inset-block-start: 50%;
}
.RadioGroup-module--radioOption--a2a4e .RadioGroup-module--labelContent--12e79 > span {
  font-weight: 400;
}
.RadioGroup-module--radioOption--a2a4e .RadioGroup-module--labelContent--12e79 > span p {
  margin: 0;
}

.RadioGroup-module--radioOptionYesNo--9e73d:focus-within {
  outline: 2px solid blue;
  outline-offset: -3px;
  border-radius: var(--s-0-5);
}
.RadioGroup-module--radioOptionYesNo--9e73d {
  font-size: var(--t-body-l);
  margin-block-start: 0;
  margin-block-end: 0;
  padding-block-start: 12px;
  padding-block-end: 12px;
  padding-inline-end: var(--s-2);
  padding-inline-start: var(--s-2);
  background-color: var(--c-white);
  cursor: pointer;
  text-align: left;
  border-block-end: 1px solid var(--c-mist);
  border-bottom-left-radius: var(--s-1);
  border-bottom-right-radius: var(--s-1);
}
.RadioGroup-module--radioOptionYesNo--9e73d span:nth-of-type(1) {
  margin-block-start: calc(var(--s-0-5) / 2);
}
.RadioGroup-module--radioOptionYesNo--9e73d span:nth-of-type(2) {
  margin-inline-start: var(--s-1);
  font-weight: 600;
}
.RadioGroup-module--radioOptionYesNo--9e73d input + * {
  background-color: var(--c-white);
}
.RadioGroup-module--radioOptionYesNo--9e73d .RadioGroup-module--selectedRadio--3bdf4 {
  background: var(--c-sunshine-yellow);
  border-radius: 50%;
  width: 50%;
  height: 50%;
  border: 7px solid;
  box-sizing: content-box;
  transform: translate(-50%, -50%);
  inset-inline-start: 50%;
  inset-block-start: 50%;
}

.RadioGroup-module--linebreak--4d423 {
  height: 1px;
  width: 100%;
  max-width: 61.875rem;
  background-color: var(--c-black);
  border: 0;
  margin-block-start: var(--s-4);
  margin-block-end: 0;
}
@media screen and (min-width: 64rem) {
  .RadioGroup-module--linebreak--4d423 {
    margin-block-start: var(--s-5);
  }
}

.RadioGroup-module--radioGroupWithImages--9d386 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: var(--s-2);
  row-gap: var(--s-2);
}
@media screen and (min-width: 37.5rem) {
  .RadioGroup-module--radioGroupWithImages--9d386 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.RadioGroup-module--radioOptionWithImage--9d132 {
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
}
@media screen and (min-width: 64rem) {
  .RadioGroup-module--radioOptionWithImage--9d132 {
    width: 100%;
  }
}
.RadioGroup-module--radioOptionWithImage--9d132:focus-within {
  outline-offset: 2px;
}

.RadioGroup-module--radioOptionWithImage--9d132 > span:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
}

.RadioGroup-module--radioImage--640b8 {
  position: relative;
  width: 100%;
  height: 100%;
  margin-block-start: calc(var(--s-2) + var(--s-0-5));
  margin-block-end: var(--s-2);
  aspect-ratio: 16/9;
}

.RadioGroup-module--radioTitle--7eb61 {
  font-size: var(--t-heading-xxs);
}
@media screen and (min-width: 37.5rem) {
  .RadioGroup-module--radioTitle--7eb61 {
    font-size: var(--t-heading-xs);
  }
}

.RadioGroup-module--radioDescription--3e7ee {
  font-size: var(--t-body-xs);
  line-height: var(--lh-body-m);
}
@media screen and (min-width: 37.5rem) {
  .RadioGroup-module--radioDescription--3e7ee {
    font-size: var(--t-body-m);
  }
}

.RadioGroup-module--radioGroupOptionWithImageLabel--882ff {
  background-color: var(--c-sandy-fur);
  padding: var(--s-1) var(--s-2);
  border-bottom-left-radius: var(--s-1);
  border-bottom-right-radius: var(--s-1);
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 64rem) {
  .RadioGroup-module--radioGroupOptionWithImageLabel--882ff {
    padding: var(--s-2) var(--s-4);
  }
}

.RadioGroup-module--radioOptionWithImageSelected--32e82 {
  border: 2px solid var(--c-white);
  background-color: #FFF7DB;
}
.RadioGroup-module--radioOptionWithImageSelected--32e82 .RadioGroup-module--radioGroupOptionWithImageLabel--882ff {
  background-color: #EAD595;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.Label-module--labelWrapper--eb2fe {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  margin-block-end: var(--s-2);
  text-align: left;
}
.Label-module--labelWrapper--eb2fe [data-radix-popper-content-wrapper] {
  z-index: 1 !important;
}
.Label-module--labelWrapper--eb2fe {
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
}
.Label-module--labelWrapper--eb2fe label {
  margin-block-end: 0;
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
}
@media screen and (min-width: 64rem) {
  .Label-module--labelWrapper--eb2fe label {
    text-align: left;
  }
}

.Label-module--required--89ef3 {
  color: var(--c-negative);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SelectMulti-module--selectWrapper--4cc72 {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .SelectMulti-module--selectWrapper--4cc72 {
    max-width: calc(var(--s-10) * 6);
  }
}

.SelectMulti-module--selectInput--32f2c {
  width: 100%;
  border: 1px solid var(--c-input-border-disabled);
  border-radius: var(--s-border-radius-s);
  background: var(--c-input-bg);
  padding: var(--s-1) var(--s-2);
  padding-inline-end: var(--s-5);
}

.SelectMulti-module--dropdown--d1575 {
  /* 304px */
  max-height: calc(var(--s-1) * 38);
  inset-inline-start: 0;
  overflow-y: scroll;
  width: 100vw;
  max-width: calc(100% - 94px);
  margin: auto;
  border: 1px solid var(--c-black);
  padding: 0;
  border-radius: var(--s-1);
}
@media screen and (min-width: 64rem) {
  .SelectMulti-module--dropdown--d1575 {
    max-width: calc(var(--s-10) * 6);
  }
}

.SelectMulti-module--selectButton--3ad80 {
  width: 100%;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--s-1);
  background: var(--c-input-bg);
  text-align: left;
  min-height: var(--s-6);
}
.SelectMulti-module--selectButton--3ad80:focus-within {
  outline: 2px solid blue;
}
.SelectMulti-module--selectButton--3ad80 .SelectMulti-module--buttonContent--9f108 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.SelectMulti-module--icon--dcfcb {
  width: var(--s-4);
  height: var(--s-4);
}

.SelectMulti-module--checkboxMenuItem--7eb37 {
  cursor: pointer;
  border-top-color: var(--c-black) !important;
  height: var(--s-6);
  border-radius: 0;
  color: var(--c-black);
  padding-inline-start: var(--s-5);
}
.SelectMulti-module--checkboxMenuItem--7eb37[data-state=checked] {
  color: var(--c-black);
  background: var(--c-sandy-fur);
}
.SelectMulti-module--checkboxMenuItem--7eb37[data-state=unchecked] {
  background: var(--c-white);
}
.SelectMulti-module--checkboxMenuItem--7eb37:hover, .SelectMulti-module--checkboxMenuItem--7eb37:focus {
  background-color: var(--c-sandy-fur);
  color: var(--c-black);
}

.SelectMulti-module--itemlabel--2945f {
  display: block;
  width: 100%;
  position: relative;
}
.SelectMulti-module--itemlabel--2945f::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--s-4) * -1);
  inset-block-start: 50%;
  transform: translateY(-50%);
  height: 22px;
  width: 22px;
  border: 2px solid var(--c-midnight);
  border-radius: 2px;
}

.SelectMulti-module--checkedIcon--e9c21 {
  display: block;
  background: var(--c-midnight);
  inset-inline-start: var(--s-1);
  inset-block-start: -11px;
  position: absolute;
  height: 23px;
  width: 22px;
  padding-inline: 1px;
  padding-block: var(--s-0-5);
  border-radius: 2px;
  text-align: center;
}

.SelectMulti-module--checkboxTick--446c3 {
  margin-block-end: 5px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 {
  display: flex;
  width: 100%;
  margin-block-start: var(--s-2);
}
@media screen and (min-width: 64rem) {
  .SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 {
    display: none;
  }
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--newsletterpromoouter--ec1e4 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background-color: var(--c-sunshine-yellow);
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--newsletterpromoinner--75715 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  max-width: 56rem;
  padding-block-start: var(--s-2);
}
@media screen and (min-width: 37.5rem) {
  .SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--newsletterpromoinner--75715 {
    padding-block-start: var(--s-4);
  }
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--newsletterpromoinner--75715 .SectionHelpAdviceNewsletterPromo-module--bordersection--0870a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 100vw;
  background-color: var(--c-sunshine-yellow);
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--newsletterpromoinner--75715 .SectionHelpAdviceNewsletterPromo-module--bordersection--0870a .SectionHelpAdviceNewsletterPromo-module--borderbottom--1a47b {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-block-end: -15px;
  overflow: visible;
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--newsletterpromoinner--75715 .SectionHelpAdviceNewsletterPromo-module--bordersection--0870a .SectionHelpAdviceNewsletterPromo-module--borderbottom--1a47b svg {
  width: 100%;
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding-block-start: var(--s-4);
  padding-block-end: var(--s-2);
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 .SectionHelpAdviceNewsletterPromo-module--textwrapper--91a2e {
  width: 90%;
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 .SectionHelpAdviceNewsletterPromo-module--textwrapper--91a2e .SectionHelpAdviceNewsletterPromo-module--title--8f5f1 {
  font-size: var(--s-3);
  line-height: var(--s-4);
}
@media screen and (min-width: 37.5rem) {
  .SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 .SectionHelpAdviceNewsletterPromo-module--textwrapper--91a2e {
    width: 60%;
  }
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 .SectionHelpAdviceNewsletterPromo-module--textwrapper--91a2e p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  line-height: var(--s-4);
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 .SectionHelpAdviceNewsletterPromo-module--textwrapper--91a2e .SectionHelpAdviceNewsletterPromo-module--buttonwrapper--b7811 {
  width: auto;
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--logoarea--11ea9 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  background-color: var(--c-white);
  overflow: visible;
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--logoarea--11ea9 .SectionHelpAdviceNewsletterPromo-module--imagecontainer--1d586 {
  inset-block-end: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.SectionHelpAdviceNewsletterPromo-module--newslettermobile--e7da2 .SectionHelpAdviceNewsletterPromo-module--logoarea--11ea9 .SectionHelpAdviceNewsletterPromo-module--imagecontainer--1d586 img {
  width: 100%;
  object-fit: contain;
}

@media screen and (max-width: 1023px) {
  .SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 {
    display: none;
  }
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 {
  width: 100%;
  margin-block-start: var(--s-2);
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--newsletterpromoouter--ec1e4 {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  /* 504px */
  height: calc(var(--s-1) * 63);
  margin: 0;
  padding: 0;
  background-color: var(--c-sunshine-yellow);
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--newsletterpromoinner--75715 {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  max-width: 56rem;
  display: flex;
  flex-direction: row;
  z-index: var(--z-toast);
  height: auto;
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 70%;
  box-sizing: border-box;
  align-items: flex-end;
  padding-inline-end: var(--s-8);
  width: 70%;
  text-align: left;
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 .SectionHelpAdviceNewsletterPromo-module--textwrapper--91a2e {
  padding-block-start: var(--s-8);
  box-sizing: border-box;
  width: 70%;
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 .SectionHelpAdviceNewsletterPromo-module--textwrapper--91a2e .SectionHelpAdviceNewsletterPromo-module--title--8f5f1 {
  font-size: var(--s-3);
  line-height: var(--s-4);
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 .SectionHelpAdviceNewsletterPromo-module--textwrapper--91a2e p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  line-height: var(--s-4);
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--textarea--36c49 .SectionHelpAdviceNewsletterPromo-module--textwrapper--91a2e h4 {
  font-size: var(--s-3);
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--logoarea--11ea9 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  width: 40%;
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--logoarea--11ea9 .SectionHelpAdviceNewsletterPromo-module--imagecontainer--1d586 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--logoarea--11ea9 .SectionHelpAdviceNewsletterPromo-module--imagecontainer--1d586 img {
  height: 100%;
  margin-block-end: -2px;
  object-fit: contain;
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--bordersection--0870a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  position: absolute;
  inset-block-end: 0;
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--bordersection--0870a .SectionHelpAdviceNewsletterPromo-module--borderbottom--1a47b {
  position: absolute;
  inset-block-end: 0;
  width: 100%;
  margin-block-end: calc(var(--s-1) * -1);
}
.SectionHelpAdviceNewsletterPromo-module--newsletterdesktop--04217 .SectionHelpAdviceNewsletterPromo-module--bordersection--0870a .SectionHelpAdviceNewsletterPromo-module--borderbottom--1a47b svg {
  width: 100%;
}
:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}
.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  .swiper-scrollbar-disabled > &,
  &.swiper-scrollbar-disabled {
    display: none !important;
  }
  .swiper-horizontal > &,
  &.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
  .swiper-vertical > &,
  &.swiper-scrollbar-vertical {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}

/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.TextInput-module--textInputWrapper--12f97 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  --c-input-bg-disabled: transparent;
}
@media screen and (min-width: 37.5rem) {
  .TextInput-module--textInputWrapper--12f97 {
    grid-column: span 2;
    max-width: var(--form-element-width);
  }
}

.TextInput-module--textInputWrapperLargeTextArea--6f6a2 {
}
.TextInput-module--textInputWrapperLargeTextArea--6f6a2 textarea {
  /* 200px */
  min-height: calc(var(--s-1) * 25);
}

.TextInput-module--textInput--dc7e5 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  /* Same size as Select and other elements*/
  min-height: var(--s-6);
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
  padding-block: var(--s-2);
}
.TextInput-module--textInput--dc7e5:disabled {
  background-color: var(--c-gray-300);
}
.TextInput-module--textInput--dc7e5:focus-within {
  outline: 2px solid blue;
}

.TextInput-module--editableFieldWrapper--839ae {
  display: flex;
  align-items: center;
  gap: calc(var(--s-2) + var(--s-0-5));
  width: 100%;
}

.TextInput-module--editableFieldWrapper--839ae .TextInput-module--textInput--dc7e5 {
  border: 2px solid var(--c-midnight);
}

.TextInput-module--characterCount--58bd8 {
  font-size: var(--t-body-m);
}

.TextInput-module--errorMessage--d1de8 {
  font-size: var(--t-body-l);
  margin-block-start: var(--s-1);
  font-family: var(--font-family);
  text-align: start;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SearchInput-module--searchinputwrapper--64a1d {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}
.SearchInput-module--searchinputwrapper--64a1d .SearchInput-module--searchinput--55453 {
  border: 0;
  box-shadow: var(--sh-box-card);
  border-radius: var(--s-1);
  padding-inline-start: var(--s-2);
}
.SearchInput-module--searchinputwrapper--64a1d .SearchInput-module--searchinput--55453::placeholder {
  color: var(--c-dawn);
}

.SearchInput-module--search--ab5e8 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  /* 448px */
  max-width: calc(var(--s-1) * 56);
}

.SearchInput-module--searchtitlecontainer--8cfe3 {
  margin-block-end: var(--s-1);
}

.SearchInput-module--searchtitle--f8ef9 {
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroHeroLeftAligned-module--herowithimagecontainer--fce81 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 248px */
  min-height: calc(var(--s-1) * 31);
}
@media screen and (min-width: 37.5rem) {
  .IntroHeroLeftAligned-module--herowithimagecontainer--fce81 {
    /* 360px */
    min-height: calc(var(--s-1) * 45);
  }
}
@media screen and (min-width: 64rem) {
  .IntroHeroLeftAligned-module--herowithimagecontainer--fce81 {
    background-color: var(--c-sandy-fur);
  }
}

.IntroHeroLeftAligned-module--topsectionouter--b40ca {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}
@media screen and (min-width: 64rem) {
  .IntroHeroLeftAligned-module--topsectionouter--b40ca {
    max-width: calc(var(--s-1) * 100);
    margin: 0 auto;
    margin-block-end: var(--s-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.IntroHeroLeftAligned-module--textcontainer--04736 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  height: 100%;
  padding-block-start: var(--s-8);
}
@media screen and (min-width: 64rem) {
  .IntroHeroLeftAligned-module--textcontainer--04736 {
    background-color: var(--c-sunshine-yellow);
    border-bottom-left-radius: var(--s-1);
    border-bottom-right-radius: var(--s-1);
    max-width: 60%;
    padding-block-end: var(--s-2);
  }
}
.IntroHeroLeftAligned-module--textcontainer--04736 .IntroHeroLeftAligned-module--subheading--3ab72 {
  width: 80%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  min-height: var(--s-4);
  margin-block-end: 0;
  margin-block-start: var(--s-2);
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-black);
  font-size: 21px;
  line-height: var(--lh-body-l);
}
.IntroHeroLeftAligned-module--textcontainer--04736 .IntroHeroLeftAligned-module--title--baa9a {
  width: 80%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  box-sizing: border-box;
}
.IntroHeroLeftAligned-module--textcontainer--04736 {
  z-index: 3;
}

.IntroHeroLeftAligned-module--imagecontainer--4acba {
  display: none;
}
@media screen and (min-width: 64rem) {
  .IntroHeroLeftAligned-module--imagecontainer--4acba {
    display: block;
  }
}

.IntroHeroLeftAligned-module--bordersection--cc86e {
  position: relative;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  height: auto;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media screen and (min-width: 64rem) {
  .IntroHeroLeftAligned-module--bordersection--cc86e {
    display: none;
  }
}

.IntroHeroLeftAligned-module--border--05184 {
  position: relative;
  min-width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: 0;
}
@media screen and (min-width: 64rem) {
  .IntroHeroLeftAligned-module--border--05184 {
    display: none;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroHeroWithImageRight-module--herowithimagecontainer--c07b8 {
  position: relative;
  width: 100%;
  height: auto;
}

.IntroHeroWithImageRight-module--herowithimagecontainerdesktop--8c32f {
}
@media screen and (max-width: 1023px) {
  .IntroHeroWithImageRight-module--herowithimagecontainerdesktop--8c32f {
    display: none;
  }
}

.IntroHeroWithImageRight-module--herowithimagecontainermobile--572eb {
}
@media screen and (min-width: 64rem) {
  .IntroHeroWithImageRight-module--herowithimagecontainermobile--572eb {
    display: none;
  }
}

.IntroHeroWithImageRight-module--topsectionouter--47204 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--c-sunshine-yellow);
}

.IntroHeroWithImageRight-module--topsectioninner--f6b17 {
  position: relative;
  max-width: 56rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-inline-start: auto;
  margin-inline-end: auto;
  margin-block-start: 65px;
  margin-block-end: 65px;
}

.IntroHeroWithImageRight-module--textcontainer--9f77d {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: var(--s-6) 0;
}
@media screen and (min-width: 64rem) {
  .IntroHeroWithImageRight-module--textcontainer--9f77d {
    width: 40%;
  }
}

.IntroHeroWithImageRight-module--title--d81b4 {
  width: 85%;
}

.IntroHeroWithImageRight-module--subtitle--a2e55 {
  width: 85%;
}
.IntroHeroWithImageRight-module--subtitle--a2e55 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
.IntroHeroWithImageRight-module--subtitle--a2e55 pre {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.IntroHeroWithImageRight-module--bordersection--90280 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
  /* 200px */
  min-height: calc(var(--s-1) * 25);
  background-color: var(--c-sunshine-yellow);
  margin-block-end: -3px;
}
@media screen and (min-width: 25.875rem) {
  .IntroHeroWithImageRight-module--bordersection--90280 {
    /* 240px */
    min-height: calc(var(--s-1) * 30);
  }
}
@media screen and (min-width: 32.5rem) {
  .IntroHeroWithImageRight-module--bordersection--90280 {
    /* 280px */
    min-height: calc(var(--s-1) * 35);
  }
}
@media screen and (min-width: 560) {
  .IntroHeroWithImageRight-module--bordersection--90280 {
    /* 304px */
    min-height: calc(var(--s-1) * 38);
  }
}
@media screen and (min-width: 37.5rem) {
  .IntroHeroWithImageRight-module--bordersection--90280 {
    /* 384px */
    min-height: calc(var(--s-1) * 48);
  }
}
@media screen and (min-width: 660) {
  .IntroHeroWithImageRight-module--bordersection--90280 {
    /* 440px */
    min-height: calc(var(--s-1) * 55);
  }
}
@media screen and (min-width: 46.875rem) {
  .IntroHeroWithImageRight-module--bordersection--90280 {
    /* 480px */
    min-height: calc(var(--s-1) * 60);
  }
}
@media screen and (min-width: 64rem) {
  .IntroHeroWithImageRight-module--bordersection--90280 {
    /* 200px */
    min-height: unset;
  }
}

.IntroHeroWithImageRight-module--border--836a8 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
}

.IntroHeroWithImageRight-module--imagecontainer--7704c {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  z-index: 1;
  inset-block-end: 0;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  width: 100%;
  aspect-ratio: 4/3;
}
@media screen and (min-width: 64rem) {
  .IntroHeroWithImageRight-module--imagecontainer--7704c {
    position: relative;
    width: 60%;
    aspect-ratio: 16/9;
    max-width: 586px;
  }
}

.IntroHeroWithImageRight-module--imagewrapper--d954a {
  border-radius: var(--s-1);
  overflow: hidden;
  box-shadow: var(--sh-box-card-hover);
  width: 90%;
  aspect-ratio: 4/3;
}
.IntroHeroWithImageRight-module--imagewrapper--d954a img {
  object-fit: cover;
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .IntroHeroWithImageRight-module--imagewrapper--d954a {
    aspect-ratio: 16/9;
    width: 100%;
    box-shadow: none;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroHeroWithPreHeading-module--herowithimagecontainer--fb753 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 248px */
  min-height: calc(var(--s-1) * 31);
}
@media screen and (min-width: 37.5rem) {
  .IntroHeroWithPreHeading-module--herowithimagecontainer--fb753 {
    /* 320px */
    min-height: calc(var(--s-1) * 40);
  }
}
@media screen and (min-width: 64rem) {
  .IntroHeroWithPreHeading-module--herowithimagecontainer--fb753 {
    /* 320px */
    min-height: calc(var(--s-1) * 40);
  }
}

.IntroHeroWithPreHeading-module--topsectionouter--7259f {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  padding-block-start: var(--s-4);
  box-sizing: border-box;
}

.IntroHeroWithPreHeading-module--textcontainer--03ee3 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  height: 100%;
  z-index: 3;
}

.IntroHeroWithPreHeading-module--preheading--5bfe0 {
  width: 80%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  min-height: var(--s-4);
}

.IntroHeroWithPreHeading-module--preheadingtext--8cdcf {
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-dawn);
  font-size: 21px;
  line-height: var(--lh-body-l);
}

.IntroHeroWithPreHeading-module--title--29e6b {
  width: 80%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  box-sizing: border-box;
}

.IntroHeroWithPreHeading-module--bordersection--cdbf8 {
  position: relative;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  height: auto;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.IntroHeroWithPreHeading-module--bordersection--cdbf8 .IntroHeroWithPreHeading-module--border--effbc {
  position: relative;
  min-width: 100%;
  z-index: var(--z-app-shell);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroOurStories-module--herowithimagecontainer--5f00c {
  width: 100%;
  height: auto;
  background-color: var(--c-sunshine-yellow);
  display: flex;
  justify-content: space-evenly;
}

.IntroOurStories-module--heroinner--e5979 {
  padding: var(--s-6) var(--s-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 90rem;
}
@media screen and (min-width: 46.875rem) {
  .IntroOurStories-module--heroinner--e5979 {
    flex-direction: row;
    padding: var(--s-8) var(--s-2) var(--s-6) var(--s-2);
  }
}

.IntroOurStories-module--textcontainer--b2e0f {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media screen and (min-width: 46.875rem) {
  .IntroOurStories-module--textcontainer--b2e0f {
    width: 60%;
  }
}
.IntroOurStories-module--textcontainer--b2e0f .IntroOurStories-module--subheading--cbfb8 {
  margin-block-end: 0;
  margin-block-start: var(--s-2);
}

.IntroOurStories-module--imagecontainer--993e3 {
  display: none;
}
@media screen and (min-width: 46.875rem) {
  .IntroOurStories-module--imagecontainer--993e3 {
    display: flex;
    width: 40%;
    justify-content: center;
  }
}

.IntroOurStories-module--filterinner--6f732 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* 408px */
  max-width: calc(var(--s-1) * 51);
  margin-block-start: var(--s-2);
}

.IntroOurStories-module--filterlabel--4c561 {
  /* 320px */
  min-width: calc(var(--s-1) * 40);
  text-align: left;
  margin-block-end: var(--s-1);
}
.IntroOurStories-module--filterlabel--4c561 > label {
  font-size: var(--t-body-l);
  font-weight: 500;
}

.IntroOurStories-module--filterselect--b16d2 {
  /* 320px */
  min-width: calc(var(--s-1) * 40);
  text-align: left;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
}
.IntroOurStories-module--filterselect--b16d2 > div {
  border-color: var(--c-oatmeal);
  border-radius: var(--s-1);
  cursor: pointer;
  z-index: 2;
}

.IntroOurStories-module--paginationbreak--f44dd {
  width: 100%;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  padding-block-start: var(--s-4);
  padding-block-end: var(--s-1);
  box-sizing: border-box;
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
  text-align: center;
  font-weight: 600;
}

.IntroOurStories-module--viewmorewrapper--afdd4 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  /* 144px */
  height: calc(var(--s-1) * 18);
  padding: var(--s-2) 0;
}

.IntroOurStories-module--viewmoretext--c5ee0 {
  position: relative;
  font-family: var(--font-family);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  font-weight: 500;
}

.IntroOurStories-module--loadingbar--0b988 {
  display: flex;
  justify-self: left;
  border-block-end: 3px solid var(--c-oatmeal-40);
  width: var(--s-common-element-width-m);
}

.IntroOurStories-module--loadingbarfiller--497d1 {
  border-block-end: 3px solid var(--c-dawn);
  margin-block-end: -3px;
}

.IntroOurStories-module--loadingoverlay--c8e5f {
  pointer-events: none;
  height: var(--s-9);
  width: 100%;
  position: absolute;
  z-index: var(--s-0-5);
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  margin-block-start: calc(var(--s-5) * -1);
}
.IntroOurStories-module--loadingoverlay--c8e5f .IntroOurStories-module--loadingicon--53330 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: var(--s-0-5);
  box-sizing: border-box;
  overflow: visible;
  transform: scale(0.6);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SelectLookup-module--selectlookupwrapper--6d211 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media screen and (min-width: 37.5rem) {
  .SelectLookup-module--selectlookupwrapper--6d211 {
    max-width: var(--form-element-width);
  }
}

.SelectLookup-module--selectlookup--1876c {
  display: flex;
  gap: var(--s-1);
}

.SelectLookup-module--selectlookuptrigger--d2412 {
  display: grid;
  grid-template-columns: calc(100% - var(--s-5)) var(--s-4);
  align-items: center;
  gap: var(--s-1);
  padding: calc(var(--s-1) * 1.5);
  border: none;
  border-radius: var(--s-1);
  background-color: var(--c-white) !important;
  font-family: var(--font-family);
  /* Same size as Select and other elements*/
  height: var(--s-6);
  width: calc(100% - var(--s-4));
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
}
.SelectLookup-module--selectlookuptrigger--d2412:focus-within {
  outline: 2px solid blue;
}

.SelectLookup-module--selectlookuptriggerempty--26aae {
  width: 100%;
}

.SelectLookup-module--selectlookuptriggertext--d8ae5 {
  position: relative;
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.SelectLookup-module--selectlookupsearchinput--dc2f4 {
  margin-block-end: var(--s-2);
  justify-content: flex-start;
  height: auto;
}
.SelectLookup-module--selectlookupsearchinput--dc2f4 input {
  border: 1px solid var(--c-midnight);
}

.SelectLookup-module--selectlookupmodal--4c36b {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  /* 448px */
  max-width: calc(var(--s-1) * 56);
  height: 100%;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
  border-radius: var(--s-0-5);
  background-color: var(--c-sandy-fur);
  padding: var(--s-4);
  z-index: var(--z-toast);
}
.SelectLookup-module--selectlookupmodal--4c36b h3 {
  font-size: var(--t-heading-m);
  line-height: var(--lh-heading-m);
}

.SelectLookup-module--selectlookuploadingindicator--ac97d {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.SelectLookup-module--selectlookupclosebutton--a8f0f {
  border: none;
  background: none;
  padding: 0;
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
}

.SelectLookup-module--selectlookuplist--061c4 {
  width: 100%;
  max-height: 90%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  margin-block-start: var(--s-2);
  list-style: none;
  border-radius: var(--s-0-5);
  border: 1px solid var(--c-black);
  background-color: var(--c-sandy-fur);
}

.SelectLookup-module--selectlookupitem--f0032 {
  width: 100%;
  min-height: var(--s-6);
  border-block-end: 1px solid var(--c-mist);
  background-color: var(--c-white) !important;
  padding: var(--s-0-5) var(--s-1);
  box-sizing: border-box;
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--c-black);
  font-size: var(--t-body-l);
}
.SelectLookup-module--selectlookupitem--f0032:hover {
  background-color: var(--c-sunshine-yellow) !important;
  box-shadow: var(--sh-box-card);
}
.SelectLookup-module--selectlookupitem--f0032:focus {
  background-color: var(--c-sunshine-yellow) !important;
  box-shadow: var(--sh-box-card);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SelectSingle-module--selectWrapper--a35e9 {
  position: relative;
  width: 100%;
}

.SelectSingle-module--selectButton--e59e9 {
  width: 100%;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--s-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--c-input-bg);
  min-height: var(--s-6);
}
.SelectSingle-module--selectButton--e59e9:focus-within {
  outline: 2px solid blue;
}

.SelectSingle-module--selectButton--e59e9:disabled {
  background-color: var(--c-mist);
  font-weight: var(--fw-bold);
  pointer-events: none;
}

.SelectSingle-module--icon--fb28a {
  width: var(--s-4);
  height: var(--s-4);
}

.SelectSingle-module--dropdown--e94f7 {
  /* 304px */
  max-height: calc(var(--s-1) * 38);
  inset-inline-start: 0;
  overflow-y: scroll;
  border: 1px solid var(--c-black);
  padding: 0;
  border-radius: var(--s-1);
  width: 100%;
}

.SelectSingle-module--dropdownContent--d394e {
  max-height: calc(var(--s-1) * 38);
  overflow-y: auto;
  border: 1px solid var(--c-black);
  padding: 0;
  border-radius: var(--s-1);
  background-color: var(--c-input-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.SelectSingle-module--editableFieldDropdown--0834b {
  width: 100%;
}

.SelectSingle-module--activeOption--ef609 {
  text-align: left;
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
}

.SelectSingle-module--menuItem--cabf6 {
  cursor: pointer;
  padding-inline-start: var(--s-2);
  padding-inline-end: var(--s-2);
  padding-block-start: var(--s-2);
  padding-block-end: var(--s-2);
  min-height: var(--s-6);
  height: 100%;
  border-block-start: 1px solid var(--c-black);
  border-radius: 0;
  color: var(--c-black);
  font-size: var(--t-body-l);
  font-weight: var(--fw-bold);
  word-break: break-word;
}
.SelectSingle-module--menuItem--cabf6:first-child {
  border-top: none;
}
.SelectSingle-module--menuItem--cabf6:hover, .SelectSingle-module--menuItem--cabf6:focus {
  background-color: var(--c-sandy-fur);
  color: var(--c-black);
}

.SelectSingle-module--titleItem--1210b {
  display: flex;
  font-family: var(--font-family-heading);
  font-weight: 600;
  padding-block-start: 0;
  padding-block-end: var(--s-1);
  padding-inline-start: var(--s-2);
  width: 100%;
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-1);
}
.SelectSingle-module--titleItem--1210b:not(:first-child) {
  padding-block-start: var(--s-2);
  margin-block-start: 0;
  border-block-start: 1px solid var(--c-mist);
}

.SelectSingle-module--editableFieldWrapper--d65bb {
  display: flex;
  align-items: center;
  gap: calc(var(--s-2) + var(--s-0-5));
  width: 100%;
}

.SelectSingle-module--editableFieldWrapper--d65bb .SelectSingle-module--selectButton--e59e9 {
  border: 2px solid var(--c-midnight);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.EditableField-module--wrapper--5719d {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--s-2) + var(--s-0-5));
  --c-input-bg-disabled: var(--c-sunshine-yellow);
  --outline-disabled: 2px solid var(--c-midnight);
  width: 100%;
  max-width: var(--form-element-width);
}

.EditableField-module--editButton--842c2 {
  padding: 0;
  height: var(--s-6);
}

.EditableField-module--wrapper--5719d label {
  font-weight: var(--fw-bold);
}

.EditableField-module--wrapper--5719d input[type=text]:disabled {
  --c-input-bg-disabled: var(--c-mist);
  background-color: var(--c-input-bg-disabled) !important;
}

.EditableField-module--wrapper--5719d button[aria-haspopup=menu]:disabled {
  outline: var(--outline-disabled);
}

.EditableField-module--wrapper--5719d input[type=text]:disabled {
  outline: var(--outline-disabled);
}

.EditableField-module--numberPicker--4db7b {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: calc(var(--s-1) + var(--s-0-5));
  width: 100%;
  background-color: transparent;
}
@media screen and (min-width: 64rem) {
  .EditableField-module--numberPicker--4db7b {
    flex-basis: var(--form-element-width);
  }
}

.EditableField-module--numberPickerOuterInputContainer--eedd5 {
  display: flex;
  align-items: center;
  gap: calc(var(--s-2) + var(--s-0-5));
  width: 100%;
  padding-inline: var(--s-2);
  background-color: var(--c-white);
  border-radius: var(--s-1);
  outline: var(--outline-disabled);
  height: var(--s-6);
}

.EditableField-module--numberPickerOuterInputContainer--eedd5.EditableField-module--disabled--a5989 {
  --c-input-bg-disabled: var(--c-mist);
  background-color: var(--c-mist);
  font-size: var(--t-body-l);
}

.EditableField-module--numberPickerLabel--4ba90 {
  font-family: var(--font-family);
  font-weight: 600;
  margin: 0;
  padding: 0;
  text-align: start;
}

.EditableField-module--numberPickerInputContainer--cdc71 {
  position: relative;
  /* 168px */
  max-width: calc(var(--s-1) * 21);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  padding-block: var(--s-1);
  max-height: var(--s-6);
}

.EditableField-module--numberPickerInput--83fee {
  max-width: var(--s-5);
  border: 0;
  text-align: center;
  --moz-appearance: textfield;
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--fw-bold);
}
.EditableField-module--numberPickerInput--83fee::-webkit-outer-spin-button, .EditableField-module--numberPickerInput--83fee::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.EditableField-module--numberPickerInput--83fee:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
  border-radius: var(--s-0-5);
}
.EditableField-module--numberPickerInput--83fee:disabled {
  background-color: var(--c-mist);
  font-weight: var(--fw-bold);
  text-align: start;
}

.EditableField-module--baseButton--e4ddb, .EditableField-module--incrementButton--be19d, .EditableField-module--decrementButton--eaf4d {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  padding: 0;
  background-color: var(--c-black);
  color: var(--c-white);
  border-radius: var(--s-1);
  width: var(--s-5);
  font-weight: 500;
  font-size: var(--t-heading-m);
}
.EditableField-module--baseButton--e4ddb:disabled, .EditableField-module--incrementButton--be19d:disabled, .EditableField-module--decrementButton--eaf4d:disabled {
  display: none;
}
.EditableField-module--baseButton--e4ddb:focus, .EditableField-module--incrementButton--be19d:focus, .EditableField-module--decrementButton--eaf4d:focus {
  outline: 2px solid blue;
  outline-offset: 4px;
  border-radius: var(--s-0-5);
}

.EditableField-module--decrementButton--eaf4d {
  margin-inline-end: var(--s-2);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.EditableField-module--incrementButton--be19d {
  margin-inline-start: var(--s-2);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.LikertScale-module--likertScale--5c908 {
  width: 100%;
  background-color: var(--c-white);
  border-radius: var(--s-1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--s-2);
  height: 100%;
  row-gap: var(--s-1);
  --t-cmp-radiogroup-title: var(--font-family);
  /* 600px */
  --fw-cmp-radiogroup-title: calc(var(--s-1) * 75);
  --s-cmp-radiogroup-title: 0 auto 0 0;
  --c-cmp-radiogroup-title: var(--c-black);
}
.LikertScale-module--likertScale--5c908 input {
  height: 100%;
  width: 100%;
  margin: 0;
}
@media screen and (min-width: 64rem) {
  .LikertScale-module--likertScale--5c908 {
    row-gap: unset;
  }
}

.LikertScale-module--likertScaleDisabled--a9a8e {
  background-color: var(--c-mist);
}

.LikertScale-module--likertScaleGroup--a0163 {
  width: 100%;
}
.LikertScale-module--likertScaleGroup--a0163:disabled {
  background-color: var(--c-mist);
}

.LikertScale-module--likertScaleGroupLabel--442c7 {
  padding-block-end: var(--s-2);
  font-weight: var(--fw-bold);
  font-size: var(--t-body-l);
  text-align: start;
  width: 100%;
}
.LikertScale-module--likertScaleGroupLabel--442c7 div {
  width: 100%;
  display: flex;
}
.LikertScale-module--likertScaleGroupLabel--442c7 div span {
  width: 100%;
}

.LikertScale-module--likertScaleOptionsGroup--20eb0 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  pointer-events: none;
  position: relative;
  width: 100%;
}

.LikertScale-module--backgroundBar--2d090 {
  align-self: center;
  background-color: var(--c-mist);
  justify-self: center;
  position: absolute;
  width: 100%;
  height: var(--s-2);
  pointer-events: none;
}

.LikertScale-module--backgroundBarDisabled--922e3 {
  background-color: var(--c-oatmeal);
}

@keyframes LikertScale-module--throb--3e8ee {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.LikertScale-module--likertOption--fa0d8:focus-within {
  outline: 2px solid blue;
  outline-offset: 2px;
  border-radius: var(--s-0-5);
}
.LikertScale-module--likertOption--fa0d8 {
  height: var(--s-4);
  width: 32px;
  margin: 0;
  --c-cmp-radio-icon: var(--c-black);
  --s-cmp-radio-icon: 32px;
  --s-cmp-radio-icon-br: 50%;
  pointer-events: all;
}
.LikertScale-module--likertOption--fa0d8[data-disabled=true] span {
  background-color: var(--c-mist);
}
.LikertScale-module--likertOption--fa0d8[data-disabled=true] {
  pointer-events: none !important;
}

.LikertScale-module--likertOptionLabel--9e1e8 {
  font-size: var(--t-body-l);
  height: var(--s-4);
  margin-inline-start: calc(var(--s-5) * -1);
  width: var(--s-4);
  align-items: center;
  background-color: var(--c-white) !important;
  border: 1px solid black;
  border-radius: 50%;
  color: var(--c-black);
  cursor: pointer;
  display: flex;
  font-family: var(--font-family);
  font-weight: 600;
  justify-content: center;
  position: absolute;
}

.LikertScale-module--likertOptionLabelDisabled--3006d {
  background-color: var(--c-mist) !important;
  color: var(--c-black);
  cursor: not-allowed;
}

.LikertScale-module--likertOptionLabelSelected--3ab57 {
  height: 33px;
  margin-block-start: -3px;
  margin-inline-start: -3px;
  width: 33px;
  background-color: var(--c-sunshine-yellow) !important;
  animation: LikertScale-module--throb--3e8ee 0.5s ease-in-out;
  z-index: 1;
}

.LikertScale-module--likertScaleLabels--96a4b {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin-block-start: var(--s-2);
}

.LikertScale-module--likertScaleExtraLabels--3b487 {
  justify-content: space-evenly;
  max-width: none;
}
@media screen and (min-width: 25.875rem) {
  .LikertScale-module--likertScaleExtraLabels--3b487 {
    padding-inline: 28px;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NDSSurveyHeader-module--surveyHeader--16214 {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  z-index: 100;
  width: 100%;
  max-width: 90rem;
}
@media (min-width: 64rem) {
  .NDSSurveyHeader-module--surveyHeader--16214 {
    padding-inline: var(--s-4);
  }
}

.NDSSurveyHeader-module--surveySections--a69cd {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  border-block-end: 2px solid var(--c-white);
  z-index: 100;
  width: 100%;
  max-width: 90rem;
  margin-block-end: var(--s-1);
}
@media (min-width: 64rem) {
  .NDSSurveyHeader-module--surveySections--a69cd {
    border-block-end: none;
    flex-direction: row;
  }
}

.NDSSurveyHeader-module--surveyHeaderSegment--a9b52 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-inline-end: 2px solid var(--c-white);
  padding: var(--s-1) var(--s-2);
  width: 100%;
  background-color: var(--c-sunshine-yellow);
}
.NDSSurveyHeader-module--surveyHeaderSegment--a9b52:last-child {
  border-inline-end: none;
}
.NDSSurveyHeader-module--surveyHeaderSegment--a9b52:first-child {
  border-inline-end: 2px solid var(--c-white);
}
.NDSSurveyHeader-module--surveyHeaderSegment--a9b52[data-is-open=false] {
  display: none;
}
@media (min-width: 64rem) {
  .NDSSurveyHeader-module--surveyHeaderSegment--a9b52[data-is-open=false] {
    display: flex;
  }
}
@media (min-width: 64rem) {
  .NDSSurveyHeader-module--surveyHeaderSegment--a9b52 {
    margin: var(--s-1);
    border-radius: var(--s-1);
    flex-direction: column;
    align-items: flex-start;
    border-inline-end: none;
    justify-content: space-evenly;
  }
  .NDSSurveyHeader-module--surveyHeaderSegment--a9b52:first-child {
    border-inline-end: none;
  }
}

.NDSSurveyHeader-module--surveyHeaderSegmentInactive--64e11 {
  background-color: var(--c-sunshine-yellow-off-colour);
}

.NDSSurveyHeader-module--surveyHeaderSegmentTitle--e1caf {
  display: flex;
  height: 100%;
  font-family: var(--font-family-heading);
  align-items: center;
  line-height: var(--lh-body-l);
  margin-inline-start: var(--s-2);
}
@media (min-width: 64rem) {
  .NDSSurveyHeader-module--surveyHeaderSegmentTitle--e1caf {
    margin-inline-start: 0;
  }
}

.NDSSurveyHeader-module--surveyHeaderSegmentProgress--49622 {
  display: flex;
  height: 100%;
  font-family: var(--font-family);
  margin-inline-start: var(--s-2);
  align-items: center;
}
@media (min-width: 64rem) {
  .NDSSurveyHeader-module--surveyHeaderSegmentProgress--49622 {
    margin-inline-start: 0;
  }
}

.NDSSurveyHeader-module--surveyHeaderSegmentIcon--78b9c {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline-start: auto;
  margin-inline-end: var(--s-2);
  align-items: center;
}
@media (min-width: 64rem) {
  .NDSSurveyHeader-module--surveyHeaderSegmentIcon--78b9c {
    display: none;
  }
}

.NDSSurveyHeader-module--progressContainer--dce33 {
  position: relative;
  height: var(--s-10);
  width: 100%;
  background-color: var(--c-white);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-evenly;
  padding-inline: var(--s-4);
}
@media (min-width: 64rem) {
  .NDSSurveyHeader-module--progressContainer--dce33 {
    padding-inline: 0;
  }
}

.NDSSurveyHeader-module--sectionProgressBar--189d7 {
  position: relative;
  height: var(--s-10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  margin-block-end: var(--s-2);
  margin-inline: var(--s-0-5);
}
.NDSSurveyHeader-module--sectionProgressBar--189d7:first-child {
  margin-inline-start: 0;
}
.NDSSurveyHeader-module--sectionProgressBar--189d7:last-child {
  margin-inline-end: 0;
}
@media (min-width: 64rem) {
  .NDSSurveyHeader-module--sectionProgressBar--189d7 {
    margin-inline: var(--s-1);
  }
  .NDSSurveyHeader-module--sectionProgressBar--189d7:first-child {
    margin-inline-start: var(--s-1);
  }
  .NDSSurveyHeader-module--sectionProgressBar--189d7:last-child {
    margin-inline-end: var(--s-1);
  }
}

.NDSSurveyHeader-module--progressBar--9e146 {
  position: absolute;
  width: 100%;
  height: var(--s-1);
  background-color: var(--c-mist);
  border-radius: var(--s-1);
}

.NDSSurveyHeader-module--progressStatus--11d03 {
  background-color: var(--c-sunshine-yellow);
  width: 20%;
  transition: width 2s;
}

.NDSSurveyHeader-module--lottieAnimation--07084 {
  position: absolute;
  height: var(--s-8);
  width: max(25%, var(--s-7));
  background-color: transparent;
  margin-block-end: var(--s-1);
  transition: margin-inline-start 1s;
  transition-delay: 1.5s;
  margin-block-start: var(--s-0-5);
  margin-inline-start: calc(var(--s-3) * -1);
}

.NDSSurveyHeader-module--lottieAnimationSitting--ac3cb {
  margin-inline-start: calc(100% - var(--s-4));
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NDSScreenTransition-module--screenTransition--0f5b9 {
  position: fixed;
  inset-block-start: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  background-color: var(--c-sunshine-yellow);
  pointer-events: none;
  animation: NDSScreenTransition-module--screenTransition--0f5b9 0.7s ease-in;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .NDSScreenTransition-module--screenTransition--0f5b9 {
    animation: none;
  }
}

@keyframes NDSScreenTransition-module--screenTransitionContainer--bc931 {
  0% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.NDSScreenTransition-module--screenTransitionContainer--bc931 {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-sunshine-yellow);
  z-index: 1000;
  opacity: 1;
  animation: NDSScreenTransition-module--screenTransitionContainer--bc931 6s forwards;
  pointer-events: none;
}

.NDSScreenTransition-module--screenTransitionwithLottie--fd9cd {
  animation: NDSScreenTransition-module--screenTransitionWithLottie--290af 5s forwards;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.NDSScreenTransition-module--lottieTitle--ad8db {
  position: absolute;
  inset-block-start: 5%;
  transform: rotate(-15deg);
  width: 100%;
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: 4rem;
  z-index: 1;
}

.NDSScreenTransition-module--uydAnimationTitle--ea0c3 {
}

.NDSScreenTransition-module--lottieAnimation--86e23 {
  display: flex;
  align-items: flex-end;
  position: relative;
  height: 100%;
  max-height: 65vh;
  max-width: 90vw;
  margin-inline: auto;
  width: 100%;
  margin-block-start: var(--s-4);
}
.NDSScreenTransition-module--lottieAnimation--86e23 svg {
  height: 50vh !important;
}

.NDSScreenTransition-module--lottieText--06fc2 {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  font-family: var(--font-family-heading);
  font-size: var(--s-3);
  color: var(--c-midnight);
  font-weight: 700;
  text-align: center;
  z-index: 1001;
}
@media (min-width: 64rem) {
  .NDSScreenTransition-module--lottieText--06fc2 {
    inset-block-end: 3%;
  }
}

@keyframes NDSScreenTransition-module--screenTransition--0f5b9 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes NDSScreenTransition-module--screenTransitionWithLottie--290af {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NDSSurveyNavigation-module--navWrapper--7c028 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.NDSSurveyNavigation-module--navigationContainer--35435 {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 61.875rem;
  padding-inline: var(--s-2);
}

.NDSSurveyNavigation-module--endSurvey--e702e {
  font-family: var(--font-family-heading);
  margin-block-end: var(--s-4);
  font-size: var(--s-3);
}
@media screen and (min-width: 64rem) {
  .NDSSurveyNavigation-module--endSurvey--e702e {
    font-size: var(--s-4);
  }
}

.NDSSurveyNavigation-module--navigationContainerCentered--38f72 {
  justify-content: center;
}

.NDSSurveyNavigation-module--buttonContainer--84bd7 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-4);
}
@media screen and (min-width: 37.5rem) {
  .NDSSurveyNavigation-module--buttonContainer--84bd7 {
    max-width: var(--form-element-width);
  }
}
.NDSSurveyNavigation-module--buttonContainer--84bd7:has(> :only-child) {
  justify-content: center;
}
@media screen and (min-width: 37.5rem) {
  .NDSSurveyNavigation-module--buttonContainer--84bd7:has(> :only-child) {
    max-width: unset;
  }
}

.NDSSurveyNavigation-module--nextButton--25101 {
  padding-inline: var(--s-8);
}
.NDSSurveyNavigation-module--nextButton--25101:only-child {
  max-width: calc(var(--form-element-width) / 1.5);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NDSTemplateIntro-module--visuallyHidden--ed5ee {
}

.NDSTemplateIntro-module--ndsIntroTemplateContainer--8fa2a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  padding-block-end: 25px;
  background-color: var(--c-sunshine-yellow);
}
@media (min-width: 64rem) {
  .NDSTemplateIntro-module--ndsIntroTemplateContainer--8fa2a {
    padding-block-end: 45px;
  }
}

.NDSTemplateIntro-module--ndsIntroTemplateHeader--e0cf1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--c-white);
  width: 100%;
}

.NDSTemplateIntro-module--ndsIntroTemplateHeaderTitle--09a81 {
  max-width: 61.875rem;
  padding-inline: var(--s-4);
  padding-block-start: var(--s-3);
  z-index: 1;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .NDSTemplateIntro-module--ndsIntroTemplateHeaderTitle--09a81 {
    padding-block-start: var(--s-8);
    font-size: var(--t-heading-xl);
    line-height: var(--s-5);
  }
}

.NDSTemplateIntro-module--ndsIntroTemplateBody--94325 {
  max-width: 61.875rem;
  padding-block: 25px;
  padding-inline: var(--s-4);
  z-index: 1;
  text-align: left;
}

.NDSTemplateIntro-module--ndsIntroTemplateImage--10b92 {
  width: 100%;
  max-width: 712px;
  padding-inline: var(--s-4);
}
.NDSTemplateIntro-module--ndsIntroTemplateImage--10b92 img {
  width: 100%;
}

.NDSTemplateIntro-module--option--b4c9f {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-1);
  width: 100%;
  max-width: 712px;
  padding-block-start: 25px;
  padding-block-end: 25px;
  padding-inline: var(--s-2);
}
@media (min-width: 64rem) {
  .NDSTemplateIntro-module--option--b4c9f {
    padding-block-start: 45px;
    padding-block-end: 45px;
  }
}
.NDSTemplateIntro-module--option--b4c9f:last-child {
  padding-block-start: 0;
}

.NDSTemplateIntro-module--linebreak--16670 {
  height: 1px;
  width: calc(100% - var(--s-8));
  max-width: 61.875rem;
  background-color: var(--c-black);
  border: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
/* // TODO - Some changes to make around use of remRule but keen to get this in for demo */
.NDSTooltip-module--tooltipRoot--a534d {
  z-index: 1997 !important;
}

.NDSTooltip-module--button--c3e29 {
  --tooltip-size: calc(var(--s-10) * 1.5);
  background: none;
  border: none;
  padding: 0;
  height: var(--tooltip-size);
  width: var(--tooltip-size);
  min-width: var(--tooltip-size);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.NDSTooltip-module--active--e9027 {
  display: none;
}

.NDSTooltip-module--tooltip--d7c9c {
  position: relative;
  background: #ffffff;
  padding: var(--s-2);
  z-index: unset;
  border: 3px solid var(--c-tooltip-border);
  border-radius: var(--s-border-radius-s);
  box-shadow: 0 0 30 0 rgba(0, 0, 0, 0.7);
  color: var(--c-black);
  text-align: left;
  opacity: 1;
  animation: NDSTooltip-module--fade--928c6 0.5s linear;
}
.NDSTooltip-module--tooltip--d7c9c a {
  word-wrap: break-all;
}

@keyframes NDSTooltip-module--fade--928c6 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.NDSTooltip-module--tooltipText--3c3d1 {
  overflow-y: auto;
  height: 100%;
  max-height: 46vh;
  max-width: min(75vw, var(--s-max-content-width) * 0.75);
}

.NDSTooltip-module--tooltip--d7c9c:after {
  content: "";
  position: absolute;
  inset-block-end: -39.3px;
  /* 104px */
  inset-inline-end: calc(var(--s-1) * 13);
  width: var(--s-7);
  height: var(--s-5);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAyCAYAAAAA9rgCAAAACXBIWXMAABYlAAAWJQFJUiTwAAAFw2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4xLWMwMDAgNzkuZWRhMmIzZmFjLCAyMDIxLzExLzE3LTE3OjIzOjE5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjQtMDQtMjRUMTY6MDg6MDIrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQtMDQtMjRUMTY6MTM6MDIrMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI0LTA0LTI0VDE2OjEzOjAyKzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowZDM1MmQyMy1hMzBjLTQyNDItYTUyOS1jYjNmMjY2OGJhOWEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZjBlOTc0ZjktMmVjOC00Mzg0LWJjNTEtZWRjMmRhNjg1MWM4IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZjBlOTc0ZjktMmVjOC00Mzg0LWJjNTEtZWRjMmRhNjg1MWM4IiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMGU5NzRmOS0yZWM4LTQzODQtYmM1MS1lZGMyZGE2ODUxYzgiIHN0RXZ0OndoZW49IjIwMjQtMDQtMjRUMTY6MDg6MDIrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMy4xIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowZDM1MmQyMy1hMzBjLTQyNDItYTUyOS1jYjNmMjY2OGJhOWEiIHN0RXZ0OndoZW49IjIwMjQtMDQtMjRUMTY6MTM6MDIrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMy4xIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpEguy0AAA2zSURBVGiBzZp5cFVVnsc/59x335a8l/de9oQQE7aAGGSRKIKjgqMo2KNT7dpOqW13Vde4UDWUju1U17RTNUtr10zbY4tOg124MAIKIiAujXZkDyoDiOACQUhCIJDkJXnLXc6ZP25QsNkCCfS36lTy3n3vvPO5v9/9nd/vd6+49orBDzXsMp6xU83d8+a9qO68804upJ599lkefPDB6ODK6gPjhqYvLYw5rV1pCfrc516w8gDi6YdLjN8tD2/bu//IyIqyPNav30BJScm5z34OmjnjJpavWEnNiOGvjq7svNsnNY4rznneRe8ewJcTUu7ki7M/7ugpWdfYuJNHHnmY115b2A/LPns989v/ZsPGiXyxu/Uu00isvP2vul+JhgXdaRDnyG1cNTZCdam7/3An5pFMwVWfbF5DIpGgrq6uf1Z/ForH45SXl/P64gWknbxbK4vF2tpqZ7erBX4/BM5yTLxuNsb0SbnkhqEk4a7+fJ9/Stb2Vb+zahnTpk2joqLigkHX1tZy4EAL69aspilZOq2i0J4/qECnetIStECfxaj769lIyxEc7JDkRzXXjU3fF85NHLZsuPuuuzh8+PAFAwZ47rk5TJgwjgP7vyx7Y11kflsSwgGF7Wgct+8DQEqhEWi604IJI9x9147pubewdAh7Ghu59ZZbLiiwEII//GE+0UgO2z87NH3xmpxfSgNiEYnPkJi+vg0AqXvDfdYGxxGMqbaWF0bTPyspH0H9Rx9xxx13XEBkuPjii3nhf34PdLB+m/2L9z4J3hEwFT4f2C446swHgDFmRIRUVpDOCtq7BbYjGVbubO7oEcWOzL9s44aPaG5uZubMmRcMevTo0di2xZ9Wr2Rfe8EMv0+9URBx29JZsGywz3BcNWM2Rt0lEbQGrUFpQEMkpHGVXtHaYVbmRvLGfvjBalpbW5kxY8YFg546dSrbtv0fWz5e72tKlk2Jhu0XR1a6btoSOApcBamsxnbBck48pv3NbHzye/uaEJCxBLYLuUHn/oztExWDL7p3zpw5WJbF3LlzLwwxsGDBa1xeV8enW7bUbm0ctiIS7pkWy1UYEvwmFMUMz2inkO+E7wpQSqARBEz3PikMKiouunfevHkkk0kWLVo0ADinl9/vZ9lbb1E38TI+3frN1EOdlc/8YFLy4bICTTjgY1SVH0dp9Cmg5ckOCOG5OVoQNN37csJybnnFUBYvXkxd3UTa2toGAOn0GjRoEEuWvolpavY3tT6085vwv6Yy4DiarKXIWvqkA04BfFRKg6shlus8UBRzf3tR1XA2bWpg1KhRrFmzZsABT6SJEyeyaNFCcDpZt6Xr8Zffz/27XfsMElFBOCDw+8DnA78pCPohHACjl9S4ojZy3GRCeAcPJyVtSQOBQGuQAsYOtd+2HH3IEqU3HW47xNy5LxAOh7nyyivPO3RNTQ3lZWUseeM1OlPBW4oSAbO2ylnd0Q0Zy9uy0llNdwaSPSCFYOSVs04PDOLbhL0krhCahnius1b78m+zdcC3cvkS6uvrufrqq4nFYucVevz48YRCQd5/ZykHu3KuOpSUVUG/tbSzR5DKalrbFXsOwM79mvyowbhrzxAYAYYBhTHFkS5BVamzuzThPmer4GR8BYO3b/uYF154nkAgwKRJk84r9OTJk7Fti/ffXUlze+zSRNQ35JJqd4nrCiwHbFdgO1BeIBl3TV+ApWfhrrREayiJky5JOPN6MrrDDJXckM4qVixfytKlS6ioGMzw4cPPG/TUqVPp6e7iww9W0dgWH5MflUNGV7lLulKCjOWBl+VLxl4zC6l032tMKaEn4000uMj5zeiLUmVDKnLXD6oczmc7vmDGjBlMnz6dtWvXDgzhCfTU07/mpz99gO72Rl55X97z0XbzpeK4Rn6vWWKMGpKDIQWm4R04lYWLey0cCmhCAYHtCI50S/Ijqru61JmbtfVWYcavMIOxvK1bNjNv3jw2bdpENBplxIgRAw49c+bNNDXtY8O6D9jZnKiNhOXwqlL3jY5uQUlcetfwr/6+lPqtaUyfwG96pj4jYL/AVZ6lERAOgmWzszDiPlMQIykDBZdLMy+4dcsnLFjwKsuXL6ezs5PKykqi0eiAQd988w9oaWli3ZrV7GyOXRLP8w0rSThvJCIGY6+ZhTH/2SryDfjgkxRSCsJBLyr3Bdjv8zoKB9slOUH00HJnfV6u+3TAFEl/OH+CPxgPNe7dyzurVjB//nwaGhro6uqiuLh4QOBnzryZrq4k9R+u4quWSG1u2Bxx+Sj9es2kWRj/fHcRVZeEGBwxaPg8Q9rS5OVIDnWKPgEHA9DRLTEEmD6BlKiimF5fWWz/pzT0jmAod1AgXDgondV8+kkDy5a9ycsvv0x9fT2NjY1YlkU8HicUCvUL9PXXX49hCN577z12t+ZeculQ2XrlDY9sFu7aWoQBotik6fMMT/6+jWTKIesE+aLJRCsBQmP6NLVVDs2HDeIRl3iuIGtDa7sgJ6iJRTS7mw3Cfk1RQpOxwFWCgogibWsOJyWpjBxhOeLHre3GbamsrOzqTtHd2YbrWvh8PiorKxk5ciQ1NTXU1NRQXV1NRUUFZWVlhMPhswK//fYfsnDhMqZMLGuo37hnog8BWgHNNuXDAjz5swKW/THJ3FUWGctHyC9OW4GcTAKN5UI6K8lYgsKY2pWXox+N5apHLVtM6E77bznSVT4t64jxmawyDh7q4uuv32X58uUABAIB8vPzKcjPp7ikhEQiQTweJxaLEYlECIVC+P1+pJRorRFCoJQinU6TTqexLIvGxkZ8oQQInYZjqiUtQLfaFA/y85NHihCyg588laGsyKQgJuiPTnjGEvgMbycoTajNWqvNbV3iiXhElze2GBOtgvD4tJUzOZUVVY5LRVdKCcvOsm1nC1t37EbqNEqpPv1mJFZOUUEeY4emnj8OGAApUIddZFrxwANRgiGTB/8rTeaQoqr0tHXGGUspD95RXkUWCemmWI5aEo/oJV0ZyZ5mSXWpui3g5/qvmgKBsSMC49q7cvO609IX9Osiy/EKfkcJ0GD3vg75vWLHkGAYGkOC5QjrmjHpfxkzRL/658AAElRKIxyXHz0UZlilj2kPJfms0aWmwisi+ksCD9iyBVkHspbAtgUayM/TCwcXuQuTPSY3Xe6wciNUlfgDt0yxx6zdrsN7WoRz4IjB3oM+PW6YNkoS8NY63Pw8REHUpaLYNa4YJXRru9FgOzqdtbyFn7gBIEHbIHa41E31s+HFPH7+TA/7D6b45qBmzFCB7D+Df6veDhMAWQuSPV4e3NkjSGchEiYbMNlkSC/bQ3itm0QUKoq8Kgm+S56CvRbvSvNtU+DEwHiTKUA0ulw81sebv4uya4ufxWtt3tnUg8+QRMMDQH2y5QjPbbO291cpQIMhvEZeKuMVOODBucp733WPT51PuWIhvE/oZgUpxYiJIZ74eR5P3hfFsjR7WhxSGa+l0o+ePqA6MxNJUBaoVhe93+Xq6RHmPJZPbZWJ34SDHYpURiHEud/sGmj1zScFaEejm21KLzJ5anaCt/8twf03hunJaL7c75BMgWkM0Gr7QX2/CIW3Z6s2F1OBWSi5/+5c5j9ewKy/zcGQii/2OWQsL2D8pVn87KOOBGVrVLtCH1HklZr8w2MRnv/HPMYO9WNIONiuaGxxyNoa31+I1U8epc9Uve1c3ekikjB8ZID/eNRPe5PDpl1ZjnS6LPxThj0tLiMHGxgSMpZGKU04KM+7B5w78FGJ3n30iMI0oXiwj5nDTAhIbrwiw2NzumnYZZEThLyIQWm+wfY9DqYpqSg8f1HeR2/C028zCtC2RtsaukBoh8Khfub9MsFLryfpyGhunRKmvEzy0oo0zy5N8XWzwpAmQugBB+8/C59EWgj0ARcREtxzd6Q3U9Bgae65N8INdQF+/b9dvPKezchKQTAwsMnMUeCjJ7b/LH2sJOisB/ntfR8NdDsUDjH599kJptameG5FDzv2OrjaxJBiQPzcy0iFEIDBuUTtM9BxN7l6szh1wIWM4rof5rDwyTg/mhYinVE0trqIY24C9JckINHaDyiE0JzvLFGCympUo4Mvz+CfHo1S/5sIlw03+brZ5mCH9iq0flqVBFwgCwi0NoQQxsA40+lXojoUutWh+lKTXz0eY9atUSoKJXtbHdIZD/xcF+bju+tWI4TW370WWmshhFD6VDdc+1O97SbdopABwZTrI0wa51LfINnwucWeZvfb3vnZ6tgofWzvRPYOfQysgXcy+tZjORv1ZnE0OxhRyTXTYywZZPPHjzPsO9hNU5vCcX29oadvOt22ZPTO6vZGnGN/oX/37xNJgupSiKSicqTB/WNyObzDJBxMMe/tLF83Obha9qkZcfxHjz7d4llRIYSL1i5aS4Qw8KxM70n4/hgYCdASVJtCt7jkVwV48IE4i34R565pAXraFV99c+ZOdyoLe7N4zz5otFYIoXpPiu79rsvxVh64/fxo6truIiQMGR/guQkB7rrW5qPtGTZ+5tDTDnZUYhgnP/9nlml50M73nhZReB7y/Wv/aGvq6P/Q36mrBt3sIn0w5SYfU27M4ct1Dv6AxaqNDgVRfdLAdqbe/+c+892EEiGOBjmJ1uK4aOK1QcQJ2iHndhlIr6+lvlHo/TBsop9FL+Wy4IkgqYzGsk/8tf8HHxKAG7KnqksAAAAASUVORK5CYII=);
}

.NDSTooltip-module--lottieAnimation--0bad8 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--tooltip-size);
}

.NDSTooltip-module--lottieAnimation--0bad8 svg {
  width: var(--tooltip-size);
  height: var(--tooltip-size);
}

.NDSTooltip-module--icon--3543f {
  position: relative;
  width: 100%;
  height: 100%;
}

.NDSTooltip-module--content--ce22b {
  background: unset !important;
  animation-name: unset !important;
  padding: 0;
}

.NDSTooltip-module--close--731fc {
  float: right;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionArticleOrEventCards-module--sectionarticlecardsinner--ee540 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: start;
}

.SectionArticleOrEventCards-module--title--b2feb {
  width: 100%;
  text-align: left;
  margin-inline: auto;
  margin-block-end: var(--s-2);
}

.SectionArticleOrEventCards-module--articlecardsection--47b5c {
  position: relative;
  grid-area: articlecardsection;
  width: 100%;
  height: fit-content;
  overflow: hidden;
  display: grid;
  grid-template-areas: "cards" "showmore";
  grid-template-rows: auto min(auto, var(--s-10));
}

@media (min-width: 56.25rem) {
  .SectionArticleOrEventCards-module--articleCardSectionAdvicePage--a59a5 {
    justify-content: flex-start;
  }
}
.SectionArticleOrEventCards-module--articleCardSectionAdvicePage--a59a5 > div {
  max-width: initial;
}

.SectionArticleOrEventCards-module--bodytext--e863d {
}

.SectionArticleOrEventCards-module--cards--18ecc {
  width: 100%;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-0-5) var(--s-1);
  max-width: 56rem;
  margin-inline: auto;
  grid-template-columns: 1fr;
}
@media (min-width: 56.25rem) {
  .SectionArticleOrEventCards-module--cards--18ecc {
    grid-template-columns: repeat(2, 1fr);
  }
}

.SectionArticleOrEventCards-module--collapsedcards--e456a {
  display: grid;
  width: 100%;
  grid-template-rows: repeat(auto, calc(var(--s-1) * 14));
  gap: var(--s-2);
  overflow: hidden;
  padding: var(--s-2) var(--s-1);
  max-width: 56rem;
  margin-inline: auto;
  grid-template-columns: 1fr;
}
@media (min-width: 56.25rem) {
  .SectionArticleOrEventCards-module--collapsedcards--e456a {
    grid-template-columns: repeat(2, 1fr);
  }
}
.SectionArticleOrEventCards-module--collapsedcards--e456a > div:nth-child(n+3) {
  display: none;
}
@media (min-width: 37.5rem) {
  .SectionArticleOrEventCards-module--collapsedcards--e456a > div:nth-child(n+4) {
    display: flex;
  }
  .SectionArticleOrEventCards-module--collapsedcards--e456a > div:nth-child(n+7) {
    display: none;
  }
}
@media (min-width: 64rem) {
  .SectionArticleOrEventCards-module--collapsedcards--e456a > div:nth-child(n+2) {
    display: flex;
  }
}

@media (min-width: 64rem) {
  .SectionArticleOrEventCards-module--advicePage--df370.SectionArticleOrEventCards-module--showmorearea--63489 {
    display: block;
  }
}
.SectionArticleOrEventCards-module--advicePage--df370 > .SectionArticleOrEventCards-module--gradient--fdd8a {
  inset-block-end: var(--s-4);
}

.SectionArticleOrEventCards-module--showmorearea--63489 {
  position: relative;
  grid-area: showmore;
}
@media (min-width: 64rem) {
  .SectionArticleOrEventCards-module--showmorearea--63489 {
    display: none;
  }
}

.SectionArticleOrEventCards-module--viewmoretext--c5404 {
  padding-inline: var(--s-2);
  margin-block: var(--s-2);
}

.SectionArticleOrEventCards-module--loadingarea--dbda5 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.SectionArticleOrEventCards-module--buttonwrapper--0992e {
  margin-block-start: var(--s-2);
}

.SectionArticleOrEventCards-module--loadingbar--de4cf {
  display: flex;
  justify-self: left;
  border-block-end: 3px solid var(--c-oatmeal-40);
  width: 100%;
  margin-block: var(--s-2);
}

.SectionArticleOrEventCards-module--loadingbarfiller--efe98 {
  border-block-end: 3px solid var(--c-dawn);
  margin-block-end: -3px;
}

.SectionArticleOrEventCards-module--gradient--fdd8a {
  display: var(--gradient-display);
  height: calc(var(--s-1) * 18);
  position: absolute;
  z-index: 2;
  background: url(data:image/svg+xml;base64);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--c-white) 70%);
  width: 100%;
  inset-block-end: var(--s-4);
}
@media (min-width: 64rem) {
  .SectionArticleOrEventCards-module--gradient--fdd8a {
    inset-block-end: var(--s-9);
  }
}

.SectionArticleOrEventCards-module--showmore--1a32f {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  inset-block-end: var(--s-10);
  margin-inline: auto;
  border: 0;
  background-color: transparent;
}

.SectionArticleOrEventCards-module--text--95269 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.SectionArticleOrEventCards-module--text--95269:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionArticleOrEventCards-module--text--95269:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionArticleOrEventCards-module--text--95269:visited {
  text-decoration-style: solid;
}
.SectionArticleOrEventCards-module--text--95269 {
  margin-inline-end: var(--s-0-5);
  font-weight: 600;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
}
.SectionArticleOrEventCards-module--text--95269 .SectionArticleOrEventCards-module--chevron--7b867 {
  position: relative;
  margin-inline-start: var(--s-1);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.SectionArticleOrEventCards-module--text--95269 .SectionArticleOrEventCards-module--chevron--7b867 svg {
  margin-block-end: 0;
}

.SectionArticleOrEventCards-module--showless--43854 {
  margin-block-start: var(--s-1);
  box-sizing: border-box;
}

.SectionArticleOrEventCards-module--labeltext--d4567 {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  font-family: var(--font-family-heading);
  z-index: 2;
  background-color: var(--c-sunshine-yellow);
  padding: var(--s-1);
  border-bottom-left-radius: var(--s-2);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.SectionArticleOrEventCards-module--labeltext--d4567 svg {
  margin-inline-end: var(--s-0-5);
}

.SectionArticleOrEventCards-module--accessibilityalert--0dae3 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NDSTemplateOption-module--visuallyHidden--8df5f {
}

.NDSTemplateOption-module--ndsOptionTemplateContainer--bb6d2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block-end: var(--s-8);
  background-color: var(--c-sunshine-yellow);
  text-align: start;
}
@media (min-width: 64rem) {
  .NDSTemplateOption-module--ndsOptionTemplateContainer--bb6d2 {
    text-align: center;
  }
}

.NDSTemplateOption-module--ndsOptionTemplateHeader--dc17f {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--c-white);
  width: 100%;
  text-align: start;
}
@media (min-width: 64rem) {
  .NDSTemplateOption-module--ndsOptionTemplateHeader--dc17f {
    text-align: center;
  }
}

.NDSTemplateOption-module--ndsOptionTemplateHeaderTitle--42da1 {
  max-width: 61.875rem;
  padding-inline: var(--s-4);
  padding-block-start: var(--s-3);
  z-index: 1;
  font-size: var(--t-heading-l);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .NDSTemplateOption-module--ndsOptionTemplateHeaderTitle--42da1 {
    padding-block-start: var(--s-8);
    font-size: var(--t-heading-xl);
    line-height: var(--s-5);
  }
}

.NDSTemplateOption-module--ndsOptionTemplateWrapper--af76b {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--s-4);
  width: 100%;
  max-width: 61.875rem;
  padding-block-start: var(--s-8);
  padding-inline: var(--s-4);
}
@media screen and (min-width: 64rem) {
  .NDSTemplateOption-module--ndsOptionTemplateWrapper--af76b {
    flex-direction: row;
    column-gap: var(--s-5);
    row-gap: var(--s-5);
    justify-content: flex-start;
    flex-flow: wrap;
    align-items: flex-end;
    padding-inline: 0;
  }
}

.NDSTemplateOption-module--ndsOptionTemplateBody--ca662 {
  max-width: 712px;
  margin-block: var(--s-8);
  text-align: left;
  width: 100%;
}

.NDSTemplateOption-module--ndsOptionTemplateImage--b42dc {
  padding-block-start: var(--s-8);
  width: 100%;
  /* 400px */
  max-width: calc(var(--s-1) * 50);
  padding-inline: var(--s-4);
}
.NDSTemplateOption-module--ndsOptionTemplateImage--b42dc img {
  width: 100%;
}

.NDSTemplateOption-module--ndsOptionTemplateSubtitle--db904 {
  padding-inline: var(--s-4);
}

.NDSTemplateOption-module--option--03dbf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-1);
  width: 100%;
  max-width: 712px;
  padding: var(--s-2);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ArticleOrEventCard-module--cardlink--1e90a {
  height: 100%;
  width: 100%;
  z-index: var(--z-app-shell);
  position: absolute;
}

.ArticleOrEventCard-module--articleeventcardcomponent--324d9 {
  position: relative;
  display: flex;
  height: calc(var(--s-1) * 14);
  background-color: var(--c-white);
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.ArticleOrEventCard-module--noorphan--52598:last-child:nth-child(odd) {
  grid-column: unset;
}

.ArticleOrEventCard-module--articleeventcardimage--fc831 {
  border: var(--s-1) solid var(--c-white);
  height: 100%;
  aspect-ratio: 4/3;
  min-height: 100%;
  max-width: calc(var(--s-10) * 2);
  overflow: hidden;
  position: relative;
  flex: 1 1;
}
.ArticleOrEventCard-module--articleeventcardimage--fc831 picture {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.ArticleOrEventCard-module--articleeventcardimage--fc831 picture img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.ArticleOrEventCard-module--articleeventcarddetails--cdc6d {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-2) 0;
  flex: 2 1;
}
@media screen and (min-width: 23.4375rem) {
  .ArticleOrEventCard-module--articleeventcarddetails--cdc6d {
    padding: var(--s-1);
    padding-inline-start: 0;
  }
}

.ArticleOrEventCard-module--articleeventcardtitle--bd026 {
  position: relative;
  width: 100%;
  padding-inline-end: var(--s-1);
}
.ArticleOrEventCard-module--articleeventcardtitle--bd026 h2 {
  position: relative;
  margin: 0 var(--s-1);
  font-family: var(--font-family);
  font-weight: 600 !important;
  letter-spacing: 0;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  width: 100%;
  white-space: wrap;
  text-overflow: ellipsis;
  /* (Safari + MobileSafari >= 14.6) or (All MobileSafari versions) */
}
@supports (-webkit-appearance: none) or (-webkit-touch-callout: none) {
  .ArticleOrEventCard-module--articleeventcardtitle--bd026 h2 {
    letter-spacing: -1px;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphText-module--text--90831 ul li {
  position: relative;
  padding-inline-start: var(--s-5);
  margin-block-end: var(--s-1);
}
.ParagraphText-module--text--90831 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-black);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphContentSection-module--contentarea--b3d59 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: relative;
  width: 100%;
  /* 304px */
  min-height: calc(var(--s-1) * 38);
  box-sizing: border-box;
}
.ParagraphContentSection-module--contentarea--b3d59 .ParagraphContentSection-module--heading--118cb {
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-2);
}
.ParagraphContentSection-module--contentarea--b3d59 *::selection {
  background-color: var(--c-sunshine-yellow);
}
.ParagraphContentSection-module--contentarea--b3d59.ParagraphContentSection-module--primary--b6c91 *::selection {
  background-color: var(--c-white);
}

.ParagraphContentSection-module--imagelayoutshiftblock--9e596 {
  min-height: 215px;
}
@media screen and (min-width: 37.5rem) {
  .ParagraphContentSection-module--imagelayoutshiftblock--9e596 {
    min-height: 255px;
  }
}
@media screen and (min-width: 75rem) {
  .ParagraphContentSection-module--imagelayoutshiftblock--9e596 {
    min-height: 525px;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionStandardSignPostCards-module--signpostcards--6f793 {
  position: relative;
  display: block;
  width: 100%;
}

.SectionStandardSignPostCards-module--header--81d0e {
  width: 100%;
  text-align: start;
  box-sizing: border-box;
  margin-block-end: var(--s-2);
}

.SectionStandardSignPostCards-module--bodytext--f71b1 {
}

.SectionStandardSignPostCards-module--cardsection--6e225 {
  width: 100%;
  justify-content: space-between;
  gap: var(--s-2);
  max-width: 56rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
@media (min-width: 37.5rem) {
  .SectionStandardSignPostCards-module--cardsection--6e225 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.SectionStandardSignPostCards-module--cardsection--6e225.SectionStandardSignPostCards-module--threeColumnLayout--e0f59 {
  max-width: unset;
}
@media (min-width: 64rem) {
  .SectionStandardSignPostCards-module--cardsection--6e225.SectionStandardSignPostCards-module--threeColumnLayout--e0f59 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.SectionStandardSignPostCards-module--buttonwrapper--8e89c {
  position: relative;
  width: 90%;
  margin: var(--s-2) auto;
}
@media (min-width: 37.5rem) {
  .SectionStandardSignPostCards-module--buttonwrapper--8e89c {
    /* 352px */
    max-width: calc(var(--s-1) * 44);
  }
}
@media (min-width: 75rem) {
  .SectionStandardSignPostCards-module--buttonwrapper--8e89c {
    margin-top: var(--s-4);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroRehoming-module--introcolumnouter--a7f6a {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 0;
}
@media screen and (min-width: 37.5rem) {
  .IntroRehoming-module--introcolumnouter--a7f6a {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 64rem) {
  .IntroRehoming-module--introcolumnouter--a7f6a {
    margin-block-end: 0;
  }
}
.IntroRehoming-module--introcolumnouter--a7f6a {
  background-color: var(--c-sunshine-yellow);
  overflow: hidden;
}

.IntroRehoming-module--introcolumninner--bdec9 {
  display: flex;
  width: 100%;
  max-width: 64rem;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: var(--c-sunshine-yellow);
  margin-block-start: var(--s-4);
}
@media screen and (max-width: 1023px) {
  .IntroRehoming-module--introcolumninner--bdec9 {
    display: none;
  }
}

.IntroRehoming-module--twocolumncontent--f95bb {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: calc(var(--s-1) * 85);
  /* 680px */
}
@media screen and (min-width: 112.5rem) {
  .IntroRehoming-module--twocolumncontent--f95bb {
    /* 752px */
    height: calc(var(--s-1) * 94);
  }
}

.IntroRehoming-module--leftcolumn--e36eb {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: flex-start;
  margin-block-start: var(--s-6);
  padding: var(--s-2);
  position: relative;
  width: 50%;
  height: 100%;
  text-align: center;
}
@media screen and (min-width: 64rem) {
  .IntroRehoming-module--leftcolumn--e36eb {
    text-align: left;
  }
}

.IntroRehoming-module--text--ad9b7 {
  height: calc(var(--s-1) * 28);
  /* 224px */
  align-self: center;
  margin-block-start: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: 90%;
}
@media screen and (min-width: 37.5rem) {
  .IntroRehoming-module--text--ad9b7 {
    max-width: 70%;
  }
}
.IntroRehoming-module--text--ad9b7 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
.IntroRehoming-module--text--ad9b7 pre {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.IntroRehoming-module--rightcolumn--d5cc6 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: var(--s-8);
  width: 50%;
  height: 100%;
}

.IntroRehoming-module--columnscurvedborderwrapper--98918 {
  position: absolute;
  overflow: hidden;
  width: 100%;
  inset-block-end: calc(var(--s-6) * -1);
  pointer-events: none;
}
@media screen and (min-width: 112.5rem) {
  .IntroRehoming-module--columnscurvedborderwrapper--98918 {
    bottom: calc(var(--s-2) * -1);
  }
}

.IntroRehoming-module--columnscurvedborder--6d924 {
  position: relative;
  overflow: hidden;
  max-height: 80%;
  inset-block-start: calc(var(--s-1) * -1);
}

/* TWO ROWS */
.IntroRehoming-module--tworowcontent--930af {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .IntroRehoming-module--tworowcontent--930af {
    display: none;
  }
}

.IntroRehoming-module--toprow--6bceb {
  position: relative;
  width: 100%;
  text-align: center;
  padding: var(--s-2);
  box-sizing: border-box;
  height: 425px;
}
@media screen and (min-width: 25.875rem) {
  .IntroRehoming-module--toprow--6bceb {
    /* 448px */
    height: calc(var(--s-1) * 56);
  }
}
@media screen and (min-width: 37.5rem) {
  .IntroRehoming-module--toprow--6bceb {
    /* 552px */
    height: calc(var(--s-1) * 69);
  }
}

.IntroRehoming-module--text--ad9b7 {
  height: calc(var(--s-1) * 28);
  /* 224px */
  align-self: center;
  margin-block-start: var(--s-6);
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: 90%;
}
@media screen and (min-width: 37.5rem) {
  .IntroRehoming-module--text--ad9b7 {
    max-width: 70%;
  }
}
.IntroRehoming-module--text--ad9b7 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
.IntroRehoming-module--text--ad9b7 pre {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.IntroRehoming-module--rowscurvedborderwrapper--bdede {
  position: absolute;
  z-index: var(--z-app-shell);
  overflow: hidden;
  width: 100vw;
  margin-inline-start: -16px;
  inset-block-end: -16px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.IntroRehoming-module--rowscurvedborder--70181 {
  position: relative;
  overflow: hidden;
  max-height: 80%;
  inset-block-start: calc(var(--s-1) * -1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.IntroRehoming-module--rowscurvedborder--70181 svg {
  width: 100%;
  inset-block-end: 0;
}

.IntroRehoming-module--dogimage--50521 {
  position: absolute;
  width: 100%;
  max-height: 50%;
  inset-inline-start: 0;
  inset-block-end: 0;
  display: flex;
  justify-content: center;
}
.IntroRehoming-module--dogimage--50521 picture {
  position: relative;
  height: 60%;
  width: 60%;
}
.IntroRehoming-module--dogimage--50521 picture > img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 64rem) {
  .IntroRehoming-module--dogimage--50521 {
    left: 12%;
    inset-block-end: 7%;
  }
  .IntroRehoming-module--dogimage--50521 picture {
    width: 80%;
    height: 80%;
  }
}
@media screen and (min-width: 112.5rem) {
  .IntroRehoming-module--dogimage--50521 {
    left: 12%;
    inset-block-end: 14%;
  }
  .IntroRehoming-module--dogimage--50521 picture {
    width: 80%;
    height: 80%;
  }
}
@media screen and (min-width: 550) {
  .IntroRehoming-module--dogimage--50521 {
    /* Custom BP to handle poor scaling */
    bottom: 0;
  }
  .IntroRehoming-module--dogimage--50521 picture {
    width: 50%;
    height: 50%;
  }
}
@media screen and (min-width: 37.5rem) {
  .IntroRehoming-module--dogimage--50521 {
    bottom: 4%;
  }
  .IntroRehoming-module--dogimage--50521 picture {
    width: 60%;
    height: 60%;
  }
}
@media screen and (min-width: 46.875rem) {
  .IntroRehoming-module--dogimage--50521 {
    bottom: 0%;
  }
  .IntroRehoming-module--dogimage--50521 picture {
    width: 50%;
    height: 50%;
  }
}
@media screen and (min-width: 56.25rem) {
  .IntroRehoming-module--dogimage--50521 {
    bottom: 4%;
  }
  .IntroRehoming-module--dogimage--50521 picture {
    width: 40%;
    height: 40%;
  }
}
@media screen and (min-width: 64rem) {
  .IntroRehoming-module--dogimage--50521 {
    bottom: 8%;
  }
  .IntroRehoming-module--dogimage--50521 picture {
    width: 70%;
    height: 70%;
  }
}

.IntroRehoming-module--bottomrow--63f64 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 520px */
  height: calc(var(--s-1) * 65);
  width: 100%;
  background-color: var(--c-sandy-fur);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroSponsorADogSearch-module--mobile--87cf1 {
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .IntroSponsorADogSearch-module--mobile--87cf1 {
    display: none;
  }
}
.IntroSponsorADogSearch-module--mobile--87cf1 .IntroSponsorADogSearch-module--herowithimagecontainerouter--cf6ef {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  z-index: var(--z-app-shell);
  overflow: hidden;
}
.IntroSponsorADogSearch-module--mobile--87cf1 .IntroSponsorADogSearch-module--herowithimagecontainer--4faf1 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 232px */
  min-height: calc(var(--s-1) * 29);
  max-width: 1023px;
}
@media screen and (min-width: 37.5rem) {
  .IntroSponsorADogSearch-module--mobile--87cf1 .IntroSponsorADogSearch-module--herowithimagecontainer--4faf1 {
    /* 320px */
    min-height: calc(var(--s-1) * 40);
  }
}
.IntroSponsorADogSearch-module--mobile--87cf1 .IntroSponsorADogSearch-module--herowithimagecontainer--4faf1 img {
  width: 100%;
  height: auto;
}
.IntroSponsorADogSearch-module--mobile--87cf1 .IntroSponsorADogSearch-module--bordersection--34724 {
  position: absolute;
  width: 100%;
  height: auto;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.IntroSponsorADogSearch-module--mobile--87cf1 .IntroSponsorADogSearch-module--border--247a5 {
  position: relative;
  min-width: 100%;
  z-index: var(--z-app-shell);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: 0;
}
.IntroSponsorADogSearch-module--mobile--87cf1 .IntroSponsorADogSearch-module--textcontainer--e8241 {
  width: 90%;
  /* 400px */
  max-width: calc(var(--s-1) * 50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: var(--s-4) 0;
}
.IntroSponsorADogSearch-module--mobile--87cf1 .IntroSponsorADogSearch-module--textcontainer--e8241 .IntroSponsorADogSearch-module--perweektext--2c616 {
  font-family: var(--font-family-heading);
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
.IntroSponsorADogSearch-module--mobile--87cf1 .IntroSponsorADogSearch-module--textcontainer--e8241 .IntroSponsorADogSearch-module--buttonwrapper--68b7a {
  margin: var(--s-2) 0;
}

.IntroSponsorADogSearch-module--desktop--0cb06 {
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .IntroSponsorADogSearch-module--desktop--0cb06 {
    display: none;
  }
}
.IntroSponsorADogSearch-module--desktop--0cb06 .IntroSponsorADogSearch-module--herowithimagecontainerouter--cf6ef {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  z-index: var(--z-app-shell);
  overflow: hidden;
}
.IntroSponsorADogSearch-module--desktop--0cb06 .IntroSponsorADogSearch-module--herowithimagecontainerinner--587de {
  display: flex;
  width: 100%;
  margin-block-end: var(--s-4);
}
.IntroSponsorADogSearch-module--desktop--0cb06 .IntroSponsorADogSearch-module--herowithimagecontainer--4faf1 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 648px */
  max-width: calc(var(--s-1) * 81);
  height: 417px;
}
.IntroSponsorADogSearch-module--desktop--0cb06 .IntroSponsorADogSearch-module--herowithimagecontainer--4faf1 img {
  height: 417px;
  width: calc(var(--s-1) * 75);
  /* 600px */
}
.IntroSponsorADogSearch-module--desktop--0cb06 .IntroSponsorADogSearch-module--bordersection--34724 {
  width: calc(var(--s-1) * 75);
  /* 600px */
  position: absolute;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.IntroSponsorADogSearch-module--desktop--0cb06 .IntroSponsorADogSearch-module--border--247a5 {
  position: relative;
  min-width: 100%;
  z-index: var(--z-app-shell);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: 0;
}
.IntroSponsorADogSearch-module--desktop--0cb06 .IntroSponsorADogSearch-module--textcontainer--e8241 {
  width: 95%;
  /* 424px */
  max-width: calc(var(--s-1) * 53);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-inline-start: var(--s-4);
  box-sizing: border-box;
}
.IntroSponsorADogSearch-module--desktop--0cb06 .IntroSponsorADogSearch-module--textcontainer--e8241 h1 {
  margin-block-start: var(--s-4);
}
.IntroSponsorADogSearch-module--desktop--0cb06 .IntroSponsorADogSearch-module--textcontainer--e8241 .IntroSponsorADogSearch-module--perweektext--2c616 {
  font-family: var(--font-family-heading);
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
.IntroSponsorADogSearch-module--desktop--0cb06 .IntroSponsorADogSearch-module--textcontainer--e8241 .IntroSponsorADogSearch-module--buttonwrapper--68b7a {
  margin: var(--s-2) 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroWithImageTeal-module--herowithimagecontainer--75a22 {
  position: relative;
  width: 100%;
  height: auto;
}

.IntroWithImageTeal-module--topsectionouter--c0973 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  padding-block-start: var(--s-8);
  box-sizing: border-box;
  background-color: var(--c-teal);
}

.IntroWithImageTeal-module--textcontainer--7d462 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}
@media screen and (min-width: 37.5rem) {
  .IntroWithImageTeal-module--textcontainer--7d462 .IntroWithImageTeal-module--title--a9af2 {
    margin-top: var(--s-4);
  }
}
@media screen and (min-width: 112.5rem) {
  .IntroWithImageTeal-module--textcontainer--7d462 .IntroWithImageTeal-module--title--a9af2 {
    padding-block-start: var(--s-2);
    box-sizing: border-box;
  }
}
.IntroWithImageTeal-module--textcontainer--7d462 .IntroWithImageTeal-module--title--a9af2 {
  width: 80%;
  max-width: calc(var(--s-1) * 75);
  /* 600px */
}
.IntroWithImageTeal-module--textcontainer--7d462 .IntroWithImageTeal-module--subtitle--4fe34 {
  width: 85%;
  margin-block-end: var(--s-4);
}
@media screen and (min-width: 37.5rem) {
  .IntroWithImageTeal-module--textcontainer--7d462 .IntroWithImageTeal-module--subtitle--4fe34 {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 75rem) {
  .IntroWithImageTeal-module--textcontainer--7d462 .IntroWithImageTeal-module--subtitle--4fe34 {
    margin-bottom: var(--s-2);
  }
}
.IntroWithImageTeal-module--textcontainer--7d462 .IntroWithImageTeal-module--subtitle--4fe34 {
  max-width: calc(var(--s-1) * 75);
  /* 600px */
}
.IntroWithImageTeal-module--textcontainer--7d462 .IntroWithImageTeal-module--subtitle--4fe34 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.IntroWithImageTeal-module--bordersection--b36b3 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  background-color: var(--c-teal);
  height: auto;
}

.IntroWithImageTeal-module--border--aafe2 {
  position: relative;
  min-width: 100%;
  height: 100%;
  margin-block-end: -6px;
  z-index: var(--z-app-shell);
}

.IntroWithImageTeal-module--imagewrapper--fd2e3 {
  /* 648px */
  max-width: calc(var(--s-1) * 81);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2);
  box-sizing: border-box;
}
.IntroWithImageTeal-module--imagewrapper--fd2e3 img {
  object-fit: contain;
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NDSTemplateQuestion-module--visuallyHidden--a5f67 {
}

.NDSTemplateQuestion-module--ndsQuestionTemplateContainer--87b1d {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-block-end: var(--s-4);
  background-color: var(--c-sunshine-yellow);
  text-align: start;
}
@media (min-width: 64rem) {
  .NDSTemplateQuestion-module--ndsQuestionTemplateContainer--87b1d {
    text-align: center;
  }
}

.NDSTemplateQuestion-module--ndsQuestionTemplateHeader--9376f {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--c-white);
  width: 100%;
  text-align: start;
}
@media (min-width: 64rem) {
  .NDSTemplateQuestion-module--ndsQuestionTemplateHeader--9376f {
    text-align: center;
  }
}

.NDSTemplateQuestion-module--ndsQuestionTemplateHeaderTitle--fc9d4 {
  max-width: 61.875rem;
  padding-inline: var(--s-4);
  padding-block-start: var(--s-3);
  z-index: 1;
  font-size: var(--t-heading-l);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .NDSTemplateQuestion-module--ndsQuestionTemplateHeaderTitle--fc9d4 {
    padding-block-start: var(--s-8);
    font-size: var(--t-heading-xl);
    line-height: var(--lh-heading-s);
  }
}

.NDSTemplateQuestion-module--ndsQuestionTemplateHeaderSubtitle--d8074 {
  max-width: 61.875rem;
  padding-block-start: var(--s-1);
  padding-inline: var(--s-4);
  margin-block-end: 0;
  z-index: 1;
  width: 100%;
}

.NDSTemplateQuestion-module--ndsQuestionTemplateWrapper--31364 {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  align-items: center;
  row-gap: var(--s-4);
  width: 100%;
  height: 100%;
  max-width: 61.875rem;
  padding-block-start: var(--s-8);
  padding-inline: var(--s-4);
}
@media screen and (min-width: 37.5rem) {
  .NDSTemplateQuestion-module--ndsQuestionTemplateWrapper--31364 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
    padding-inline: var(--s-2);
  }
}

.NDSTemplateQuestion-module--navigation--c4429 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block-start: var(--s-8);
  max-width: 712px;
  padding-inline: var(--s-4);
}

.NDSTemplateQuestion-module--tooltipContainer--c2127 {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  z-index: 3;
  margin-inline-start: auto;
}
@media (min-width: 37.5rem) {
  .NDSTemplateQuestion-module--tooltipContainer--c2127 {
    grid-column: span 2;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.QuickLinksEmbedded-module--quicklinksinner--1253b {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  background-color: var(--c-sandy-fur);
  border-radius: var(--s-0-5);
  align-self: center;
  margin-inline: auto;
  padding-block: var(--s-4);
  box-sizing: border-box;
  margin-block-end: 0;
  width: 100%;
}

.QuickLinksEmbedded-module--quicklinkswrapper--23800 {
  position: relative;
  background-color: transparent;
  width: 100%;
  height: auto;
  max-width: 64rem;
  margin-inline: auto;
}

.QuickLinksEmbedded-module--quicklinks--ff5d8 {
  height: auto;
  width: 100%;
}

.QuickLinksEmbedded-module--swiperwrapper--7f067 {
  position: relative;
  width: 100%;
  /* 88px */
  min-height: calc(var(--s-1) * 11);
}

.QuickLinksEmbedded-module--swiper--c2030 {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: var(--s-1) 0;
}

.QuickLinksEmbedded-module--embeddedquicklinkitem--5ddd4 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.QuickLinksEmbedded-module--iconwrapper--74bee {
  position: relative;
  height: var(--s-10);
  width: var(--s-10);
  display: flex;
  justify-content: center;
  align-items: center;
}
.QuickLinksEmbedded-module--iconwrapper--74bee img {
  position: relative;
  height: 100%;
  width: 100%;
  transition: transform 0.7s;
}
@media (min-width: 64rem) {
  .QuickLinksEmbedded-module--iconwrapper--74bee {
    height: 112px;
    width: 112px;
  }
}
.QuickLinksEmbedded-module--iconwrapper--74bee:hover img {
  transform: scale(1.2);
}

.QuickLinksEmbedded-module--quicklinkssectiontitle--7b980 {
  font-size: var(--t-heading-s);
  line-height: var(--lh-heading-s);
}
@media (min-width: 64rem) {
  .QuickLinksEmbedded-module--quicklinkssectiontitle--7b980 {
    font-size: var(--t-heading-l);
    line-height: var(--lh-heading-l);
  }
}
.QuickLinksEmbedded-module--quicklinkssectiontitle--7b980 {
  margin-block-start: var(--s-2);
}

.QuickLinksEmbedded-module--quicklinkstitle--b031a {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  padding-block-start: 0;
  max-width: 80%;
  margin: var(--s-2) 0;
}
.QuickLinksEmbedded-module--bordersection--b56f1 {
  position: relative;
  display: flex !important;
  min-width: 100%;
  background-color: var(--c-sandy-fur);
  height: auto;
}

.QuickLinksEmbedded-module--borderbottom--9f228 {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  margin-block-start: -2px;
  min-width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphSupportWidget-module--inner--677a0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  z-index: var(--z-toast);
  height: auto;
  margin: 0 auto;
  width: 100%;
  padding: var(--s-2);
  box-sizing: border-box;
  border-radius: var(--s-2);
  max-width: 56rem;
  margin-inline: auto;
}

.ParagraphSupportWidget-module--title--a9719 {
  width: 100%;
  padding-block-start: var(--s-4);
  margin-block-end: var(--s-2);
}

.ParagraphSupportWidget-module--titlenopadding--66e41 {
  width: 100%;
  margin-block-end: var(--s-2);
}

.ParagraphSupportWidget-module--description--edf74,
.ParagraphSupportWidget-module--widget--07c00 {
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SponsorMeButton-module--sponsormebuttoncontainer--16e10 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  gap: var(--s-2);
}

.SponsorMeButton-module--sectionbreak--ad15a {
  width: 95%;
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroSponsorDogProfile-module--sadprofilecontainer--8c0df {
  position: relative;
  width: 100%;
  height: auto;
}

.IntroSponsorDogProfile-module--dogdetails--0123d {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--c-sandy-fur);
  padding-block: var(--s-8);
}
.IntroSponsorDogProfile-module--dogdetails--0123d p {
  margin: 0;
  margin-block-start: var(--s-0-5);
  margin-block-end: var(--s-0-5);
  padding: 0;
  font-size: var(--s-3);
  line-height: var(--lh-body-s);
  color: var(--c-dawn);
  font-weight: 600;
}
.IntroSponsorDogProfile-module--dogdetails--0123d {
  z-index: var(--z-app-shell);
}

.IntroSponsorDogProfile-module--bottombordersection--5430a {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: auto;
  inset-block-end: 0;
  z-index: 3;
}

.IntroSponsorDogProfile-module--bottomborder--89771 {
  position: relative;
  min-width: 100%;
  height: 100%;
  margin-block-end: calc(var(--s-0-5) * -0.5);
  z-index: var(--z-app-shell);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.NDSThankYou-module--visuallyHidden--66099 {
}

.NDSThankYou-module--ndsThankYouContainer--cffaa {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  position: relative;
}

.NDSThankYou-module--ndsThankYouTemplateHeader--4f211 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--c-white);
  width: 100%;
  gap: var(--s-2);
  padding-inline-start: var(--s-3);
  padding-inline-end: var(--s-3);
}
@media (min-width: 64rem) {
  .NDSThankYou-module--ndsThankYouTemplateHeader--4f211 {
    gap: var(--s-4);
  }
}

.NDSThankYou-module--ndsThankYouTemplateHeaderTitle--418ba {
  padding-block-start: var(--s-8);
  z-index: 1;
  rotate: -5deg;
  margin: 0;
  font-size: var(--t-heading-xxl);
}

.NDSThankYou-module--thankYouTemplateBody--2fb2a {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: var(--s-2);
  gap: var(--s-2);
}

.NDSThankYou-module--ndsThankYouTemplateImage--dd84f {
  padding-block: var(--s-8);
  min-width: 100%;
  padding-inline: var(--s-4);
  background-color: var(--c-midnight);
}

.NDSThankYou-module--ndsThankYouTemplateImage--dd84f {
  padding-block: 0;
  width: 100%;
  max-width: 712px;
  padding-inline: var(--s-4);
}
.NDSThankYou-module--ndsThankYouTemplateImage--dd84f img {
  width: 100%;
}

.NDSThankYou-module--lottieAnimation--aba46 {
  margin: 0 auto;
  max-width: calc(var(--s-1) * 80);
}

.NDSThankYou-module--thankYouSocialSharingContainer--aa3b8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-2);
}

.NDSThankYou-module--shareText--7a5c8 {
  text-align: center;
}

.NDSThankYou-module--socialSharingText--47445 {
  text-align: center;
}
.NDSThankYou-module--socialSharingText--47445 p {
  font-weight: var(--fw-bold);
}

.NDSThankYou-module--socialSharing--5e82a {
  display: inline-flex;
  margin: auto;
}
.NDSThankYou-module--socialSharing--5e82a div {
  width: fit-content;
  padding-block: var(--s-1);
}
.NDSThankYou-module--socialSharing--5e82a div a {
  width: fit-content;
  height: fit-content;
}
.NDSThankYou-module--socialSharing--5e82a div a svg {
  /* 48px */
  width: calc(var(--s-1) * 6);
  /* 48px */
  height: calc(var(--s-1) * 6);
}

.NDSThankYou-module--thankYouDonateNow--5b994 section {
  padding-inline: 0;
}

.NDSThankYou-module--thankYouDonateNow--5b994 section > div {
  padding-inline: 0;
}

.NDSThankYou-module--thankYouPostcodeLotterySignupWrapper--32c30 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: center;
  margin: auto;
}

.NDSThankYou-module--thankYouPostcodeLotterySignupTitle--e48aa {
  display: flex;
  flex-direction: column;
}

.NDSThankYou-module--thankYouPostcodeLotterySignupSmallText--c17e9 {
  font-size: var(--t-heading-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .NDSThankYou-module--thankYouPostcodeLotterySignupSmallText--c17e9 {
    line-height: var(--lh-body-l);
    font-size: var(--t-body-l);
  }
}

.NDSThankYou-module--thankYouPostcodeLotterySignupImage--6614b {
  width: 100%;
  max-width: calc(var(--s-1) * 37);
}
@media (min-width: 64rem) {
  .NDSThankYou-module--thankYouPostcodeLotterySignupImage--6614b {
    max-width: calc(var(--s-1) * 44);
  }
}

@media (min-width: 64rem) {
  .NDSThankYou-module--thankYouPostcodeLotterySignup--b15f0 {
    padding-block-start: calc(var(--s-1) * 12);
  }
}

.NDSThankYou-module--thankYouPostcodeLotterySignupButtonWrapper--e787d {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  max-width: calc(var(--s-1) * 50);
  background-color: var(--c-sunshine-yellow-30pc-lighter);
  padding: var(--s-3);
  border-radius: var(--s-2);
}
@media (min-width: 64rem) {
  .NDSThankYou-module--thankYouPostcodeLotterySignupButtonWrapper--e787d {
    padding: var(--s-5);
  }
}

.NDSThankYou-module--thankYouPostcodeLotterySignupButton--e58f3,
.NDSThankYou-module--thankYouPostcodeLotterySignupButton--e58f3:hover,
.NDSThankYou-module--thankYouPostcodeLotterySignupButton--e58f3:focus,
a:focus .NDSThankYou-module--thankYouPostcodeLotterySignupButton--e58f3 {
  border: 2px solid var(--c-midnight);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.PageNavigation-module--pagenavigationwrapper--7d9e3 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  padding: 0 var(--s-2);
  margin: var(--s-4) auto;
  box-sizing: border-box;
}
@media only screen and (min-width: 37.5rem) {
  .PageNavigation-module--pagenavigationwrapper--7d9e3 {
    margin: var(--s-4) auto;
    padding: 0;
  }
}

.PageNavigation-module--pagenavsectionbreak--fde33 {
  width: 95%;
  margin-block-start: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
  margin: 0;
  margin-block-end: var(--s-8);
}

.PageNavigation-module--navigationoptions--a51ce {
  margin: var(--s-4) auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.PageNavigation-module--pagenavigationoption--4c853 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
  max-width: 50%;
  padding: var(--s-2);
  box-sizing: border-box;
  border-radius: var(--s-1);
  background-color: var(--c-oatmeal-light);
}

.PageNavigation-module--spacer--4808d {
  width: var(--s-4);
}
@media only screen and (min-width: 64rem) {
  .PageNavigation-module--spacer--4808d {
    width: var(--s-6);
  }
}
.PageNavigation-module--spacer--4808d {
  height: 100%;
}

.PageNavigation-module--navigation--47b38 {
  position: relative;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.PageNavigation-module--navigation--47b38 .PageNavigation-module--iconleft--57c56 {
  position: relative;
  display: flex;
  align-items: center;
  margin-inline-end: var(--s-0-5);
}
.PageNavigation-module--navigation--47b38 .PageNavigation-module--iconright--d0034 {
  position: relative;
  display: flex;
  align-items: center;
  margin-inline-start: var(--s-0-5);
}
.PageNavigation-module--navigation--47b38 .PageNavigation-module--text--6acc8 {
  position: relative;
  width: auto;
  padding-inline-start: var(--s-0-5);
  padding-inline-end: var(--s-1);
  box-sizing: border-box;
}

.PageNavigation-module--title--e41fc {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: var(--s-2) 0;
}
.PageNavigation-module--title--e41fc .PageNavigation-module--titletext--b5fe2 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.PageNavigation-module--title--e41fc .PageNavigation-module--titletext--b5fe2:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.PageNavigation-module--title--e41fc .PageNavigation-module--titletext--b5fe2:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.PageNavigation-module--title--e41fc .PageNavigation-module--titletext--b5fe2:visited {
  text-decoration-style: solid;
}
.PageNavigation-module--title--e41fc .PageNavigation-module--titletext--b5fe2:hover {
  background-color: transparent;
}
.PageNavigation-module--title--e41fc .PageNavigation-module--titletext--b5fe2 {
  line-height: var(--lh-body-xs);
}
.swiper-pagination {
	margin-bottom: 12px;
}
.swiper-pagination-bullet {
	background-color: #525252;
	height: 14px;
	width: 14px;
	opacity: 0.8;
}
.swiper-pagination-bullet-active {
	background-color: #ffc800;
	height: 18px;
	width: 18px;
	opacity: 1;
}

.swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100%;
}

@media screen and (min-width: 1024px) {
	.swiper-pagination-bullet-active {
		height: 20px;
		width: 20px;
	}
	.swiper-pagination-bullet {
		height: 18px;
		width: 18px;
	}
}

/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SuccessStoriesCarousel-module--carouselcontainer--0c3d1 {
  width: 100%;
  height: auto;
}

.SuccessStoriesCarousel-module--accessibilityalert--61137 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.SuccessStoriesCarousel-module--pagination--a7743 {
  min-height: var(--s-10);
  width: 100%;
  display: flex;
  justify-content: center;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.VolunteerVacancyCard-module--vacancycardcontainer--39275 {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
  margin: var(--s-1);
  width: 100%;
}
@media only screen and (min-width: 37.5rem) {
  .VolunteerVacancyCard-module--vacancycardcontainer--39275 {
    flex-basis: calc(50% - var(--s-2));
  }
}

.VolunteerVacancyCard-module--vacancycontainer--ca039 {
  position: relative;
  display: flex;
  box-sizing: border-box;
  height: 145px;
  width: 100%;
}

.VolunteerVacancyCard-module--leftcolumn--addcf {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: 70%;
  height: 145px;
  padding: var(--s-2);
}

.VolunteerVacancyCard-module--vacancyrole--cf791 {
  position: relative;
  display: block;
  color: var(--c-midnight);
  font-weight: 600;
  font-family: var(--font-family-heading);
}

.VolunteerVacancyCard-module--vacancylocation--8e519 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
}

.VolunteerVacancyCard-module--extrainfo--b93c8 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.VolunteerVacancyCard-module--linkwording--0a377 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
}

.VolunteerVacancyCard-module--rightcolumn--05403 {
  display: flex;
  flex-direction: column;
  align-items: end;
  row-gap: var(--s-1);
  height: 145px;
  min-width: 35%;
  /** Added a hardcoded value here to match the spacing between the vacancy title and the top of the card */
  padding: 20px var(--s-2) var(--s-2) var(--s-2);
  box-sizing: border-box;
}

.VolunteerVacancyCard-module--distance--2d83b {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
  position: relative;
  display: flex;
  flex-direction: column;
  inset-block-start: 0;
  text-align: right;
}

.VolunteerVacancyCard-module--date--04206 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
  position: relative;
  display: flex;
  flex-direction: column;
  inset-block-end: 0;
  margin-block-start: var(--s-2);
}

.VolunteerVacancyCard-module--newlabel--dc195 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: var(--c-sunshine-yellow);
  height: var(--s-2);
  font-size: var(--t-body-s);
  border-radius: var(--s-2);
  font-family: var(--font-family);
  width: fit-content;
}

.VolunteerVacancyCard-module--nationallabel--f2edc {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  min-width: fit-content;
  background-color: var(--c-sunshine-yellow);
  width: var(--s-7);
  height: var(--s-2);
  font-size: var(--t-body-s);
  border-radius: var(--s-2);
  font-family: var(--font-family);
  padding: 0 var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SuccessStoriesCarouselItem-module--carouselitemcontainer--aee8c {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: var(--s-6) 0;
}

.SuccessStoriesCarouselItem-module--image--a6e89 {
  position: relative;
  /* 184px */
  width: calc(var(--s-1) * 30);
  margin-inline: auto;
}
.SuccessStoriesCarouselItem-module--image--a6e89 img {
  border-radius: 50%;
  /* 184px */
  height: calc(var(--s-1) * 30);
  /* 184px */
  width: calc(var(--s-1) * 30);
}

.SuccessStoriesCarouselItem-module--title--43b0b {
  position: relative;
  /* 352px */
  margin-block: var(--s-4);
  text-align: center;
}

.SuccessStoriesCarouselItem-module--date--f51e6 {
  position: relative;
  margin: 0 0 var(--s-1);
  font-weight: var(--fw-bold);
  font-style: italic;
}

.SuccessStoriesCarouselItem-module--dogname--436f5 {
  position: relative;
  margin: 0;
  margin-block: var(--s-2);
  font-weight: 600;
}

.SuccessStoriesCarouselItem-module--text--2adb6 {
  position: relative;
  width: auto;
  text-align: start;
}
.SuccessStoriesCarouselItem-module--text--2adb6 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.TextLinkAndImage-module--textlinkandimage--9933b {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100%;
}
@media screen and (min-width: 64rem) {
  .TextLinkAndImage-module--textlinkandimage--9933b {
    flex-direction: row;
  }
}

.TextLinkAndImage-module--first--1031c {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 64rem) {
  .TextLinkAndImage-module--first--1031c {
    max-width: 70%;
  }
}

.TextLinkAndImage-module--cta--18adf {
  width: 100%;
  /* 352px */
  max-width: calc(var(--s-1) * 44);
}

.TextLinkAndImage-module--second--840e9 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 64rem) {
  .TextLinkAndImage-module--second--840e9 {
    max-width: 70%;
  }
}
.TextLinkAndImage-module--second--840e9 {
  padding: var(--s-2);
  box-sizing: border-box;
}
.TextLinkAndImage-module--second--840e9 img {
  max-width: 100%;
  height: auto;
  border-radius: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ToolBar-module--container--d5857 {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: var(--s-7);
  z-index: 13;
}

.ToolBar-module--containerinner--a3ebd {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  border-block-start: 1px solid var(--c-mist);
  background-color: var(--c-white);
  min-height: var(--s-7);
  max-width: 90rem;
}

.ToolBar-module--breadcrumbs--16c61 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-inline-start: var(--s-2);
  font-weight: 600;
}

.ToolBar-module--breadcrumb--8218d {
  display: flex;
  height: 100%;
  align-items: center;
  font-family: var(--font-family);
}

.ToolBar-module--breadcrumbdivider--d9d5c {
  display: flex;
  height: 100%;
  align-items: center;
  font-family: var(--font-family);
  margin-inline-start: var(--s-1);
  margin-inline-end: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.VolunteerVacancyResults-module--results--ea093 {
  display: flex;
  flex-flow: column;
  margin-block-end: var(--s-5);
}
@media screen and (min-width: 37.5rem) {
  .VolunteerVacancyResults-module--results--ea093 {
    flex-flow: row wrap;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.VolunteerVacancySearch-module--searchcontainer--39f9f {
  position: relative;
  width: 100%;
  background-color: var(--c-sandy-fur);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: var(--s-2) var(--s-4);
  box-sizing: border-box;
  margin-inline-start: auto;
  margin-inline-end: auto;
  /* 304px */
  height: calc(var(--s-1) * 38);
  margin-block-end: var(--s-5);
  /* 744px */
  max-width: calc(var(--s-1) * 93);
}
@media screen and (min-width: 37.5rem) {
  .VolunteerVacancySearch-module--searchcontainer--39f9f {
    width: 75%;
    border-radius: var(--s-1);
  }
}
@media screen and (min-width: 64rem) {
  .VolunteerVacancySearch-module--searchcontainer--39f9f {
    width: 65%;
  }
}

.VolunteerVacancySearch-module--title--93022 {
  width: 100%;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}

.VolunteerVacancySearch-module--label--c7ec8 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  width: 100%;
}
.VolunteerVacancySearch-module--label--c7ec8 > span {
  display: inline-block;
  font-family: var(--font-family);
}

form {
  width: 100%;
}

.VolunteerVacancySearch-module--searchinput--39683 {
  height: var(--s-6);
  width: 100%;
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  box-sizing: border-box;
  padding-inline-end: var(--s-5);
  padding-block-end: 0;
}

.VolunteerVacancySearch-module--vacancies--c7ef7 {
  text-align: center;
  width: 90%;
  margin-block-end: var(--s-5);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding: 0;
}
@media screen and (min-width: 37.5rem) {
  .VolunteerVacancySearch-module--vacancies--c7ef7 {
    width: 75%;
  }
}
@media screen and (min-width: 64rem) {
  .VolunteerVacancySearch-module--vacancies--c7ef7 {
    width: 65%;
  }
}
.VolunteerVacancySearch-module--vacancies--c7ef7 {
  /* 744px */
  max-width: calc(var(--s-1) * 93);
}
.VolunteerVacancySearch-module--vacancies--c7ef7 .VolunteerVacancySearch-module--noresults--2cf77 a {
  color: inherit;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ComparisonToolNavigation-module--navWrapper--2c899 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ComparisonToolNavigation-module--navWrapper--2c899.ComparisonToolNavigation-module--isPayoffPage--5c56b {
  padding-block-start: calc(var(--s-1) * 11);
}

.ComparisonToolNavigation-module--navigationContainer--5178c {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 61.875rem;
  padding-inline: var(--s-2);
}

.ComparisonToolNavigation-module--navigationContainerCentered--72592 {
  justify-content: center;
}

.ComparisonToolNavigation-module--buttonContainer--db6c5 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-4);
}
@media screen and (min-width: 37.5rem) {
  .ComparisonToolNavigation-module--buttonContainer--db6c5 {
    max-width: var(--form-element-width);
  }
}
.ComparisonToolNavigation-module--buttonContainer--db6c5:has(> :only-child) {
  justify-content: center;
}
@media screen and (min-width: 37.5rem) {
  .ComparisonToolNavigation-module--buttonContainer--db6c5:has(> :only-child) {
    max-width: unset;
  }
}

.ComparisonToolNavigation-module--nextButton--179c9 {
  padding-inline: var(--s-8);
}
.ComparisonToolNavigation-module--nextButton--179c9:only-child {
  max-width: calc(var(--form-element-width) / 1.5);
}
@use "../../theme/breakpoints";

.ComparisonTool-module--comparisonToolContainer--9ee26 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    min-height: 30vh;
    background-color: var(--c-white);

    --form-screen-max-width: 712px;
    --form-screen-image-max-width: 400px;

}

.ComparisonTool-module--comparisonToolForm--30716 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    min-height: 30vh;
    background-color: var(--c-sunshine-yellow);
}

.ComparisonTool-module--lottieAnimation--05c0a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 100%;
    max-width: var(--form-screen-image-max-width);
    margin-inline: auto;
    padding-block: var(--s-4);

    @media (min-width: breakpoints.$bp-tablet) {
        grid-column: span 2;
    }
}

.ComparisonTool-module--message--12938 {
    display: block;
    color: var(--c-dark-grey);
    max-width: var(--form-element-width);
    width: 100%;

    @media (min-width: breakpoints.$bp-tablet) {
        grid-column: span 2;
    }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ComparisonToolTemplateQuestion-module--visuallyHidden--28055 {
}

.ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateContainer--8d898 {
  --template-max-width: 712px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-block-end: var(--s-4);
  background-color: var(--c-sunshine-yellow);
  text-align: start;
}
@media (min-width: 64rem) {
  .ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateContainer--8d898 {
    text-align: center;
  }
}

.ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateHeader--04641 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--c-white);
  width: 100%;
  text-align: center;
}

.ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateHeaderTitle--42db4 {
  max-width: 61.875rem;
  padding-inline: var(--s-4);
  padding-block-start: var(--s-3);
  z-index: 1;
  font-size: var(--t-heading-l);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateHeaderTitle--42db4 {
    padding-block-start: var(--s-8);
    font-size: var(--t-heading-xl);
    line-height: var(--s-5);
  }
}

.ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateHeaderSubtitle--6dc0e {
  max-width: 61.875rem;
  padding-block-start: var(--s-1);
  padding-inline: var(--s-4);
  margin-block-end: 0;
  z-index: 1;
  width: 100%;
}

.ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateImage--6dadd {
}

.ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateWrapper--bcea3 {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: start;
  row-gap: var(--s-4);
  width: 100%;
  height: 100%;
  max-width: 61.875rem;
  padding-block-start: var(--s-8);
  padding-inline: var(--s-4);
}
.ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateWrapper--bcea3 > *:only-child {
  grid-column: span 2;
}
@media screen and (min-width: 37.5rem) {
  .ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateWrapper--bcea3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
    padding-inline: var(--s-2);
    justify-items: center;
  }
}
.ComparisonToolTemplateQuestion-module--comparisonToolQuestionTemplateWrapper--bcea3.ComparisonToolTemplateQuestion-module--hasImageSibling--d4ca3 {
  padding-block-start: 0;
}

.ComparisonToolTemplateQuestion-module--navigation--b6db5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block-start: var(--s-8);
  max-width: var(--template-max-width);
  padding-inline: var(--s-4);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ComparisonToolTemplatePayoff-module--visuallyHidden--30ecd {
}

.ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateContainer--fb001 {
  --template-max-width: var(--s-1) * 89;
  --template-image-max-width: var(--s-1) * 62;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  background-color: var(--c-white);
}

.ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateHeader--69b3a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--c-white);
  width: 100%;
}

.ComparisonToolTemplatePayoff-module--regionPayoffTemplateImageTitle--e549d {
  width: 100%;
  padding-block: var(--s-3);
  background: var(--c-dawn);
  border-radius: var(--s-3) var(--s-3) 0 0;
  color: var(--c-white);
  font-size: var(--lh-heading-l);
}

.ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateHeaderTitle--175a3 {
  max-width: 61.875rem;
  padding-inline: var(--s-4);
  padding-block-start: var(--s-3);
  z-index: 1;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateHeaderTitle--175a3 {
    padding-block-start: var(--s-8);
    font-size: var(--t-heading-xl);
    line-height: var(--lh-heading-s);
  }
}

.ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateBody--e7c3c {
  max-width: var(--template-max-width);
  padding-block: var(--s-3);
  padding-inline: var(--s-4);
  z-index: 1;
  text-align: center;
}

.ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateImageWrapper--f6467 {
  display: flex;
  flex-direction: column;
}

.ComparisonToolTemplatePayoff-module--regionPayoffTemplateImageWrapper--fb60a {
  gap: calc(var(--s-1) * 11);
  margin-block-start: var(--s-3);
}
.ComparisonToolTemplatePayoff-module--regionPayoffTemplateImageWrapper--fb60a .ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateImage--4676f:nth-of-type(1) > img {
  margin-inline-end: var(--s-7);
  margin-block-end: calc(var(--s-0-75) * -1);
  z-index: 1;
}
.ComparisonToolTemplatePayoff-module--regionPayoffTemplateImageWrapper--fb60a .ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateImage--4676f:nth-of-type(3) > img {
  max-width: calc(var(--s-1) * 50);
}
.ComparisonToolTemplatePayoff-module--regionPayoffTemplateImageWrapper--fb60a .ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateImage--4676f:nth-of-type(3) .ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateImageText--b25ed {
  margin-block-start: var(--s-2);
}

.ComparisonToolTemplatePayoff-module--regionPayoffTemplateImageTitleOnImage--a5173 {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  transform: translateY(-50%) rotate(-15deg);
  max-width: calc(var(--s-1) * 38);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--s-3);
  text-align: center;
  font-size: var(--t-heading-xl);
}

.ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateImage--4676f {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--template-image-max-width);
  align-items: center;
  padding-inline: var(--s-4);
  position: relative;
}
.ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateImage--4676f img {
  width: 100%;
  max-width: calc(var(--s-1) * 38);
}

.ComparisonToolTemplatePayoff-module--comparisonToolPayoffTemplateImageText--b25ed {
  font-weight: var(--fw-bolder);
  margin-block-start: var(--s-6);
}

.ComparisonToolTemplatePayoff-module--option--23339 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-1);
  width: 100%;
  max-width: var(--template-max-width);
  padding-block: var(--s-3);
  padding-inline: var(--s-2);
}
@media (min-width: 64rem) {
  .ComparisonToolTemplatePayoff-module--option--23339 {
    padding-block: var(--s-6);
  }
}
.ComparisonToolTemplatePayoff-module--option--23339:last-child {
  padding-block-start: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ComparisonToolThankYou-module--comparisonToolThankYouContainer--9e6c7 {
  text-align: center;
  width: 100%;
}

.ComparisonToolThankYou-module--comparisonThankYouTemplateHeader--a3fdf {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-inline: var(--s-5);
}
@media (min-width: 64rem) {
  .ComparisonToolThankYou-module--comparisonThankYouTemplateHeader--a3fdf {
    gap: var(--s-4);
  }
}

.ComparisonToolThankYou-module--comparisonThankYouTemplateHeaderTitle--c8137 {
  padding-block-start: var(--s-8);
}

.ComparisonToolThankYou-module--comparisonToolThankYouLottie--875ec {
  padding-block-end: 0;
  padding-block-start: calc(var(--s-1) * 13);
}

.ComparisonToolThankYou-module--lottieAnimation--966db {
  display: flex;
  align-items: center;
  margin: 0 auto;
  max-width: calc(var(--s-1) * 80);
  max-height: calc(var(--s-1) * 25);
}
@media (min-width: 37.5rem) {
  .ComparisonToolThankYou-module--lottieAnimation--966db {
    max-height: calc(var(--s-1) * 50);
  }
}

.ComparisonToolThankYou-module--comparisonToolThankYouLeadGenASK--3cf12,
.ComparisonToolThankYou-module--comparisonToolThankYouDonationASKContent--62866 {
  padding-block-start: var(--s-4);
}
@media (min-width: 37.5rem) {
  .ComparisonToolThankYou-module--comparisonToolThankYouLeadGenASK--3cf12,
  .ComparisonToolThankYou-module--comparisonToolThankYouDonationASKContent--62866 {
    padding-block-start: 0;
  }
}

.ComparisonToolThankYou-module--comparisonToolThankYouLeadGenASK--3cf12 section {
  padding-block-start: 0;
}

.ComparisonToolThankYou-module--comparisonToolThankYouDonationASKContent--62866 {
  padding-inline: var(--s-4);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CountdownTimer-module--wrapper--83f78 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  justify-content: center;
  width: 100%;
  max-width: calc(var(--s-1) * 100);
}
@media (min-width: 64rem) {
  .CountdownTimer-module--wrapper--83f78 {
    gap: var(--s-7);
  }
}

.CountdownTimer-module--cardWrapper--9e85b {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: var(--t-heading-xxs);
  font-weight: var(--fw-bolder);
  width: 100%;
}
@media (min-width: 23.4375rem) {
  .CountdownTimer-module--cardWrapper--9e85b {
    font-size: var(--t-heading-xs);
  }
}

.CountdownTimer-module--card--b2906 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: var(--s-6);
  max-width: var(--s-6);
  height: var(--s-6);
  background: var(--c-sunshine-yellow);
  box-shadow: var(--sh-box-card);
  border-radius: var(--s-1);
  font-family: var(--font-family-heading);
  font-size: var(--t-heading-l);
}
@media (min-width: 25.875rem) {
  .CountdownTimer-module--card--b2906 {
    max-width: var(--s-9);
    height: var(--s-9);
    font-size: var(--t-heading-xl);
  }
}
@media (min-width: 37.5rem) {
  .CountdownTimer-module--card--b2906 {
    max-width: calc(var(--s-1) * 20);
    height: calc(var(--s-1) * 15);
    font-size: var(--t-heading-xxl);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphCountdownTimer-module--paragraphCountdownTimer--a6920 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s-5);
  text-align: center;
}

.ParagraphCountdownTimer-module--cta--aad29 > span {
  gap: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphDogSizes-module--inner--6c4dc {
  width: 100%;
  padding-block-start: var(--s-4);
}
@media (min-width: 64rem) {
  .ParagraphDogSizes-module--inner--6c4dc {
    padding-block-start: var(--s-6);
  }
}

.ParagraphDogSizes-module--title--060ce {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .ParagraphDogSizes-module--title--060ce {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}

.ParagraphDogSizes-module--initialblock--e1ad3 {
  background-color: var(--c-sunshine-yellow);
  margin-inline-start: -8px;
  margin-inline-end: -8px;
  padding-block-start: var(--s-10);
  padding-block-end: var(--s-10);
  padding-inline-end: var(--s-4);
  padding-inline-start: var(--s-4);
}
@media (min-width: 37.5rem) {
  .ParagraphDogSizes-module--initialblock--e1ad3 {
    margin-inline-start: -16px;
    margin-inline-end: -16px;
  }
}

.ParagraphDogSizes-module--secondaryblock--86b30 {
  background-color: var(--c-sandy-fur);
  padding-block-end: var(--s-2);
  padding-block-start: var(--s-3);
}
@media (min-width: 64rem) {
  .ParagraphDogSizes-module--secondaryblock--86b30 {
    padding-block-start: 0;
  }
}
.ParagraphDogSizes-module--secondaryblock--86b30 .ParagraphDogSizes-module--sizeblockdetails--2d870 {
  order: 1;
}
@media (min-width: 64rem) {
  .ParagraphDogSizes-module--secondaryblock--86b30 .ParagraphDogSizes-module--sizeblockdetails--2d870 {
    order: 2;
  }
}
.ParagraphDogSizes-module--secondaryblock--86b30 .ParagraphDogSizes-module--sizeblockcarouselcontainer--f2490 {
  order: 2;
}
@media (min-width: 64rem) {
  .ParagraphDogSizes-module--secondaryblock--86b30 .ParagraphDogSizes-module--sizeblockcarouselcontainer--f2490 {
    order: 1;
  }
}

.ParagraphDogSizes-module--sizeblock--0a1d9 {
  width: 100%;
  margin-block-start: var(--s-7);
  margin-block-end: var(--s-7);
  display: grid;
  grid-template-areas: "details" "carousel";
  grid-template-columns: 100%;
  row-gap: var(--s-2);
}
@media (min-width: 64rem) {
  .ParagraphDogSizes-module--sizeblock--0a1d9 {
    grid-template-areas: "details carousel";
    grid-template-columns: 40% 60%;
    margin-block-start: var(--s-10);
  }
}

.ParagraphDogSizes-module--sizeblockdetails--2d870 {
  grid-area: details;
  padding-inline-end: var(--s-2);
}

.ParagraphDogSizes-module--sizeblockcarouselcontainer--f2490 {
  grid-area: carousel;
  position: relative;
  max-width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionExternalSignPostCards-module--sectionsignpostcardouter--00aeb {
  position: relative;
  display: flex;
  height: auto;
  padding-block-start: var(--s-1);
  padding-block-end: var(--s-1);
}
@media (min-width: 75rem) {
  .SectionExternalSignPostCards-module--sectionsignpostcardouter--00aeb {
    padding-block-start: 48px;
    padding-block-end: 48px;
  }
}

.SectionExternalSignPostCards-module--sectionsignpostcardnomarginouter--60c84 {
  padding: 0;
}
@media (min-width: 75rem) {
  .SectionExternalSignPostCards-module--sectionsignpostcardnomarginouter--60c84 {
    padding: 0;
  }
}

.SectionExternalSignPostCards-module--inner--f0b29 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: start;
  max-width: 56rem;
  margin-inline: auto;
}

.SectionExternalSignPostCards-module--titlecontainer--8b6a4 {
  width: 100%;
  text-align: start;
  padding: var(--s-1) var(--s-2);
  box-sizing: border-box;
}
@media (min-width: 37.5rem) {
  .SectionExternalSignPostCards-module--titlecontainer--8b6a4 {
    padding: var(--s-2);
    margin-inline-start: 0;
    text-align: center;
  }
}

.SectionExternalSignPostCards-module--title--54789 {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .SectionExternalSignPostCards-module--title--54789 {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}

.SectionExternalSignPostCards-module--cardsection--f2d9a {
  width: 100%;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 37.5rem) {
  .SectionExternalSignPostCards-module--cardsection--f2d9a {
    grid-template-columns: repeat(2, 1fr);
  }
}

.SectionExternalSignPostCards-module--buttonwrapper--33976 {
  position: relative;
  width: 90%;
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-2);
}
@media (min-width: 37.5rem) {
  .SectionExternalSignPostCards-module--buttonwrapper--33976 {
    /* 352px */
    max-width: calc(var(--s-1) * 44);
  }
}
@media (min-width: 75rem) {
  .SectionExternalSignPostCards-module--buttonwrapper--33976 {
    margin-top: var(--s-4);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ExternalSignPostCard-module--cardwrapperwithimage--07aef {
  position: relative;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  background: var(--c-white);
  overflow: hidden;
  width: 100%;
  padding: var(--s-2) var(--s-3) var(--s-3);
  display: grid;
  grid-template-areas: "cardtitle cardimage" ". ." "carddetails carddetails" "cardlink cardlink";
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 1fr var(-s-2) auto 1fr;
}
@media (min-width: 64rem) {
  .ExternalSignPostCard-module--cardwrapperwithimage--07aef:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

.ExternalSignPostCard-module--cardwrapper--dcf35 {
  position: relative;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  background: var(--c-white);
  overflow: hidden;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  display: grid;
  grid-template-areas: "cardtitle cardtitle" "carddetails carddetails" "cardlink cardlink";
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 1fr auto 1fr;
}
.ExternalSignPostCard-module--cardwrapper--dcf35 .ExternalSignPostCard-module--cardimage--bed3a {
  display: none;
}
@media (min-width: 64rem) {
  .ExternalSignPostCard-module--cardwrapper--dcf35:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

.ExternalSignPostCard-module--cardimage--bed3a {
  grid-area: cardimage;
  padding-block-end: var(--s-2);
}
.ExternalSignPostCard-module--cardimage--bed3a img {
  border-radius: 50%;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.ExternalSignPostCard-module--title--10a5f {
  grid-area: cardtitle;
  display: flex;
  align-items: flex-end;
}

.ExternalSignPostCard-module--cardsubtitletext--1c18a {
  grid-area: carddetails;
  width: 100%;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
}

.ExternalSignPostCard-module--linkwrapper--4392e {
  grid-area: cardlink;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphFAQ-module--paragraphfaqinner--f53f0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  height: auto;
  width: 100%;
  position: relative;
}
.ParagraphFAQ-module--paragraphfaqinner--f53f0 *::selection {
  background-color: var(--c-sunshine-yellow);
}

.ParagraphFAQ-module--faqheading--a43b1 {
  width: 100%;
  text-align: left;
}

.ParagraphFAQ-module--heading--efcfa {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .ParagraphFAQ-module--heading--efcfa {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}

.ParagraphFAQ-module--cards--8db15 {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-inline: auto;
  row-gap: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphFileDownload-module--outer--b61b8 {
  height: auto;
  width: 100%;
  background-color: transparent;
  padding: var(--s-4) 0;
  box-sizing: border-box;
  z-index: 6;
}

.ParagraphFileDownload-module--inner--bda63 {
  display: flex;
  text-align: left;
  height: auto;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  max-width: 56rem;
  padding-inline: var(--s-1);
}

.ParagraphFileDownload-module--left--1cd8c {
  display: flex;
  justify-content: left;
  width: 100%;
}

.ParagraphFileDownload-module--downloadcard--f9487 {
  position: relative;
  min-height: var(--s-10);
  width: 100%;
  border-radius: var(--s-0-5);
  padding: var(--s-1) var(--s-1);
  box-sizing: border-box;
  box-shadow: var(--sh-box-card);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.ParagraphFileDownload-module--iconarea--e2c3b {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 48px */
  min-width: calc(var(--s-1) * 6);
}

.ParagraphFileDownload-module--textarea--7c8bd {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-family: var(--font-family);
}

.ParagraphFileDownload-module--filemeta--5bc3c {
  text-transform: uppercase;
  color: var(--c-dawn);
}

.ParagraphFileDownload-module--filename--9e062 {
  font-weight: 600;
}

.ParagraphFileDownload-module--buttonarea--330cc {
  margin-inline-start: var(--s-1);
  margin-inline-end: var(--s-2);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphTextWithArticles-module--paragraphtextarticlesinner--89c89 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  z-index: var(--z-toast);
  height: auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.ParagraphTextWithArticles-module--titlewrapper--55322 {
  width: 100%;
  margin: var(--s-4) 0 var(--s-1);
  text-align: left;
}

.ParagraphTextWithArticles-module--title--c113e {
}

.ParagraphTextWithArticles-module--textwitharticles--5bf2a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-block-end: var(--s-5);
}

.ParagraphTextWithArticles-module--textwitharticlesnospace--a9abe {
  padding-block-end: 0;
}

.ParagraphTextWithArticles-module--articles--1d154 {
  padding-block-end: var(--s-1);
  align-self: center;
}
@media screen and (min-width: 64rem) {
  .ParagraphTextWithArticles-module--articles--1d154 {
    /* 848px */
    min-width: calc(var(--s-1) * 106);
  }
}

.ParagraphTextWithArticles-module--textwitharticlessectionbreak--6e327 {
  width: 95%;
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
  margin: 0;
}

.ParagraphTextWithArticles-module--imagescontainer--2e791 {
  display: flex;
  flex-direction: column;
  padding-block-end: var(--s-5);
  row-gap: var(--s-5);
}
.ParagraphTextWithArticles-module--imagescontainer--2e791 > picture > img {
  width: 100%;
  height: auto;
  border-radius: var(--s-1);
}
@media screen and (min-width: 64rem) {
  .ParagraphTextWithArticles-module--imagescontainer--2e791 {
    flex-direction: row;
    justify-content: space-between;
    column-gap: var(--s-5);
  }
}

.ParagraphTextWithArticles-module--gradientbase--1da7e {
  position: absolute;
  z-index: var(--z-raised);
  inset-inline-end: 0;
  inset-block-end: var(--s-4);
  inset-inline-start: 0;
  height: calc(var(--s-10) * 2);
}

.ParagraphTextWithArticles-module--gradient--d8866 {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);
}

.ParagraphTextWithArticles-module--gradientalt--2fc66 {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(250, 245, 230) 70%);
}

.ParagraphTextWithArticles-module--showmore--12a70 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: var(--s-2);
  z-index: var(--z-app-shell);
  cursor: pointer;
  padding: var(--s-1);
  max-width: fit-content;
}
.ParagraphTextWithArticles-module--showmore--12a70 p {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.ParagraphTextWithArticles-module--showmore--12a70 p:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.ParagraphTextWithArticles-module--showmore--12a70 p:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.ParagraphTextWithArticles-module--showmore--12a70 p:visited {
  text-decoration-style: solid;
}
.ParagraphTextWithArticles-module--showmore--12a70 p:hover {
  background-color: var(--c-white);
}
.ParagraphTextWithArticles-module--showmore--12a70 p {
  margin: 0;
}

.ParagraphTextWithArticles-module--text--0c973 a {
  font-weight: 600;
}
.ParagraphTextWithArticles-module--text--0c973 ul li {
  position: relative;
  padding-inline-start: var(--s-5);
}
.ParagraphTextWithArticles-module--text--0c973 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
}

.ParagraphTextWithArticles-module--visibilityhidden--6de78 {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphGroupOfExpandableSections-module--headercontainer--27db4 {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 64rem) {
  .ParagraphGroupOfExpandableSections-module--headercontainer--27db4 {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.ParagraphGroupOfExpandableSections-module--details--f7329 {
  order: 2;
}
@media screen and (min-width: 64rem) {
  .ParagraphGroupOfExpandableSections-module--details--f7329 {
    order: 1;
  }
}

.ParagraphGroupOfExpandableSections-module--imagecontainer--c9fe1 {
  order: 1;
  margin-block-end: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
}
.ParagraphGroupOfExpandableSections-module--imagecontainer--c9fe1 > picture > img {
  width: 100%;
  height: auto;
  /* 520px */
  max-width: calc(var(--s-1) * 65);
}
@media screen and (min-width: 64rem) {
  .ParagraphGroupOfExpandableSections-module--imagecontainer--c9fe1 {
    order: 2;
    /* 520px */
    max-width: calc(var(--s-1) * 65);
    margin-block-end: 0;
  }
}

.ParagraphGroupOfExpandableSections-module--expandablesection--0b676 {
  border-block-end: solid 1px var(--c-oatmeal);
}
.ParagraphGroupOfExpandableSections-module--expandablesection--0b676:last-child {
  border-bottom: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphHighlightedQuotes-module--paragraphhighlightedquotesouter--004ed {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: var(--c-sunshine-yellow);
}

.ParagraphHighlightedQuotes-module--paragraphhighlightedquotesinner--43415 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  width: 100%;
  min-height: calc(var(--s-1) * 19);
  /* 150px */
  /* 744px */
  max-width: calc(var(--s-1) * 93);
}

.ParagraphHighlightedQuotes-module--bordertop--35737 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  z-index: var(--z-app-shell);
}
.ParagraphHighlightedQuotes-module--bordertop--35737 svg {
  height: 100%;
  width: 100%;
  margin-block-end: -6px;
}

.ParagraphHighlightedQuotes-module--content--f0703 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.ParagraphHighlightedQuotes-module--quote--c43b0 {
  position: relative;
}

.ParagraphHighlightedQuotes-module--quotemarks--32bf5 {
  float: left;
  height: var(--s-4);
  /* 48px */
  width: calc(var(--s-1) * 6);
  padding-inline-end: 12px;
}

.ParagraphHighlightedQuotes-module--quotetext--8081d {
  font-family: var(--font-family-heading);
  margin: 0;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  color: var(--c-midnight);
}
@media (min-width: 37.5rem) {
  .ParagraphHighlightedQuotes-module--quotetext--8081d {
    line-height: var(--lh-body-l);
  }
}
@media (min-width: 64rem) {
  .ParagraphHighlightedQuotes-module--quotetext--8081d {
    font-size: var(--t-heading-m);
    line-height: var(--lh-body-l);
  }
}
.ParagraphHighlightedQuotes-module--quotetext--8081d {
  padding-block-start: 22px;
}

.ParagraphHighlightedQuotes-module--quotee--7eb20 {
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  font-weight: 600;
  padding: var(--s-2) 0 0 0;
  margin: 0;
  color: var(--c-midnight);
}

.ParagraphHighlightedQuotes-module--quoteerole--f9e3c {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  margin: 0;
  color: var(--c-midnight);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphHighlightedTextArea-module--paragraphhighlightedtextareainner--70900 {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  width: 100%;
  margin: 0 auto;
  padding: var(--s-2) 0;
}

.ParagraphHighlightedTextArea-module--image--37b08 {
  /* 120px */
  width: calc(var(--s-1) * 15);
  /* 120px */
  height: calc(var(--s-1) * 15);
}

.ParagraphHighlightedTextArea-module--titlewrapper--e0acd {
  width: 100%;
  text-align: start;
  padding: var(--s-2);
}

.ParagraphHighlightedTextArea-module--title--a362f {
}

.ParagraphHighlightedTextArea-module--text--e2a07 {
  width: 100%;
  text-align: start;
  padding: 0 var(--s-2);
}
.ParagraphHighlightedTextArea-module--text--e2a07 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-midnight);
  position: absolute;
  inset-inline-start: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}

.ParagraphHighlightedTextArea-module--bordersection--f47bd {
  position: absolute;
  inset-block-end: 0;
  display: flex;
  min-width: 100%;
  background-color: var(--c-sunshine-yellow);
  height: auto;
}

.ParagraphHighlightedTextArea-module--borderbottom--e16c0 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-block-start: -2px;
  min-width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphImages-module--paragraphimagesinner--401f3 {
  text-align: left;
  height: auto;
  width: 100%;
  margin-inline: auto;
  max-width: 56rem;
}

.ParagraphImages-module--swiper--8a23d {
  width: auto;
}

.ParagraphImages-module--expand--9275c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--s-0-5);
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: var(--s-2);
  height: var(--s-4);
  width: var(--s-4);
  background-color: var(--c-midnight);
  opacity: 0.8;
  padding: var(--s-0-5);
  box-sizing: border-box;
  cursor: pointer;
  color: var(--c-white);
}
@media screen and (min-width: 64rem) {
  .ParagraphImages-module--expand--9275c {
    display: none;
  }
}
.ParagraphImages-module--expand--9275c {
  z-index: var(--z-app-shell);
}

.ParagraphImages-module--pagination--05a01 {
  position: relative;
  width: 100%;
  height: var(--s-8);
  display: flex;
  justify-content: center;
  margin-block-start: calc(var(--s-3) * -1);
  z-index: var(--z-app-shell);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphJumpLinks-module--jumplinkscontainer--0794c {
  width: 100%;
  padding-inline: var(--s-1);
  margin-inline: auto;
}

.ParagraphJumpLinks-module--title--a7a5c {
  margin-block-end: var(--s-5);
}

.ParagraphJumpLinks-module--links--54983 {
  margin-block-start: var(--s-5);
}
@media screen and (min-width: 56.25rem) {
  .ParagraphJumpLinks-module--links--54983 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: var(--s-2);
    row-gap: var(--s-2);
  }
}

.ParagraphJumpLinks-module--linktag--4c0e0 {
  font-family: "Work Sans";
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  padding-block-start: var(--s-1);
  padding-block-end: var(--s-1);
  padding-inline-start: var(--s-2);
  padding-inline-end: var(--s-2);
}
@media screen and (min-width: 56.25rem) {
  .ParagraphJumpLinks-module--linktag--4c0e0 {
    background-color: var(--c-sandy-fur);
    border-radius: var(--s-1);
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
    font-size: var(--t-body-l);
    line-height: var(--lh-body-l);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-gap: 7px;
    /* 272px */
    min-width: calc(var(--s-1) * 34);
  }
}

@media screen and (min-width: 56.25rem) {
  .ParagraphJumpLinks-module--jumpmenuform--d0611 {
    display: none;
  }
}

.ParagraphJumpLinks-module--jumpmenu--e244b {
  background-color: var(--c-sandy-fur) !important;
  border-radius: var(--s-1);
  margin-block-end: var(--s-2);
  border: 1px solid var(--c-dawn);
  color: var(--c-midnight);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
}
.ParagraphJumpLinks-module--jumpmenu--e244b > div {
  min-height: var(--s-6);
  border: 0;
  background: none;
}
.ParagraphJumpLinks-module--jumpmenu--e244b > div > div > div {
  color: var(--c-dawn);
  padding-inline-start: 5px;
  min-height: var(--s-5);
  background-color: var(--c-sandy-fur);
  display: flex;
  align-items: center;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphKeyFactsFigures-module--paragraphkeyfactsfigures--fae57 {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  width: 100%;
  margin: 0 auto;
  padding: var(--s-2) 0;
  max-width: 768px;
}
@media (min-width: 64rem) {
  .ParagraphKeyFactsFigures-module--paragraphkeyfactsfigures--fae57 {
    flex-direction: row;
    column-gap: var(--s-5);
  }
}

.ParagraphKeyFactsFigures-module--imagecontainer--fb481 {
  flex: 0 0 268px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ParagraphKeyFactsFigures-module--image--23ca8 {
  width: calc(var(--s-1) * 26);
  /* 208px */
}

.ParagraphKeyFactsFigures-module--info--7d190 {
  padding-inline-start: var(--s-4);
  padding-inline-end: var(--s-4);
}
@media (min-width: 64rem) {
  .ParagraphKeyFactsFigures-module--info--7d190 {
    padding: 0;
  }
}

.ParagraphKeyFactsFigures-module--title--e363e {
  font-size: var(--s-5);
  line-height: var(--s-7);
  margin-block-end: 12px;
}
@media (min-width: 64rem) {
  .ParagraphKeyFactsFigures-module--title--e363e {
    margin-block-end: var(--s-2);
    font-size: var(--s-7);
    line-height: var(--s-8);
  }
}

.ParagraphKeyFactsFigures-module--text--b3e4c {
  font-family: var(--font-family-heading);
  margin: 0;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .ParagraphKeyFactsFigures-module--text--b3e4c {
    font-size: var(--s-6);
    line-height: var(--s-6);
    line-height: var(--s-6);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphMediaContentList-module--paragraphmediacontentlistouter--5ec27 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100%;
  height: auto;
  background-color: var(--c-sandy-fur);
}
@media screen and (min-width: 64rem) {
  .ParagraphMediaContentList-module--paragraphmediacontentlistouter--5ec27 {
    max-width: 96%;
    margin-inline-start: auto;
    margin-inline-end: auto;
    margin-block-start: var(--s-4);
  }
}

.ParagraphMediaContentList-module--paragraphmediacontentlistinner--93999 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  background-color: var(--c-sandy-fur);
  padding-block-start: var(--s-2);
  padding-inline-start: 22px;
  padding-inline-end: 22px;
  padding-block-end: 145px;
  max-width: 56.25rem;
}
@media screen and (min-width: 64rem) {
  .ParagraphMediaContentList-module--paragraphmediacontentlistinner--93999 {
    padding-block-start: var(--s-4);
    padding-inline-start: 22px;
    padding-inline-end: 22px;
  }
}

.ParagraphMediaContentList-module--bordertop--18a1a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  z-index: var(--z-app-shell);
  background-color: var(--c-white);
}
.ParagraphMediaContentList-module--bordertop--18a1a svg {
  height: 100%;
  width: 100%;
  margin-block-end: -6px;
}

.ParagraphMediaContentList-module--borderbottom--8909e {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  z-index: var(--z-app-shell);
  background-color: var(--c-sandy-fur);
  inset-block-end: 0;
}
.ParagraphMediaContentList-module--borderbottom--8909e svg {
  height: 100%;
  width: 100%;
  margin-block-end: -6px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MissionStatementBlockFlat-module--missionstatementblockcontainer--0fe1c {
  display: flex;
  position: relative;
  height: 100%;
  min-height: 678px;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.MissionStatementBlockFlat-module--missionstatementblockcontainer--0fe1c.MissionStatementBlockFlat-module--yellow--0e775 {
  background-color: var(--c-sunshine-yellow);
}
.MissionStatementBlockFlat-module--missionstatementblockcontainer--0fe1c.MissionStatementBlockFlat-module--white--72185 {
  background-color: var(--c-white);
}
.MissionStatementBlockFlat-module--missionstatementblockcontainer--0fe1c.MissionStatementBlockFlat-module--oatmeal--b5679 {
  background-color: var(--c-oatmeal);
}

.MissionStatementBlockFlat-module--image--da1fe {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.MissionStatementBlockFlat-module--image--da1fe img {
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  height: 100%;
}

.MissionStatementBlockFlat-module--topheart--5ca48 {
  position: absolute;
  inset-inline-end: var(--s-4);
  z-index: calc(var(--z-app-shell) + 1);
  inset-block-start: 51px;
}

.MissionStatementBlockFlat-module--middleheart--a8ef2 {
  position: absolute;
  inset-inline-end: 7px;
  z-index: calc(var(--z-app-shell) + 1);
  inset-block-start: 193px;
}

.MissionStatementBlockFlat-module--bottomheart--87d4c {
  position: absolute;
  inset-inline-end: var(--s-4);
  z-index: calc(var(--z-app-shell) + 1);
  inset-block-end: 81px;
}

.MissionStatementBlockFlat-module--bordercontainer--6745d {
  position: absolute;
  height: 100%;
  width: auto;
  min-width: 127px;
  inset-inline-end: -2px;
  z-index: var(--z-app-shell);
  display: flex;
}

.MissionStatementBlockFlat-module--bordercontainersmooth--28dbe {
  min-width: 106px;
}

.MissionStatementBlockFlat-module--border--050c5 {
  /* Needs to override withRotateSvg inline-block */
  display: flex;
  flex-direction: row;
  justify-self: flex-end;
  align-self: stretch;
  height: 100%;
}
@supports (-webkit-overflow-scrolling: touch) {
  .MissionStatementBlockFlat-module--border--050c5 {
    height: unset;
    align-self: stretch;
  }
}
.MissionStatementBlockFlat-module--border--050c5 svg {
  display: flex;
}

.MissionStatementBlockFlat-module--details--e73e6 {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding-inline-start: var(--s-4);
  padding-inline-end: var(--s-4);
  padding-block-start: 96px;
  padding-block-end: 96px;
  justify-content: center;
}

.MissionStatementBlockFlat-module--title--c9e40 {
  font-size: var(--s-7);
  line-height: var(--s-8);
  margin-block-end: var(--s-5);
}

.MissionStatementBlockFlat-module--subheading--02430 {
  font-size: var(--t-heading-xl);
  line-height: var(--s-5);
  margin-block-end: var(--s-5);
}

.MissionStatementBlockFlat-module--text--07429 {
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  margin-block-start: 0;
  margin-block-end: var(--s-5);
}
.MissionStatementBlockFlat-module--text--07429 ul li {
  position: relative;
}
.MissionStatementBlockFlat-module--text--07429 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-midnight);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}

.MissionStatementBlockFlat-module--buttonwrapper--c1aad {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MissionStatementBlockSquare-module--missionstatementblockcontainer--d5af7 {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.MissionStatementBlockSquare-module--image--75860 {
  position: relative;
  /* 464px */
  height: calc(var(--s-1) * 58);
  width: 100%;
  overflow: hidden;
}
.MissionStatementBlockSquare-module--image--75860 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
}

.MissionStatementBlockSquare-module--rightheart--69a98 {
  position: absolute;
  inset-inline-end: 37px;
  z-index: var(--z-app-shell);
  inset-block-end: 15px;
}
@media (min-width: 25.875rem) {
  .MissionStatementBlockSquare-module--rightheart--69a98 {
    bottom: 35px;
  }
}
@media (min-width: 575px) {
  .MissionStatementBlockSquare-module--rightheart--69a98 {
    bottom: 65px;
  }
}

.MissionStatementBlockSquare-module--middleheart--cf8c6 {
  position: absolute;
  inset-inline-end: 125px;
  z-index: var(--z-app-shell);
  inset-block-end: 0;
}
@media (min-width: 25.875rem) {
  .MissionStatementBlockSquare-module--middleheart--cf8c6 {
    bottom: var(--s-1);
  }
}
@media (min-width: 575px) {
  .MissionStatementBlockSquare-module--middleheart--cf8c6 {
    bottom: var(--s-5);
  }
}

.MissionStatementBlockSquare-module--leftheart--65427 {
  position: absolute;
  inset-inline-start: 37px;
  z-index: var(--z-app-shell);
  inset-block-end: var(--s-2);
}
@media (min-width: 25.875rem) {
  .MissionStatementBlockSquare-module--leftheart--65427 {
    bottom: var(--s-4);
  }
}
@media (min-width: 575px) {
  .MissionStatementBlockSquare-module--leftheart--65427 {
    bottom: var(--s-7);
  }
}

.MissionStatementBlockSquare-module--bordercontainer--cd477 {
  position: absolute;
  width: 100%;
  height: auto;
  inset-block-end: -2px;
}

.MissionStatementBlockSquare-module--border--209d8 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-self: flex-end;
}

.MissionStatementBlockSquare-module--details--443c7 {
  display: flex;
  flex-direction: column;
  padding: var(--s-3);
}

.MissionStatementBlockSquare-module--title--4730f {
  font-size: var(--s-5);
  line-height: var(--s-7);
  margin-block-end: 18px;
}

.MissionStatementBlockSquare-module--subheading--25f29 {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
  margin-block-end: 18px;
}

.MissionStatementBlockSquare-module--text--f3848 {
  box-sizing: border-box;
  margin-block-start: 0;
  margin-block-end: 18px;
}
.MissionStatementBlockSquare-module--text--f3848 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-midnight);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}

.MissionStatementBlockSquare-module--buttonwrapper--de6a5 {
  width: 100%;
  display: flex;
  justify-content: center;
}
/* Local Theme
 * root: border-radius: var(--s-cmp-accordion-border-radius, var(--s-border-radius-xs));
 * root: width: var(--s-cmp-accordion-width, unset);
 * root: box-shadow: var(--sh-cmp, var(--sh-box-xs));
*
 * item-separator-color: var(--c-cmp-accordion-separator, var(--c-separator));// actually applied as a background to the root
 * item-separator-height: var(--c-cmp-accordion-separator-height, 1px);
 * item-focus-within-border-color: var(--c-cmp-accordion-focus, --c-focus);
 * item-focus-within-border-size: var(--s-cmp-accordion-focus, 2px);
 *
 * item-header:trigger: padding: var(--s-cmp-accordion-trigger-padding-top, 0) var(--s-cmp-accordion-trigger-padding-right, var(--s-2)) var(--s-cmp-accordion-trigger-padding-bottom, 0) var(--s-cmp-accordion-trigger-padding-left, var(--s-2));
 * item-header:trigger: height: var(--cmp-accordion-trigger-height, var(--t-heading-m));
 * item-header:trigger: font-size: var(--t-cmp-accordion-trigger, var(--t-heading-m));
 * item-header:trigger: color: var(--c-cmp-accordion-trigger);
 * item-header:trigger: box-shadow: var(--sh-cmp-accordion-trigger, var(--sh-box-xs));
 * item-header:trigger: background-color: var(--c-cmp-accordion-trigger-bg, var(--c-white));
 * item-header:trigger:hover: color: var(--c-cmp-accordion-trigger-hover);
 * item-header:trigger:hover: background-color: var(--c-cmp-accordion-trigger-bg-hover, var(--c-gray-100));
 * item-header:trigger-icon: color: var(--c-cmp-accordion-trigger-icon, inherit);
 * item-header:trigger-icon: width/height: var(--s-cmp-accordion-icon, var(--s-icon));
 *
 * item-content: color: var(--c-cmp-accordion-item);
 * item-content: font-size: var(--t-cmp-accordion-body, var(--t-body-m));
 * item-content: background-color: var(--c-cmp-accordion-body-bg, var(--c-gray-100));
 * item-content: padding: var(--s-cmp-accordion-body-padding-top, var(--s-1)) var(--s-cmp-accordion-body-padding-right, var(--s-2)) var(--s-cmp-accordion-body-padding-bottom, var(--s-1)) var(--s-cmp-accordion-body-padding-left, var(--s-2));
 */
.AerAccordion-module--accordionRoot--63dc2 {
  border-radius: var(--s-cmp-accordion-border-radius, var(--s-border-radius-xs));
  width: var(--s-cmp-accordion-width, unset);
  background-color: var(--c-cmp-accordion-separator, var(--c-separator));
  box-shadow: var(--sh-cmp, var(--sh-box-xs));
}

.AerAccordion-module--accordionItem--370f4 {
  overflow: hidden;
  margin-top: var(--c-cmp-accordion-separator-height, 1px);
}

.AerAccordion-module--accordionItem--370f4:first-of-type {
  margin-top: 0;
  border-top-left-radius: var(--s-cmp-accordion-border-radius, var(--s-border-radius-xs));
  border-top-right-radius: var(--s-cmp-accordion-border-radius, var(--s-border-radius-xs));
}

.AerAccordion-module--accordionItem--370f4:last-of-type {
  border-bottom-left-radius: var(--s-cmp-accordion-border-radius, var(--s-border-radius-xs));
  border-bottom-right-radius: var(--s-cmp-accordion-border-radius, var(--s-border-radius-xs));
}

.AerAccordion-module--accordionItem--370f4:focus-within {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 var(--s-cmp-accordion-focus, 2px) var(--c-cmp-accordion-focus, --c-focus);
}

.AerAccordion-module--accordionHeader--4c2cc {
  display: flex;
  margin: 0;
}

.AerAccordion-module--accordionTrigger--94ed7 {
  all: unset;
  font-family: inherit;
  padding: var(--s-cmp-accordion-trigger-padding-top, var(--s-1)) var(--s-cmp-accordion-trigger-padding-right, var(--s-2)) var(--s-cmp-accordion-trigger-padding-bottom, var(--s-1)) var(--s-cmp-accordion-trigger-padding-left, var(--s-2));
  height: var(--cmp-accordion-trigger-height, var(--t-heading-m));
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-cmp-accordion-trigger, var(--t-heading-m));
  line-height: 1;
  color: var(--c-cmp-accordion-trigger);
  box-shadow: var(--sh-cmp-accordion-trigger, var(--sh-box-xs));
  background-color: var(--c-cmp-accordion-trigger-bg, var(--c-white));
}
.AerAccordion-module--accordionTrigger--94ed7:hover {
  color: var(--c-cmp-accordion-trigger-hover);
  background-color: var(--c-cmp-accordion-trigger-bg-hover, var(--c-gray-100));
}
.AerAccordion-module--accordionTrigger--94ed7[data-state=open] > .AerAccordion-module--accordionChevron--8680d {
  transform: rotate(180deg);
}

.AerAccordion-module--accordionContent--0e983 {
  overflow: hidden;
  font-size: var(--t-cmp-accordion-body, var(--t-body-m));
  color: var(--c-cmp-accordion-item);
  background-color: var(--c-cmp-accordion-body-bg, var(--c-gray-100));
}
.AerAccordion-module--accordionContent--0e983[data-state=open] {
  animation: AerAccordion-module--slideDown--7ccf6 var(--ease-duration-m) var(--ease-2);
}
.AerAccordion-module--accordionContent--0e983[data-state=closed] {
  animation: AerAccordion-module--slideUp--b9661 var(--ease-duration-m) var(--ease-2);
}
@media (prefers-reduced-motion) {
  .AerAccordion-module--accordionContent--0e983 {
    animation: none !important;
  }
}

.AerAccordion-module--accordionContentText--a8da1 {
  padding: var(--s-cmp-accordion-body-padding-top, var(--s-1)) var(--s-cmp-accordion-body-padding-right, var(--s-2)) var(--s-cmp-accordion-body-padding-bottom, var(--s-1)) var(--s-cmp-accordion-body-padding-left, var(--s-2));
}

.AerAccordion-module--accordionChevron--8680d {
  color: var(--c-cmp-accordion-trigger-icon, inherit);
  width: var(--s-cmp-accordion-icon, var(--s-icon));
  height: var(--s-cmp-accordion-icon, var(--s-icon));
  transition: transform var(--ease-duration-m) var(--ease-2);
}

@keyframes AerAccordion-module--slideDown--7ccf6 {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
@keyframes AerAccordion-module--slideUp--b9661 {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.People-module--root--ec8ed {
  --c-cmp-accordion-body-bg: var(--c-white);
  --s-cmp-accordion-body-padding-left: var(--s-2);
  --s-cmp-accordion-body-padding-right: var(--s-2);
  --s-cmp-accordion-body-padding-top: var(--s-2);
  --s-cmp-accordion-body-padding-bottom: var(--s-2);
  --s-cmp-accordion-trigger-padding-left: var(--s-2);
  --s-cmp-accordion-trigger-padding-right: var(--s-2);
  --s-cmp-accordion-trigger-padding-top: var(--s-4);
  --s-cmp-accordion-trigger-padding-bottom: var(--s-4);
  --cmp-accordion-trigger-height: max-content;
  box-shadow: none;
  /* don't have access to the open state :( */
}
.People-module--root--ec8ed [data-state=open] > .People-module--accordionChevron--1b208 {
  transform: rotate(0deg) !important;
}

.People-module--header--09ca9 {
  border-block-start: 1px solid #d1d1d1 !important;
}
.People-module--header--09ca9:hover, .People-module--header--09ca9:focus-visible {
  background-color: var(--c-sandy-fur);
}
.People-module--header--09ca9:focus-visible {
  outline: auto;
}

.People-module--heading--00f3a {
  display: block;
  font-family: var(--font-family-heading);
}

.People-module--accordionChevron--1b208 {
  transform: rotate(180deg) !important;
  transition: transform var(--ease-duration-m) var(--ease-2);
}

.People-module--content--1d3de {
  /* large margin on paragraphs */
}
.People-module--content--1d3de p {
  margin-block-end: var(--s-4);
}

.People-module--description--4de5e > ul > li {
  /* align the bullet list text with numbered list text */
  padding-inline-start: var(--s-7);
}
.People-module--description--4de5e > ul > li:before {
  /* adjust bullet position to align with numbered list */
  translate: calc(-1 * var(--s-3)) 2px;
  background-color: var(--c-black);
}

.People-module--portrait--9ca69 {
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-2);
  display: block;
  border-radius: var(--s-border-radius-s);
  width: 100%;
}
@media (min-width: 64rem) {
  .People-module--portrait--9ca69 {
    width: calc(var(--s-1) * 51);
    max-width: 100%;
    float: left;
    margin-inline-end: var(--s-2);
  }
}
.ParagraphPeople-module--heading--c6464 {
  margin-block-end: var(--s-4);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SignPostLinks-module--cardcontainer--db0ed {
  position: relative;
  min-height: 214px;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
  margin: var(--s-1);
  width: 100%;
  height: 100%;
}

.SignPostLinks-module--titlelink--914d2 {
  border-block-end: solid 1px rgba(209, 207, 207, 0.4);
  padding: 17px;
}

.SignPostLinks-module--childlinks--7425f {
  padding-inline-start: 18px;
  padding-inline-end: 18px;
  padding-block-start: 12px;
  padding-block-end: 12px;
}

.SignPostLinks-module--parentlink--09d2f {
  width: 100%;
  display: block;
  color: var(--c-midnight);
  text-decoration: none;
}

.SignPostLinks-module--childlink--062dc {
  width: 100%;
  display: block;
  font-weight: 500;
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  cursor: pointer;
}
.SignPostLinks-module--childlink--062dc:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.SignPostLinks-module--childlink--062dc:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.SignPostLinks-module--childlink--062dc:visited {
  text-decoration-style: solid;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphPopularTopics-module--wrapperinner--f4101 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 384px */
  min-height: calc(var(--s-1) * 48);
  margin: 0;
}

.ParagraphPopularTopics-module--title--c7cb4 {
  width: 100%;
  text-align: center;
  margin: var(--s-4) 0;
}
@media (min-width: 64rem) {
  .ParagraphPopularTopics-module--title--c7cb4 > * {
    font-size: var(--s-3);
    line-height: var(--lh-body-l);
  }
}

.ParagraphPopularTopics-module--swiperwrapper--8291d {
  position: relative;
  width: 100%;
  gap: var(--s-2);
}

.ParagraphPopularTopics-module--swiper--a2c98 {
  max-width: 100%;
}
@media screen and (min-width: 64rem) {
  .ParagraphPopularTopics-module--swiper--a2c98 {
    max-width: calc(100% - var(--s-10));
  }
}

.ParagraphPopularTopics-module--pagination--db6be {
  width: 100%;
  display: flex;
  justify-content: center;
  height: var(--s-10);
  margin-block-start: var(--s-2);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
h2 {
  line-height: var(--lh-heading-m);
}
@media (min-width: 64rem) {
  h2 {
    line-height: var(--lh-heading-l);
  }
}

.ParagraphQuiz-module--paragraphquizintroscreen--74656 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
}

.ParagraphQuiz-module--imagecontainer--fe8ec {
  width: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.ParagraphQuiz-module--image--f750d {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ParagraphQuiz-module--title--76cef {
  text-align: center;
}
@media (min-width: 64rem) {
  .ParagraphQuiz-module--title--76cef {
    text-align: left;
  }
}

.ParagraphQuiz-module--descriptionctn--a35b2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  width: 100%;
}
@media (min-width: 64rem) {
  .ParagraphQuiz-module--descriptionctn--a35b2 {
    align-items: flex-start;
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.ParagraphQuiz-module--description--e84dc {
  padding-block-start: var(--s-3);
  padding-block-end: var(--s-3);
}

.ParagraphQuiz-module--quizNavigation--7025f {
  background-color: var(--c-gray-200);
  padding-block: var(--s-3);
  padding-inline: var(--s-3);
  align-items: center;
  border-radius: 16px;
  width: 100%;
  margin-block-start: var(--s-);
  gap: var(--s-2);
  display: block;
}
@media (min-width: 64rem) {
  .ParagraphQuiz-module--quizNavigation--7025f {
    display: flex;
    flex-wrap: nowrap;
  }
}

.ParagraphQuiz-module--quizNavigation--7025f button {
  flex-grow: 1;
  width: 100%;
}

.ParagraphQuiz-module--time--0e1cb {
  white-space: nowrap;
  display: inline-block;
  margin-top: var(--s-2);
  padding-inline-start: var(--s-1);
}
@media (min-width: 64rem) {
  .ParagraphQuiz-module--time--0e1cb {
    margin-top: 0;
  }
}

.ParagraphQuiz-module--timeContainer--6c283 {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 64rem) {
  .ParagraphQuiz-module--timeContainer--6c283 {
    justify-content: flex-start;
    align-items: center;
    margin-left: var(--s-3);
  }
}

.ParagraphQuiz-module--clockIcon--99cef {
  position: relative;
  top: 9px;
}
@media (min-width: 64rem) {
  .ParagraphQuiz-module--clockIcon--99cef {
    top: 4px;
  }
}

.ParagraphQuiz-module--buttonText--bda1f {
  padding-inline-end: var(--s-1);
}

.ParagraphQuiz-module--buttonContainer--df531 {
  width: 100%;
}
@media (min-width: 64rem) {
  .ParagraphQuiz-module--buttonContainer--df531 {
    flex: 0 0 auto;
    width: 280px;
  }
}

/* Tablet & Desktop View */
@media (min-width: 64rem) {
  .ParagraphQuiz-module--paragraphquizintroscreen--74656 {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .ParagraphQuiz-module--imagecontainer--fe8ec {
    flex-shrink: 0;
    margin-right: var(--s-3);
  }
  .ParagraphQuiz-module--quizNavigation--7025f {
    width: 100%;
    justify-content: flex-start;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphQuote-module--paragraphquote--d5a5c {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  min-height: calc(var(--s-1) * 19);
  /* 150px */
  box-sizing: border-box;
}

.ParagraphQuote-module--paragraphquotehighlighted--1b92a {
  background-color: var(--c-sunshine-yellow);
  border-radius: var(--s-1);
  padding-block-start: var(--s-4);
  padding-block-end: var(--s-4);
  padding-inline-end: var(--s-5);
  padding-inline-start: var(--s-1);
}
.ParagraphQuote-module--paragraphquotehighlighted--1b92a .ParagraphQuote-module--content--a6422 *::selection {
  background-color: var(--c-white);
}

.ParagraphQuote-module--content--a6422 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-inline-start: var(--s-4);
  max-width: 56rem;
  margin-inline: auto;
}
.ParagraphQuote-module--content--a6422 *::selection {
  background-color: var(--c-sunshine-yellow);
}

.ParagraphQuote-module--quote--a377d {
  position: relative;
  margin-block-end: var(--s-2);
}

.ParagraphQuote-module--quotemarks--91ee3 {
  float: left;
  height: var(--s-2);
  /* 48px */
  width: calc(var(--s-1) * 6);
  padding-inline-end: 14px;
  padding-block-end: 28px;
  margin-block-start: -22px;
}
@media (min-width: 64rem) {
  .ParagraphQuote-module--quotemarks--91ee3 {
    margin-block-start: -22px;
    height: var(--s-4);
  }
}

.ParagraphQuote-module--quotetext--45777 {
  font-family: var(--font-family-heading);
  margin: 0;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .ParagraphQuote-module--quotetext--45777 {
    font-size: var(--t-heading-xl);
    line-height: var(--s-5);
  }
}
.ParagraphQuote-module--quotetext--45777 {
  padding-block-start: 22px;
}
.ParagraphQuote-module--quotetext--45777::before, .ParagraphQuote-module--quotetext--45777::after {
  content: none;
}
.ParagraphQuote-module--quotetext--45777 > svg {
  margin-inline-start: 5px;
}

.ParagraphQuote-module--quotee--50cd7 {
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  font-weight: 600;
  padding: 0;
  margin: 0;
}

.ParagraphQuote-module--quoteerole--0961d {
  font-weight: 500;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionBreedList-module--breedlistouter--d6d9f {
  width: 100%;
  height: auto;
  margin: var(--s-5) 0 0;
}

.SectionBreedList-module--breedlistinner--105c8 {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.SectionBreedList-module--textWrapper--9603f {
  width: 100%;
}
@media (min-width: 37.5rem) {
  .SectionBreedList-module--textWrapper--9603f {
    /* 704px */
    max-width: calc(var(--s-1) * 88);
  }
}
@media screen and (min-width: 75rem) {
  .SectionBreedList-module--textWrapper--9603f {
    max-width: calc(var(--s-1) * 100);
  }
}

.SectionBreedList-module--title--d2ee1 {
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionOurStoriesFilteredList-module--filterouter--9ff34 {
  width: 100%;
  background-color: var(--c-sandy-fur);
}

.SectionOurStoriesFilteredList-module--filterinner--b116d {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  background-color: var(--c-sandy-fur);
  border-radius: var(--s-0-5);
  align-self: center;
  margin-inline-start: auto;
  margin-inline-end: auto;
  box-sizing: border-box;
  max-width: var(--s-max-content-width);
  z-index: 1;
}

.SectionOurStoriesFilteredList-module--filterlabel--16bc9 {
  /* 320px */
  min-width: calc(var(--s-1) * 40);
  text-align: left;
  margin-block-end: 5px;
}
.SectionOurStoriesFilteredList-module--filterlabel--16bc9 > label {
  font-size: var(--t-body-s);
}

.SectionOurStoriesFilteredList-module--filterselect--9c86d {
  /* 320px */
  min-width: calc(var(--s-1) * 40);
  text-align: left;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
}
.SectionOurStoriesFilteredList-module--filterselect--9c86d > div {
  border-color: var(--c-black);
  cursor: pointer;
}

.SectionOurStoriesFilteredList-module--bordersection--749bc {
  position: relative;
  display: flex;
  min-width: 100vw;
  margin-inline-start: 0;
  justify-self: center;
  background-color: var(--c-sandy-fur);
  height: auto;
  pointer-events: none;
}

.SectionOurStoriesFilteredList-module--borderbottom--3d25e {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-block-start: -2px;
  min-width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
}

.SectionOurStoriesFilteredList-module--paginationbreak--375ae {
  width: 100%;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  padding-block-start: var(--s-4);
  padding-block-end: var(--s-1);
  box-sizing: border-box;
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
  text-align: center;
  font-weight: 600;
}

.SectionOurStoriesFilteredList-module--viewmorewrapper--9a370 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  /* 144px */
  height: calc(var(--s-1) * 18);
  padding: var(--s-2);
}

.SectionOurStoriesFilteredList-module--viewmoretext--5370c {
  position: relative;
  font-family: var(--font-family);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  font-weight: 500;
}

.SectionOurStoriesFilteredList-module--loadingbar--27fdc {
  display: flex;
  justify-self: left;
  border-block-end: 3px solid var(--c-oatmeal-40);
  width: var(--s-common-element-width-m);
}

.SectionOurStoriesFilteredList-module--loadingbarfiller--7184d {
  border-block-end: 3px solid var(--c-dawn);
  margin-block-end: -3px;
}

.SectionOurStoriesFilteredList-module--loadingoverlay--f2ad1 {
  pointer-events: none;
  height: var(--s-9);
  width: 100%;
  position: absolute;
  z-index: var(--s-0-5);
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  margin-block-start: calc(var(--s-5) * -1);
}
.SectionOurStoriesFilteredList-module--loadingoverlay--f2ad1 .SectionOurStoriesFilteredList-module--loadingicon--15a34 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: var(--s-0-5);
  box-sizing: border-box;
  overflow: visible;
  transform: scale(0.6);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionHighlightedTextBlock-module--highlightedtextinner--bf2b9 {
  padding: 0 var(--s-4);
  margin: var(--s-4);
  box-sizing: border-box;
  /* 744px */
  width: calc(var(--s-1) * 93);
  text-align: center;
}

.SectionHighlightedTextBlock-module--textarea--7490e {
  width: 100%;
  background-color: var(--c-mist-38pc-opacity);
  border-radius: var(--s-0-5);
  padding: var(--s-1);
  box-sizing: border-box;
}
.SectionHighlightedTextBlock-module--textarea--7490e p {
  font-family: var(--font-family);
  font-weight: 500;
  margin: var(--s-1);
}
.SectionHighlightedTextBlock-module--textarea--7490e a {
  font-weight: 600;
}
@media screen and (min-width: 64rem) {
  .SectionHighlightedTextBlock-module--textarea--7490e {
    max-width: 100%;
  }
}

.SectionHighlightedTextBlock-module--highlightedtextsectionbreak--ed4f8 {
  width: 95%;
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
}
@media screen and (min-width: 64rem) {
  .SectionHighlightedTextBlock-module--highlightedtextsectionbreak--ed4f8 {
    max-width: 70%;
  }
}
.SectionHighlightedTextBlock-module--highlightedtextsectionbreak--ed4f8 {
  align-self: flex-start;
  margin: var(--s-4) 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionSignPostCardCarousel-module--signpostcardcarouselinner--5f774 {
  display: flex;
  flex-direction: column;
  text-align: left;
  z-index: var(--z-toast);
  width: 100%;
  box-sizing: border-box;
}
@media screen and (min-width: 64rem) {
  .SectionSignPostCardCarousel-module--signpostcardcarouselinner--5f774 {
    width: 100%;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
}

.SectionSignPostCardCarousel-module--titlewrapper--7ea19 {
  text-align: start;
  width: 100%;
  padding: var(--s-2) 0 0;
}

.SectionSignPostCardCarousel-module--title--73cc8 {
  font-size: var(--t-heading-m);
  line-height: var(--lh-heading-m);
  margin-block: 0;
}
@media screen and (min-width: 64rem) {
  .SectionSignPostCardCarousel-module--title--73cc8 {
    font-size: var(--t-heading-l);
    line-height: var(--lh-heading-l);
  }
}

.SectionSignPostCardCarousel-module--introtext--24257 {
  text-align: start;
  width: 100%;
  margin-block-end: var(--s-2);
}
.SectionSignPostCardCarousel-module--introtext--24257 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.SectionSignPostCardCarousel-module--swiperwrapper--83e8c {
  position: relative;
  width: 100%;
}

.SectionSignPostCardCarousel-module--swiper--e8c08 {
  max-width: 100%;
  box-sizing: border-box;
}

.SectionSignPostCardCarousel-module--pagination--0c469 {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-block-start: var(--s-2);
  height: var(--s-10);
  z-index: var(--z-app-shell);
}

.SectionSignPostCardCarousel-module--buttonwrapper--c0b93 {
  position: relative;
  display: flex;
  justify-content: center;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.StandardSignPostCarouselCard-square-module--squarecardwrapper--73ba8 {
  position: relative;
  display: flex;
  justify-content: center;
  margin-inline: var(--s-1);
  min-height: 100%;
  width: calc(var(--s-1) * 40);
}
@media (min-width: 37.5rem) {
  .StandardSignPostCarouselCard-square-module--squarecardwrapper--73ba8 {
    width: var(--s-common-element-width-m);
  }
}

.StandardSignPostCarouselCard-square-module--squarecardcomponent--30458 {
  position: relative;
  max-width: calc(100% - 32px);
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  margin: var(--s-1) var(--s-1);
  background: var(--c-white);
  flex: 1 1;
}

.StandardSignPostCarouselCard-square-module--squarecardborderwrapper--23e9d {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  inset-block-end: 0;
  inset-inline-start: 0;
}
.StandardSignPostCarouselCard-square-module--squarecardborderwrapper--23e9d .StandardSignPostCarouselCard-square-module--squarecardborder--f2a88 {
  position: relative;
  width: 100%;
}
.StandardSignPostCarouselCard-square-module--squarecardborderwrapper--23e9d .StandardSignPostCarouselCard-square-module--squarecardborder--f2a88 span {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
}
.StandardSignPostCarouselCard-square-module--squarecardborderwrapper--23e9d .StandardSignPostCarouselCard-square-module--squarecardborder--f2a88 span svg {
  width: 100%;
  margin-block-end: -2px;
}

.StandardSignPostCarouselCard-square-module--squarecardimage--c6642 {
  position: relative;
  height: calc(var(--s-1) * 26);
  /* 208px */
  width: 100%;
  overflow: hidden;
}

.StandardSignPostCarouselCard-square-module--squarecardcardimg--f8525 {
  inset-block-start: 0;
  align-self: center;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.StandardSignPostCarouselCard-square-module--squarecarddetails--10304 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: var(--s-1) var(--s-2) var(--s-2);
  box-sizing: border-box;
  height: calc(100% - var(--s-1) * 26);
}
.StandardSignPostCarouselCard-square-module--squarecarddetails--10304 p {
  color: var(--c-dawn) !important;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
}
.StandardSignPostCarouselCard-square-module--squarecarddetails--10304 .StandardSignPostCarouselCard-square-module--cardtitleanchor--20133 {
  color: var(--c-black);
  text-decoration: none;
}
.StandardSignPostCarouselCard-square-module--squarecarddetails--10304 .StandardSignPostCarouselCard-square-module--squarecardsubtitle--45e3a {
  width: 100%;
}
.StandardSignPostCarouselCard-square-module--squarecarddetails--10304 .StandardSignPostCarouselCard-square-module--squarecardsubtitle--45e3a .StandardSignPostCarouselCard-square-module--rtetext--08616 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
}

.StandardSignPostCarouselCard-square-module--buttonwrapper--9330f {
  margin-block-start: auto;
}

.StandardSignPostCarouselCard-square-module--title--2fd1c {
  font-size: var(--t-heading-xs);
  line-height: var(--lh-heading-xs);
  text-align: left;
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.TestimonialSignPostCarouselCard-square-module--squarecardwrapper--1d43e {
  display: flex;
  justify-content: center;
  width: var(--s-common-element-width-m);
}

.TestimonialSignPostCarouselCard-square-module--squarecardcomponent--7ba00 {
  position: relative;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  margin: var(--s-1) var(--s-1);
  background: var(--c-white);
  height: 100%;
  /* 280px */
  max-width: calc(var(--s-1) * 35);
}

.TestimonialSignPostCarouselCard-square-module--squarecardborderwrapper--1ccfa {
  position: absolute;
  height: var(--s-10);
  /* 280px */
  width: 100%;
  inset-block-end: calc(var(--s-1) * -1);
  inset-inline-start: 0;
}
.TestimonialSignPostCarouselCard-square-module--squarecardborderwrapper--1ccfa .TestimonialSignPostCarouselCard-square-module--squarecardborder--e197d {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 65px;
  /* 280px */
  width: calc(var(--s-1) * 35);
}

.TestimonialSignPostCarouselCard-square-module--squarecardimage--fa1ca {
  position: relative;
  height: calc(var(--s-1) * 26);
  /* 208px */
  width: 100%;
  overflow: hidden;
}

.TestimonialSignPostCarouselCard-square-module--squarecardcardimg--17f9c {
  margin-block-start: -25px;
  width: 100%;
  height: auto;
}

.TestimonialSignPostCarouselCard-square-module--squarecarddetails--92c24 {
  width: 100%;
  height: 100%;
  padding: 0 var(--s-2) var(--s-2);
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.TestimonialSignPostCarouselCard-square-module--squarecarddetails--92c24 p {
  margin-block-start: 0;
}

.TestimonialSignPostCarouselCard-square-module--squarecardsubtitle--238ea {
  width: 100%;
}

.TestimonialSignPostCarouselCard-square-module--squarecardsubtitletext--40205 {
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-dawn);
}

.TestimonialSignPostCarouselCard-square-module--buttonwrapper--bdddc a {
  margin: 0 auto;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionSpotlightDogs-module--spotlightdogsinner--df15d {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.SectionSpotlightDogs-module--heading--d1894 {
  text-align: start;
  width: 100%;
  margin: 0 var(--s-2);
}

.SectionSpotlightDogs-module--title--b3924 {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
  padding: 0 var(--s-2);
}
@media (min-width: 64rem) {
  .SectionSpotlightDogs-module--title--b3924 {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}

.SectionSpotlightDogs-module--introtext--3c71a {
  text-align: start;
  width: 100%;
  padding: 0 var(--s-2);
  box-sizing: border-box;
}
.SectionSpotlightDogs-module--introtext--3c71a p {
  margin-block-end: 0;
}

.SectionSpotlightDogs-module--showalldogs--037c5 {
  position: relative;
  max-width: calc(100% - var(--s-6));
}
@media (min-width: 37.5rem) {
  .SectionSpotlightDogs-module--showalldogs--037c5 {
    max-width: calc(var(--s-10) * 3.5);
  }
}
.SectionSpotlightDogs-module--showalldogs--037c5 {
  margin-inline: auto;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionTextOnlySignpostCard-module--sectiontextonlysignpostcard--dee21 {
  padding: 0 var(--s-4);
  box-sizing: border-box;
}
.SectionTextOnlySignpostCard-module--sectiontextonlysignpostcard--dee21 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.SectionTextOnlySignpostCard-module--container--ea780 {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline-start: auto;
  margin-inline-end: auto;
  margin-block-end: var(--s-3);
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  background: var(--c-sandy-fur);
  box-sizing: border-box;
}
@media (min-width: 56.25rem) {
  .SectionTextOnlySignpostCard-module--container--ea780 {
    width: 75%;
    flex-direction: row;
    padding-block-start: 46px;
    padding-block-end: 46px;
    /* 48px */
    padding-inline-start: calc(var(--s-1) * 6);
    /* 48px */
    padding-inline-end: calc(var(--s-1) * 6);
  }
}
@media (min-width: 64rem) {
  .SectionTextOnlySignpostCard-module--container--ea780 {
    width: 65%;
  }
}

.SectionTextOnlySignpostCard-module--titlewrapper--64d67 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 56.25rem) {
  .SectionTextOnlySignpostCard-module--titlewrapper--64d67 {
    max-width: 31%;
  }
}

.SectionTextOnlySignpostCard-module--title--1f593 {
}

.SectionTextOnlySignpostCard-module--body--7eca0 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 56.25rem) {
  .SectionTextOnlySignpostCard-module--body--7eca0 {
    max-width: 69%;
    margin-block-start: -16px;
    padding-inline-start: 5%;
  }
}

.SectionTextOnlySignpostCard-module--footertext--11459 {
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
}

.SectionTextOnlySignpostCard-module--containerstacked--00172 {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline-start: auto;
  margin-inline-end: auto;
  margin-block-end: var(--s-3);
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  background: var(--c-sandy-fur);
  box-sizing: border-box;
  padding: var(--s-1);
}
@media (min-width: 23.4375rem) {
  .SectionTextOnlySignpostCard-module--containerstacked--00172 {
    padding: 25px;
  }
}
@media (min-width: 56.25rem) {
  .SectionTextOnlySignpostCard-module--containerstacked--00172 {
    width: 75%;
    padding-block-start: 46px;
    padding-block-end: 46px;
    /* 48px */
    padding-inline-start: calc(var(--s-1) * 6);
    /* 48px */
    padding-inline-end: calc(var(--s-1) * 6);
  }
}
@media (min-width: 64rem) {
  .SectionTextOnlySignpostCard-module--containerstacked--00172 {
    width: 65%;
  }
}
.SectionTextOnlySignpostCard-module--containerstacked--00172 > .SectionTextOnlySignpostCard-module--title--1f593 {
  padding: var(--s-2);
}
@media (min-width: 23.4375rem) {
  .SectionTextOnlySignpostCard-module--containerstacked--00172 > .SectionTextOnlySignpostCard-module--title--1f593 {
    padding: 0;
  }
}
.SectionTextOnlySignpostCard-module--containerstacked--00172 > .SectionTextOnlySignpostCard-module--title--1f593 {
  margin-block-end: var(--s-3);
}
@media (min-width: 56.25rem) {
  .SectionTextOnlySignpostCard-module--containerstacked--00172 > .SectionTextOnlySignpostCard-module--title--1f593 {
    max-width: 100%;
  }
}
@media (min-width: 56.25rem) {
  .SectionTextOnlySignpostCard-module--containerstacked--00172 > .SectionTextOnlySignpostCard-module--body--7eca0 {
    max-width: 100%;
    margin-block-start: 0;
    padding-inline-start: 0;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionWithList-module--sectionwithlist--2a40b {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 0 var(--s-1);
}
@media (min-width: 37.5rem) {
  .SectionWithList-module--sectionwithlist--2a40b {
    justify-content: center;
  }
}
.SectionWithList-module--sectionwithlist--2a40b ul {
  display: grid;
  width: 100%;
  grid-auto-rows: auto;
  /* Maximum of 3 rows per column */
  gap: 10px;
  list-style: none;
  /* Remove default bullets */
  padding: 0;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 37.5rem) {
  .SectionWithList-module--sectionwithlist--2a40b ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.SectionWithList-module--sectionwithlist--2a40b ul li {
  position: relative;
  padding-inline-start: var(--s-3);
  min-height: unset;
}
@media (min-width: 64rem) {
  .SectionWithList-module--sectionwithlist--2a40b ul li {
    padding-block-end: 0;
  }
}
.SectionWithList-module--sectionwithlist--2a40b ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
  position: absolute;
  inset-inline-start: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}

.SectionWithList-module--title--c9bb6 {
  width: 100%;
  text-align: start;
}

.SectionWithList-module--contentcontainer--41d34 {
  display: flex;
  flex-direction: column;
  row-gap: var(--s-6);
  width: 100%;
}

.SectionWithList-module--sectioncontainer--45f07:first-child {
  display: flex;
  flex-direction: column;
  row-gap: var(--s-2);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionBehaviourHelplineForm-module--behaviourform--8d45a {
  max-width: 100%;
  box-sizing: border-box;
}

.SectionBehaviourHelplineForm-module--fieldset--3a16d {
  padding: 0;
  margin: 0;
  border: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}

.SectionBehaviourHelplineForm-module--legend--8be81 {
  font-family: var(--font-family-heading);
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
  margin-block-end: var(--s-4);
}
@media (min-width: 64rem) {
  .SectionBehaviourHelplineForm-module--legend--8be81 {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}

.SectionBehaviourHelplineForm-module--inputwrapper--8ab8e {
  width: 100%;
  max-width: 100%;
}
@media screen and (min-width: 64rem) {
  .SectionBehaviourHelplineForm-module--inputwrapper--8ab8e {
    width: 49%;
    max-width: 49% !important;
  }
}
.SectionBehaviourHelplineForm-module--inputwrapper--8ab8e label,
.SectionBehaviourHelplineForm-module--inputwrapper--8ab8e .SectionBehaviourHelplineForm-module--textinputlabel--9f8c7 {
  font-weight: 600;
}
.SectionBehaviourHelplineForm-module--inputwrapper--8ab8e .SectionBehaviourHelplineForm-module--textinputlabel--9f8c7 {
  margin-block-end: var(--s-1);
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-1);
}
.SectionBehaviourHelplineForm-module--inputwrapper--8ab8e .SectionBehaviourHelplineForm-module--textinputlabel--9f8c7 label {
  margin: 0;
}

.SectionBehaviourHelplineForm-module--submitcontainer--fcedc {
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .SectionBehaviourHelplineForm-module--submitcontainer--fcedc {
    width: 49%;
    max-width: 49% !important;
  }
}

.SectionBehaviourHelplineForm-module--input--c6219 {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--sh-box-1);
  border: 1px solid var(--c-dawn);
  color: var(--c-dawn);
  margin-block-end: var(--s-2);
  padding-inline-start: 15px;
}
.SectionBehaviourHelplineForm-module--input--c6219::placeholder {
  color: var(--c-dawn);
}

.SectionBehaviourHelplineForm-module--inputtextarea--f0047 {
  width: 100%;
  padding: 0;
  margin-block-end: var(--s-2);
}
.SectionBehaviourHelplineForm-module--inputtextarea--f0047 textarea {
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--c-dawn);
  color: var(--c-dawn);
}
.SectionBehaviourHelplineForm-module--inputtextarea--f0047 textarea::placeholder {
  color: var(--c-dawn);
}

.SectionBehaviourHelplineForm-module--select--e7331 {
  margin-block-end: var(--s-2);
  border-radius: 6px;
  border: 1px solid var(--c-dawn);
  color: var(--c-dawn);
  box-shadow: var(--sh-box-1);
}
.SectionBehaviourHelplineForm-module--select--e7331 > div {
  min-height: 47px;
  border: 0;
  background: none;
}
.SectionBehaviourHelplineForm-module--select--e7331 > div > div > div {
  color: var(--c-dawn);
  padding-inline-start: 5px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionBreedCarousel-module--breedcarouselinner--acd6c {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--s-2);
}

.SectionBreedCarousel-module--textWrapper--9ab8a {
  padding-block-start: var(--s-2);
  padding-block-end: var(--s-5);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionBreedSearch-module--breedsearchinner--42af5 {
  display: flex;
  flex-direction: column;
  padding-block-start: 23px;
}
@media screen and (min-width: 64rem) {
  .SectionBreedSearch-module--breedsearchinner--42af5 {
    flex-direction: row;
    justify-content: space-between;
    column-gap: 106px;
    align-items: center;
    padding-block-start: var(--s-4);
  }
}

.SectionBreedSearch-module--imagecontainer--9514e {
  /* 200px */
  width: calc(var(--s-1) * 25);
  /* 200px */
  height: calc(var(--s-1) * 25);
  margin-block-end: var(--s-2);
}
@media screen and (min-width: 64rem) {
  .SectionBreedSearch-module--imagecontainer--9514e {
    margin-bottom: 0;
  }
}

.SectionBreedSearch-module--formcontainer--e54a3 {
  width: 100%;
}

.SectionBreedSearch-module--heading--5db5a {
  margin-block-end: 25px;
}
@media screen and (min-width: 64rem) {
  .SectionBreedSearch-module--heading--5db5a {
    margin-block-end: var(--s-5);
  }
}

.SectionBreedSearch-module--breedsearchform--d26bf {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 64rem) {
  .SectionBreedSearch-module--breedsearchform--d26bf {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.SectionBreedSearch-module--filter--9296d {
  width: 100%;
  margin-block-end: var(--s-2);
}
@media screen and (min-width: 64rem) {
  .SectionBreedSearch-module--filter--9296d {
    width: 48%;
  }
}

.SectionBreedSearch-module--select--e6009 {
  width: 100%;
  height: var(--s-6);
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjYgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbl9kcm9wZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTIuNjQ5NTQyNCwxNi4yODEyMzc0IEMxMi44MTYyMDg1LDE2LjI4MTIzNzQgMTIuOTYyMDQxNywxNi4yMTg3Mzc2IDEzLjA4NzA0MTQsMTYuMDkzNzM3OSBMMTcuMTE4MjgxOCwxMi4wNjI0OTc1IEMxNy4zMDU3ODEzLDExLjg3NDk5NzkgMTcuMzQ3NDQ3NywxMS42NTEwNCAxNy4yNDMyODE1LDExLjM5MDYyNDEgQzE3LjEzOTExNTIsMTEuMTMwMjA4MiAxNi45NTE2MTU3LDExIDE2LjY4MDc4MjgsMTEgTDguNjE4MzAyMDMsMTEgQzguMzQ3NDY5MTgsMTEgOC4xNTk5Njk2MywxMS4xMzAyMDgyIDguMDU1ODAzMzcsMTEuMzkwNjI0MSBDNy45NTE2MzcxMSwxMS42NTEwNCA3Ljk5MzMwMzUyLDExLjg3NDk5NzkgOC4xODA4MDMwNywxMi4wNjI0OTc1IEwxMi4yMTIwNDM1LDE2LjA5MzczNzkgQzEyLjMzNzA0MzIsMTYuMjE4NzM3NiAxMi40ODI4NzYzLDE2LjI4MTIzNzQgMTIuNjQ5NTQyNCwxNi4yODEyMzc0IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJpY29uX2Ryb3Bkb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBzdHJva2U9IiNEREREREQiIGN4PSIxMyIgY3k9IjEzIiByPSIxMiI+PC9jaXJjbGU+CiAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8dXNlIGlkPSJjYXJldC1kb3duIiBmaWxsPSIjMjIyMjIyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgPC9nPgo8L3N2Zz4=) no-repeat center right;
  background-color: var(--c-white);
  padding-inline-end: var(--s-1);
  background-origin: content-box;
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  padding-inline-start: var(--s-2);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: radio-container;
  opacity: 1;
  color: var(--c-midnight);
}
.SectionBreedSearch-module--select--e6009:disabled {
  opacity: 0.4;
}

@media screen and (min-width: 64rem) {
  label {
    font-size: var(--t-body-l);
    line-height: var(--lh-body-l);
    font-weight: 500;
  }
}

.SectionBreedSearch-module--btncontainer--11e12 {
  margin-block-start: 5px;
}
@media screen and (min-width: 64rem) {
  .SectionBreedSearch-module--btncontainer--11e12 {
    width: 48%;
    margin-block-start: var(--s-2);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.BreedListingCard-module--cardcontainer--f9f11 {
  position: relative;
  min-height: 352px;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
  margin: var(--s-1) 0;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.BreedListingCard-module--cardanchor--1c6d7 {
  width: 100%;
  display: block;
}

.BreedListingCard-module--cardimagewrapper--1c547 {
  position: relative;
  /* 224px */
  width: 100%;
  border-radius: var(--s-1) var(--s-1) 0 0;
  overflow: hidden;
  aspect-ratio: 4/3;
}
@media only screen and (min-width: 37.5rem) {
  .BreedListingCard-module--cardimagewrapper--1c547 {
    aspect-ratio: unset;
    height: calc(var(--s-1) * 28);
  }
}

.BreedListingCard-module--cardimage--779d5 {
  position: relative;
  object-fit: cover;
  border-top-right-radius: var(--s-1);
  border-top-left-radius: var(--s-1);
  width: 100%;
  aspect-ratio: 4/3;
}
@media only screen and (min-width: 37.5rem) {
  .BreedListingCard-module--cardimage--779d5 {
    aspect-ratio: unset;
    height: calc(var(--s-1) * 28);
  }
}

.BreedListingCard-module--carddetailscontainer--af08a {
  position: relative;
  height: calc(100% - var(--s-1) * 28);
  width: 100%;
  max-width: 100%;
  padding: var(--s-2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 37.5rem) {
  .BreedListingCard-module--carddetailscontainer--af08a {
    width: 333px;
  }
}
@media only screen and (min-width: 56.25rem) {
  .BreedListingCard-module--carddetailscontainer--af08a {
    width: 368px;
  }
}

.BreedListingCard-module--nametext--5368a {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.BreedListingCard-module--breedtext--aeb90 {
  font-family: var(--font-family);
  font-weight: 500;
}

.BreedListingCard-module--carddetails--a574a {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
  margin: var(--s-2) 0 var(--s-1) 0;
}

.BreedListingCard-module--sheddingdetails--6cbb7 {
  margin: 0 0 var(--s-1) 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.DogListingsFilters-module--doglistingouter--e9783 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-block-end: 0;
}
@media screen and (min-width: 64rem) {
  .DogListingsFilters-module--doglistingouter--e9783 {
    margin-bottom: 0;
  }
}
.DogListingsFilters-module--doglistingouter--e9783 {
  overflow: hidden;
}

.DogListingsFilters-module--doglistinginner--0d650 {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--c-sunshine-yellow);
  max-width: 64rem;
}

.DogListingsFilters-module--filters--8d899 {
  position: relative;
  max-width: 90rem;
  padding-inline: var(--s-2);
  width: 100%;
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 37.5rem) {
  .DogListingsFilters-module--filters--8d899 {
    grid-template-columns: 1fr 1fr;
  }
}

.DogListingsFilters-module--listings--480d5 {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: calc(var(--s-1) * 100);
  background-color: var(--c-sandy-fur);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.DogListingsFilters-module--listings--480d5 .DogListingsFilters-module--results--9177e {
  width: 100%;
  max-width: 64rem;
  padding-block-start: var(--s-2);
  position: relative;
  background-color: transparent;
}

.DogListingsFilters-module--bordersection--a6741 {
  position: absolute;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  inset-block-start: 0;
  padding-block-start: var(--s-8);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.DogListingsFilters-module--border--bcafe {
  position: relative;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: 0;
}
@media screen and (min-width: 90rem) {
  .DogListingsFilters-module--border--bcafe {
    bottom: -var(--s-2);
  }
}

.DogListingsFilters-module--filtersbutton--8b8fe {
  display: flex;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--s-1);
  padding-inline-end: var(--s-1);
  padding-inline-start: var(--s-1);
  width: 100%;
  height: var(--s-6);
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 600;
  box-shadow: var(--sh-box-outer);
  text-decoration: none !important;
}
.DogListingsFilters-module--filtersbutton--8b8fe:hover {
  cursor: pointer;
}
.DogListingsFilters-module--filtersbutton--8b8fe {
  background-color: var(--c-white);
  margin: var(--s-1) 0;
  font-size: var(--t-body-s);
}

.DogListingsFilters-module--allfilters--b2ee9 {
  color: var(--c-black);
}

.DogListingsFilters-module--sortfilters--cb28b {
  position: relative;
  color: var(--c-black);
  z-index: var(--z-toast);
}

.DogListingsFilters-module--sortoptions--e58d7 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  border-radius: var(--s-1);
  width: 100%;
  inset-block-start: calc(100% + 2px);
  inset-inline-start: 0;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-outer);
  overflow: hidden;
  pointer-events: all;
}

.DogListingsFilters-module--sortoption--de042 {
  display: flex;
  margin-block-start: -1px;
  border-block-start: 1px solid var(--c-oatmeal-40);
  flex-direction: column;
  justify-content: center;
  padding-inline-start: var(--s-2);
  height: var(--s-5);
  font-weight: 500;
  font-size: var(--t-body-s);
}
@media only screen and (min-width: 37.5rem) {
  .DogListingsFilters-module--sortoption--de042 {
    font-size: var(--t-body-l);
  }
}
.DogListingsFilters-module--sortoption--de042 {
  cursor: pointer;
}
.DogListingsFilters-module--sortoption--de042:hover {
  background-color: var(--c-sandy-fur);
}

.DogListingsFilters-module--iconwrapper--afea9 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block-start: var(--s-1);
  padding-inline-start: var(--s-1);
  box-sizing: border-box;
  height: 100%;
  min-width: var(--s-5);
}

.DogListingsFilters-module--textwrapper--eb683 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.DogListingsFilters-module--title--1f053 {
  display: flex;
  align-items: center;
  height: 100%;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.DogListingsFilters-module--titlewithvalue--50225 {
  display: flex;
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-xs);
  font-weight: 600;
}

.DogListingsFilters-module--value--f117b {
  display: flex;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xs);
}

.DogListingsFilters-module--countwrapper--966e4 {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  padding-inline-end: var(--s-2);
}
.DogListingsFilters-module--countwrapper--966e4 .DogListingsFilters-module--filterselectedcount--756e8 {
  background-color: var(--c-midnight);
  color: var(--c-white);
  height: var(--s-3);
  width: var(--s-3);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  font-family: var(--font-family);
  margin-inline-start: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionDogList-module--component--f1a06 {
  min-height: var(--s-4);
  max-height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: 0 var(--s-2);
}
@media (min-width: 37.5rem) {
  .SectionDogList-module--component--f1a06 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .SectionDogList-module--component--f1a06 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.SectionDogList-module--viewmorewrapper--776a5 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  /* 144px */
  height: calc(var(--s-1) * 18);
  padding: var(--s-2);
}

.SectionDogList-module--viewmoretext--d494c {
  position: relative;
  font-family: var(--font-family);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  font-weight: 500;
}

.SectionDogList-module--showmorebutton--72619 {
  background-color: var(--c-sandy-fur);
}

.SectionDogList-module--listbreak--467e7 {
  margin: var(--s-2) auto;
  border-block-end: 3px solid var(--c-oatmeal-40);
  width: 80%;
}
@media (min-width: 37.5rem) {
  .SectionDogList-module--listbreak--467e7 {
    grid-column: span 2;
  }
}
@media (min-width: 64rem) {
  .SectionDogList-module--listbreak--467e7 {
    grid-column: span 3;
  }
}

.SectionDogList-module--loadingbar--6a03c {
  display: flex;
  justify-self: left;
  border-block-end: 3px solid var(--c-oatmeal-40);
  width: var(--s-common-element-width-m);
}

.SectionDogList-module--loadingbarfiller--3422d {
  border-block-end: 3px solid var(--c-dawn);
  margin-block-end: -3px;
}

.SectionDogList-module--loadingoverlay--1643c {
  pointer-events: none;
  height: var(--s-9);
  width: 100%;
  position: absolute;
  z-index: var(--s-0-5);
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  margin-block-start: calc(var(--s-5) * -1);
}
.SectionDogList-module--loadingoverlay--1643c .SectionDogList-module--loadingicon--6c931 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: var(--s-0-5);
  box-sizing: border-box;
  overflow: visible;
  transform: scale(0.6);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.DogListingCard-module--dogcardcontainer--11630 {
  position: relative;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.DogListingCard-module--dogcardcontainer--11630 a,
.DogListingCard-module--dogcardcontainer--11630 .DogListingCard-module--innercontainer--be405 {
  overflow: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.DogListingCard-module--dogcardcontainer--11630 > div {
  height: 100%;
}

.DogListingCard-module--dogcardimagewrapper--c1420 {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--s-1) var(--s-1) 0 0;
  overflow: hidden;
}

.DogListingCard-module--dogcardimage--afffb {
  position: relative;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.DogListingCard-module--dogplaceholderimage--c84fa {
  position: relative;
  height: 100%;
  width: 100%;
  object-fit: cover;
  background-position: center center;
}

.DogListingCard-module--dogcarddetailscontainer--833e5 {
  position: relative;
  max-width: 100%;
  padding: var(--s-1) var(--s-2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.DogListingCard-module--dogisreserved--f242d {
  position: absolute;
  inset-block-start: var(--s-1);
  inset-inline-end: var(--s-1);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: var(--c-sunshine-yellow);
  width: 95px;
  height: var(--s-2)2px;
  font-size: var(--t-body-s);
  border-radius: var(--s-2);
  font-family: var(--font-family);
}

.DogListingCard-module--dogisunderdog--20695 {
  position: absolute;
  inset-block-start: var(--s-1);
  inset-inline-end: var(--s-1);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: var(--c-oatmeal);
  width: 95px;
  height: var(--s-2)2px;
  font-size: var(--t-body-s);
  border-radius: var(--s-2);
  font-family: var(--font-family);
}

.DogListingCard-module--dognametext--be57e {
  position: relative;
  /* 88px */
  padding-inline-end: calc(var(--s-1) * 11);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
.DogListingCard-module--dognametext--be57e a {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  color: var(--c-midnight);
}

.DogListingCard-module--dogbreedtext--00794 {
  position: relative;
  font-family: var(--font-family);
  font-weight: 500;
}

.DogListingCard-module--rehomingcentretext--c6be8 {
  position: relative;
  color: var(--c-dawn);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
}

.DogListingCard-module--dogcarddetails--a06d2 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  color: var(--c-dawn);
  margin: var(--s-2) 0 var(--s-1) 0;
}

.DogListingCard-module--addinterested--cf9b3 {
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionDynamicPromotedDogs-module--spotlightdogsinner--3a52b {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-block-start: var(--s-4);
}

.SectionDynamicPromotedDogs-module--bordersection--cb296 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  background-color: var(--c-white);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
}

.SectionDynamicPromotedDogs-module--bordertop--d1ff3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
  margin-block-end: -2px;
}

.SectionDynamicPromotedDogs-module--titlewrapper--e9eb7 {
  text-align: center;
  width: 100%;
  margin: 0 var(--s-2);
}

.SectionDynamicPromotedDogs-module--title--e62e2 {
}

.SectionDynamicPromotedDogs-module--introtext--c9211 {
  text-align: center;
  width: 100%;
  padding: 0 var(--s-2);
  box-sizing: border-box;
}
.SectionDynamicPromotedDogs-module--introtext--c9211 p {
  margin-block-end: 0;
}

.SectionDynamicPromotedDogs-module--swiperwrapper--51da3 {
  position: relative;
  width: 100%;
  /* 352px */
  min-height: calc(var(--s-1) * 44);
}

.SectionDynamicPromotedDogs-module--swiper--3fca0 {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .SectionDynamicPromotedDogs-module--swiper--3fca0 {
    max-width: calc(100% - var(--s-10));
  }
}

.SectionDynamicPromotedDogs-module--curvedborder--5ab0f {
  pointer-events: none;
  padding: 0;
  margin: 0;
  position: absolute;
  inset-block-start: -18.5185185185vw px;
  inset-inline-start: 0;
  inset-block-end: calc(var(--s-1) * -1);
  z-index: var(--z-app-shell);
  overflow: hidden;
}

.SectionDynamicPromotedDogs-module--buttonwrapper--97f3b {
  position: relative;
  width: 90%;
  /* 320px */
  max-width: calc(var(--s-1) * 40);
}
@media screen and (min-width: 75rem) {
  .SectionDynamicPromotedDogs-module--buttonwrapper--97f3b {
    margin-top: var(--s-2);
  }
}

.SectionDynamicPromotedDogs-module--navbuttons--e41d7 {
  display: none;
}
@media screen and (min-width: 64rem) {
  .SectionDynamicPromotedDogs-module--navbuttons--e41d7 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    inset-block-start: 0;
  }
}
.SectionDynamicPromotedDogs-module--navbuttons--e41d7 .SectionDynamicPromotedDogs-module--back--ae228 {
  cursor: pointer;
  margin-inline-start: var(--s-1);
}
.SectionDynamicPromotedDogs-module--navbuttons--e41d7 .SectionDynamicPromotedDogs-module--next--bd651 {
  cursor: pointer;
  margin-block-start: var(--s-0-5);
  margin-inline-end: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.PromoCardNavigation-module--promocardnav--b7120 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 184px */
  height: calc(var(--s-1) * 23);
  width: 100%;
  /* 280px */
  min-width: calc(var(--s-1) * 35);
  /* 400px */
  max-width: calc(var(--s-1) * 50);
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  padding: var(--s-4);
  margin-block-end: var(--s-2);
  box-sizing: border-box;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.PromoCardNavigation-module--imagebackground--a361f {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--s-1);
  z-index: 1;
}

.PromoCardNavigation-module--imagebackgroundoverlay--ce1cc {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-black);
  opacity: 0.5;
  border-radius: var(--s-1);
  z-index: 2;
}

.PromoCardNavigation-module--cardlink--6d2d2 {
  text-align: left;
  text-decoration: none;
  text-decoration-style: none;
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
}
.PromoCardNavigation-module--cardlink--6d2d2 a {
  padding: var(--s-4);
  width: 100%;
}

.PromoCardNavigation-module--pretitle--b8933 {
  position: relative;
  color: var(--c-white);
  font-family: var(--font-family);
  text-decoration: none;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  letter-spacing: 0;
  z-index: 3;
}

.PromoCardNavigation-module--title--d2f4c {
  position: relative;
  color: var(--c-white);
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: var(--t-heading-s);
  line-height: var(--lh-heading-s);
  z-index: 3;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.QuickLinks-module--quicklinkswrapper--2ef89 {
  position: relative;
  background-color: var(--c-sandy-fur);
  border-radius: var(--s-0-5);
}
@media (min-width: 37.5rem) {
  .QuickLinks-module--quicklinkswrapper--2ef89 {
    border-bottom: 10 solid var(--c-sunshine-yellow);
  }
}
.QuickLinks-module--quicklinkswrapper--2ef89 {
  width: 100%;
  padding-block: var(--s-4);
  text-align: center;
}

.QuickLinks-module--swiperwrapper--6967e {
  position: relative;
  width: 100%;
  /* 88px */
  min-height: calc(var(--s-1) * 11);
}

.QuickLinks-module--swiper--f1fd8 {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  max-width: 64rem;
}

.QuickLinks-module--onHomePage--2af6a.QuickLinks-module--quicklinkswrapper--2ef89 {
  border: none;
  background-color: var(--c-sandy-fur);
}
@media (min-width: 37.5rem) {
  .QuickLinks-module--onHomePage--2af6a .QuickLinks-module--swiper--f1fd8 {
    max-width: calc(100% - var(--s-5));
  }
  .QuickLinks-module--onHomePage--2af6a .QuickLinks-module--swiper--f1fd8 > div:first-child {
    justify-content: center;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.PromotionCardImageSide-module--promocardleft--8a2df {
  width: 100%;
  display: grid;
  grid-template-areas: "promoimage promotext";
  grid-template-columns: 35% 65%;
  grid-template-rows: 1fr;
  overflow: hidden;
  box-shadow: var(--sh-box-card);
  border-radius: var(--s-1);
  background: var(--c-white);
}

.PromotionCardImageSide-module--promocardright--9a785 {
  width: 100%;
  display: grid;
  grid-template-areas: "promotext promoimage";
  grid-template-columns: 65% 35%;
  grid-template-rows: 1fr;
  overflow: hidden;
  box-shadow: var(--sh-box-card);
  border-radius: var(--s-1);
  background: var(--c-white);
}

.PromotionCardImageSide-module--promocardtextcontainer--797e1 {
  grid-area: promotext;
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.PromotionCardImageSide-module--promocardimagecontainer--9ab55 {
  position: relative;
  grid-area: promoimage;
  background: var(--c-sandy-fur);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.PromotionCardImageSide-module--title--5fe2e {
  font-size: var(--t-heading-m);
  line-height: var(--lh-heading-m);
}

.PromotionCardImageSide-module--promocardtext--d56d3 {
  margin-block-start: 6px;
  color: var(--c-dawn) !important;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
}

.PromotionCardImageSide-module--promocardimage--daa08 {
  position: relative;
  object-fit: contain;
  width: 90%;
  margin-block: auto;
}

.PromotionCardImageSide-module--imageborder--d1b9a {
  position: absolute;
  height: 100%;
  inset-block-start: 0;
}
.PromotionCardImageSide-module--imageborder--d1b9a.PromotionCardImageSide-module--left--45ef9 {
  inset-inline-end: -2px;
}
.PromotionCardImageSide-module--imageborder--d1b9a.PromotionCardImageSide-module--right--48873 {
  inset-inline-start: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.QuickLinksItem-module--component--43654 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding-block: var(--s-1);
  gap: var(--s-2);
}
.QuickLinksItem-module--iconwrapper--88b00 {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-outer);
  display: flex;
  justify-content: center;
  align-items: center;
}
.QuickLinksItem-module--iconwrapper--88b00 img {
  position: relative;
  height: var(--s-7);
  width: 52px;
  transition: transform 0.7s;
}
@media (min-width: 64rem) {
  .QuickLinksItem-module--iconwrapper--88b00 {
    height: 100%;
    width: 50%;
  }
}
.QuickLinksItem-module--iconwrapper--88b00:hover {
  background-color: var(--c-white);
}
.QuickLinksItem-module--iconwrapper--88b00:hover img {
  transform: scale(1.5);
}

.QuickLinksItem-module--quicklinkstitle--8088f {
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  width: 100%;
  height: 100%;
  padding-block-start: 0;
  font-weight: 500;
  padding-inline: var(--s-1);
}
.QuickLinksItem-module--quicklinkstitle--8088f {
  font-family: var(--font-family);
}

.QuickLinksItem-module--quicklinkstitlehome--96654 {
  font-weight: 700;
}

.QuickLinksItem-module--iconwrapperhome--d00b5 {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
}
.QuickLinksItem-module--iconwrapperhome--d00b5:focus {
  outline: none;
}
.QuickLinksItem-module--iconwrapperhome--d00b5 {
  background-color: var(--c-sunshine-yellow-30pc-lighter);
  min-height: var(--s-10);
  min-width: var(--s-10);
  max-height: var(--s-10);
  max-width: var(--s-10);
  display: flex;
}
.QuickLinksItem-module--iconwrapperhome--d00b5 img {
  /* 48px */
  height: calc(var(--s-1) * 6);
  width: 46px;
}
.QuickLinksItem-module--iconwrapperhome--d00b5:hover img {
  transform: scale(1.3);
}

.QuickLinksItem-module--componenthome--e98e3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--s-1);
}
@media (min-width: 64rem) {
  .QuickLinksItem-module--componenthome--e98e3 {
    flex-direction: row;
    column-gap: var(--s-1);
  }
}

@media (min-width: 64rem) {
  .QuickLinksItem-module--lastItem--5cad6 {
    padding-right: 0;
  }
}

.QuickLinksItem-module--quicklinkstitlehome--96654 {
}
@media (min-width: 64rem) {
  .QuickLinksItem-module--quicklinkstitlehome--96654 {
    text-align: left;
    margin: 0;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.PromotionCardImageTop-module--promocardwrapper--a01a9 {
  display: flex;
  width: 100%;
  max-width: 368px;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  margin-block-start: var(--s-3);
  margin-block-end: var(--s-3);
  flex-direction: column;
  align-items: center;
  padding-block-end: var(--s-3);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.PromotionCardImageTop-module--promocardwrapperdoglisting--b2606 {
  display: flex;
  width: 90%;
  max-width: 368px;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  flex-direction: column;
  align-items: center;
  padding-block-end: var(--s-3);
  overflow: hidden;
  background: var(--c-white);
}

.PromotionCardImageTop-module--promocardtextcontainer--541d7 {
  padding-block-start: var(--s-4);
  /* 88px */
  padding-block-end: calc(var(--s-1) * 11);
  padding-inline-start: 36px;
  padding-inline-end: 36px;
  position: relative;
  background: var(--c-sandy-fur);
  text-align: center;
}

.PromotionCardImageTop-module--promocardtext--d3ab6 {
  margin-block-start: 6px;
}

.PromotionCardImageTop-module--title--75a37 {
}

.PromotionCardImageTop-module--border--b4ce7 {
  position: absolute;
  inset-block-end: 0;
  inset-block-start: auto;
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: 368px;
  height: 65px;
}

.PromotionCardImageTop-module--promocardimagecontainer--13137 {
  margin: auto;
  margin-block-start: -85px;
  margin-block-end: var(--s-1);
  position: relative;
}

.PromotionCardImageTop-module--promocardimage--3a785 {
  height: auto;
  object-fit: contain;
  /* 112px */
  max-width: calc(var(--s-1) * 14);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SponsorDogPromoCardSquare-module--sponsordogpromocontainer--091c1 {
  position: relative;
  /* 464px */
  height: calc(var(--s-1) * 58);
  width: 100%;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  margin: var(--s-1) var(--s-1);
  background-color: var(--c-sunshine-yellow);
}

.SponsorDogPromoCardSquare-module--sponsordogpromocontainerdoglisting--59af7 {
  position: relative;
  width: 100%;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  background-color: var(--c-sunshine-yellow);
  padding-block-end: 15px;
}

.SponsorDogPromoCardSquare-module--label--450b7 {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: 0;
  z-index: var(--z-app-shell);
  /* 152px */
  width: calc(var(--s-1) * 19);
  height: 35px;
  display: flex;
  justify-content: flex-end;
}
.SponsorDogPromoCardSquare-module--label--450b7 img {
  transform: rotate(180deg);
  margin-inline-end: -2px;
}

.SponsorDogPromoCardSquare-module--labeltext--5cba5 {
  position: absolute;
  align-self: center;
  justify-self: center;
  margin-inline-end: var(--s-2);
  font-family: var(--font-family-heading);
}

.SponsorDogPromoCardSquare-module--image--8cdd8 {
  position: relative;
  /* 200px */
  height: calc(var(--s-1) * 25);
  width: 100%;
  overflow: hidden;
}
.SponsorDogPromoCardSquare-module--image--8cdd8 img {
  width: 100%;
  object-fit: cover;
  margin-block-start: -10%;
  transform: scale(1);
}

.SponsorDogPromoCardSquare-module--bordercontainer--de901 {
  position: absolute;
  width: 100%;
  height: auto;
  inset-block-end: 0;
}

.SponsorDogPromoCardSquare-module--border--1ef31 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-self: flex-end;
}

.SponsorDogPromoCardSquare-module--leftheart--79976 {
  position: absolute;
  inset-inline-start: var(--s-4);
  width: 45px;
  z-index: var(--z-app-shell);
  inset-block-start: 155px;
}

.SponsorDogPromoCardSquare-module--rightheart--ba69f {
  position: absolute;
  inset-inline-end: var(--s-4);
  width: 35px;
  z-index: var(--z-app-shell);
  /* 160px */
  inset-block-start: calc(var(--s-1) * 20);
}

.SponsorDogPromoCardSquare-module--text--24946 {
  width: 100%;
  padding: var(--s-1) var(--s-2);
  font-family: var(--font-family-heading);
  text-align: center;
  box-sizing: border-box;
}

.SponsorDogPromoCardSquare-module--buttonwrapper--8eece {
  width: 100%;
  display: flex;
  justify-content: center;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroRehomingListings-module--introcolumnouter--af2e3 {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-block-end: 0;
  padding-block-start: var(--s-7);
  box-sizing: border-box;
}
@media screen and (min-width: 64rem) {
  .IntroRehomingListings-module--introcolumnouter--af2e3 {
    margin-bottom: 0;
  }
}
.IntroRehomingListings-module--introcolumnouter--af2e3 {
  background-color: var(--c-sunshine-yellow);
  z-index: var(--z-app-shell);
  overflow: hidden;
}

.IntroRehomingListings-module--introcolumninner--e25b6 {
  display: flex;
  height: calc(var(--s-1) * 21);
  /* 168px */
  width: 90%;
  max-width: 90rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--c-sunshine-yellow);
  max-width: 56rem;
}

.IntroRehomingListings-module--content--8b38c {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.IntroRehomingListings-module--text--443f6 {
  width: 90%;
  align-self: left;
  margin-block-start: var(--s-6);
  margin-inline-start: auto;
  margin-inline-end: auto;
}
.IntroRehomingListings-module--text--443f6 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.IntroRehomingListings-module--title--d095a {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .IntroRehomingListings-module--title--d095a {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroOurCentres-module--introcolumnouter--42bb0 {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  overflow: hidden;
}

.IntroOurCentres-module--introcolumnoutermobile--08d14 {
}
@media screen and (min-width: 64rem) {
  .IntroOurCentres-module--introcolumnoutermobile--08d14 {
    display: none;
  }
}

.IntroOurCentres-module--introcolumnouterdesktop--c2565 {
}
@media screen and (max-width: 1023px) {
  .IntroOurCentres-module--introcolumnouterdesktop--c2565 {
    display: none;
  }
}

.IntroOurCentres-module--introcolumninner--1aa87 {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  max-width: 64rem;
}
@media screen and (min-width: 64rem) {
  .IntroOurCentres-module--introcolumninner--1aa87 {
    padding-inline: var(--s-4);
  }
}

/* TWO COLUMNS */
.IntroOurCentres-module--twocolumncontent--a9d91 {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  /* 504px */
  height: calc(var(--s-1) * 63);
}

.IntroOurCentres-module--leftcolumn--44efa {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  padding: var(--s-2) 0;
  position: relative;
  width: 50%;
  height: 100%;
  text-align: center;
  align-items: center;
}
@media screen and (min-width: 64rem) {
  .IntroOurCentres-module--leftcolumn--44efa {
    text-align: left;
  }
}
.IntroOurCentres-module--leftcolumn--44efa .IntroOurCentres-module--text--2c5b6 {
  height: calc(var(--s-1) * 28);
  /* 224px */
  align-self: center;
  margin-inline-start: auto;
  margin-inline-end: auto;
}
.IntroOurCentres-module--leftcolumn--44efa .IntroOurCentres-module--text--2c5b6 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 21px;
  line-height: var(--lh-body-l);
}

.IntroOurCentres-module--rightcolumn--29b2a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  box-sizing: border-box;
  padding: var(--s-8) 0;
  width: 50%;
  height: 100%;
}

.IntroOurCentres-module--columnscurvedborder--135c4 {
  position: absolute;
  z-index: var(--z-app-shell);
  overflow: hidden;
  width: 100%;
  inset-block-end: calc(var(--s-6) * -1);
  pointer-events: none;
}
@media screen and (min-width: 112.5rem) {
  .IntroOurCentres-module--columnscurvedborder--135c4 {
    bottom: calc(var(--s-2) * -1);
  }
}

.IntroOurCentres-module--columnscurvedborderwrapper--af0f4 {
  position: relative;
  overflow: hidden;
  max-height: 80%;
  inset-block-start: calc(var(--s-1) * -1);
}

/* TWO ROWS */
.IntroOurCentres-module--tworowcontent--7a70d {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.IntroOurCentres-module--toprow--7214d {
  position: relative;
  width: 100%;
  text-align: center;
  padding: var(--s-2);
  box-sizing: border-box;
  /* 304px */
  height: calc(var(--s-1) * 38);
}
@media screen and (min-width: 25.875rem) {
  .IntroOurCentres-module--toprow--7214d {
    /* 304px */
    height: calc(var(--s-1) * 38);
  }
}
.IntroOurCentres-module--toprow--7214d .IntroOurCentres-module--text--2c5b6 {
  height: calc(var(--s-1) * 28);
  /* 224px */
  align-self: center;
  margin-block-start: var(--s-6);
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: 90%;
}
@media screen and (min-width: 37.5rem) {
  .IntroOurCentres-module--toprow--7214d .IntroOurCentres-module--text--2c5b6 {
    max-width: 70%;
  }
}
.IntroOurCentres-module--toprow--7214d .IntroOurCentres-module--text--2c5b6 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.IntroOurCentres-module--bottomrow--8f5ec {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 352px */
  width: 100%;
  background-color: var(--c-sandy-fur);
  padding-block-end: var(--s-8);
}
@media screen and (min-width: 64rem) {
  .IntroOurCentres-module--bottomrow--8f5ec {
    padding-block-end: 0;
  }
}

.IntroOurCentres-module--rowscurvedborder--f3849 {
  padding: 0;
  margin: 0;
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: calc(var(--s-1) * -1);
  z-index: var(--z-app-shell);
  overflow: hidden;
  pointer-events: none;
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.InlineLocationFilters-module--inlinefilters--223a7 {
  position: relative;
  /* 448px */
  width: 95%;
  border-radius: var(--s-1);
  background-color: var(--c-sandy-fur);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) var(--s-4);
  margin-block-start: var(--s-4);
}
@media screen and (min-width: 37.5rem) {
  .InlineLocationFilters-module--inlinefilters--223a7 {
    /* 384px */
    height: calc(var(--s-1) * 48);
    /* 404px */
    width: calc(var(--s-1) * 50);
  }
}

.InlineLocationFilters-module--title--8ad33 {
  width: 100%;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}

.InlineLocationFilters-module--label--562aa {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  width: 100%;
}
.InlineLocationFilters-module--label--562aa > span {
  display: inline-block;
  font-family: var(--font-family);
}

form {
  width: 100%;
}

.InlineLocationFilters-module--searchinput--2f604 {
  height: var(--s-6);
  width: 100%;
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  box-sizing: border-box;
  padding-inline-end: var(--s-5);
  padding-block-end: 0;
}

.InlineLocationFilters-module--distancecontainer--32c72 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.InlineLocationFilters-module--distancecontrols--f6914 {
  max-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: none;
}

.InlineLocationFilters-module--distancerange--58cdd {
  margin-block-start: var(--s-2);
  width: 55%;
  display: none;
}
@media screen and (min-width: 25.875rem) {
  .InlineLocationFilters-module--distancerange--58cdd {
    display: block;
  }
}

input[type=range] {
  -webkit-appearance: none;
  height: 12px;
  border-radius: var(--s-1);
  width: 55%;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
}
input[type=range]:disabled {
  opacity: 0.4;
}

input[type=range]:focus {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0;
  cursor: pointer;
  background-color: var(--c-white);
  border-radius: 1.3px;
}
input[type=range]::-webkit-slider-runnable-track:disabled {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-thumb {
  border: 6px solid var(--c-midnight);
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
  -webkit-appearance: none;
  margin-block-start: -16px;
}
input[type=range]::-webkit-slider-thumb:disabled {
  opacity: 0.4;
}

_::-webkit-full-page-media,
_:future,
:root input[type=range]::-webkit-slider-thumb {
  margin-block-start: calc(var(--s-1) * -1);
}

input[type=range]::-moz-range-thumb {
  border: 6px solid var(--c-midnight);
  height: 11px;
  width: 11px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb:disabled {
  opacity: 0.4;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

.InlineLocationFilters-module--distanceselect--7cd28 {
  width: 100%;
  height: var(--s-6);
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjYgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbl9kcm9wZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTIuNjQ5NTQyNCwxNi4yODEyMzc0IEMxMi44MTYyMDg1LDE2LjI4MTIzNzQgMTIuOTYyMDQxNywxNi4yMTg3Mzc2IDEzLjA4NzA0MTQsMTYuMDkzNzM3OSBMMTcuMTE4MjgxOCwxMi4wNjI0OTc1IEMxNy4zMDU3ODEzLDExLjg3NDk5NzkgMTcuMzQ3NDQ3NywxMS42NTEwNCAxNy4yNDMyODE1LDExLjM5MDYyNDEgQzE3LjEzOTExNTIsMTEuMTMwMjA4MiAxNi45NTE2MTU3LDExIDE2LjY4MDc4MjgsMTEgTDguNjE4MzAyMDMsMTEgQzguMzQ3NDY5MTgsMTEgOC4xNTk5Njk2MywxMS4xMzAyMDgyIDguMDU1ODAzMzcsMTEuMzkwNjI0MSBDNy45NTE2MzcxMSwxMS42NTEwNCA3Ljk5MzMwMzUyLDExLjg3NDk5NzkgOC4xODA4MDMwNywxMi4wNjI0OTc1IEwxMi4yMTIwNDM1LDE2LjA5MzczNzkgQzEyLjMzNzA0MzIsMTYuMjE4NzM3NiAxMi40ODI4NzYzLDE2LjI4MTIzNzQgMTIuNjQ5NTQyNCwxNi4yODEyMzc0IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJpY29uX2Ryb3Bkb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBzdHJva2U9IiNEREREREQiIGN4PSIxMyIgY3k9IjEzIiByPSIxMiI+PC9jaXJjbGU+CiAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8dXNlIGlkPSJjYXJldC1kb3duIiBmaWxsPSIjMjIyMjIyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgPC9nPgo8L3N2Zz4=) no-repeat center right;
  background-color: var(--c-white);
  padding-inline-end: var(--s-1);
  background-origin: content-box;
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  padding-inline-start: var(--s-2);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: radio-container;
  opacity: 1;
  color: var(--c-midnight);
}
.InlineLocationFilters-module--distanceselect--7cd28:disabled {
  opacity: 0.4;
}
@media screen and (min-width: 25.875rem) {
  .InlineLocationFilters-module--distanceselect--7cd28 {
    width: 40%;
  }
}

.InlineLocationFilters-module--viewmore--38910 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.InlineLocationFilters-module--viewmore--38910:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.InlineLocationFilters-module--viewmore--38910:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.InlineLocationFilters-module--viewmore--38910:visited {
  text-decoration-style: solid;
}
.InlineLocationFilters-module--viewmore--38910 {
  color: var(--c-midnight);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  letter-spacing: 0;
  line-height: var(--lh-body-l);
  cursor: pointer;
  -webkit-text-decoration: dotted underline !important;
          text-decoration: dotted underline !important;
  text-decoration-color: var(--c-midnight);
  text-underline-position: under;
  text-underline-offset: 4px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.OurCentresMap-module--mapcontainer--d1c1a {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  background-color: var(--c-sandy-fur);
}

.OurCentresMap-module--bordersection--fe6ae {
  display: none;
}
@media screen and (min-width: 64rem) {
  .OurCentresMap-module--bordersection--fe6ae {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 100%;
    background-color: var(--c-sunshine-yellow);
    height: auto;
    max-height: calc(var(--s-1) * 75);
    /* 600px */
  }
}

.OurCentresMap-module--bordertop--764da {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  height: 100%;
}

.OurCentresMap-module--mapwrapper--330dd {
  display: flex;
  justify-content: center;
  position: relative;
  background-color: var(--c-sandy-fur);
  z-index: var(--z-app-shell);
  width: 100%;
  overflow: hidden;
  height: 80vh;
}
@media screen and (min-width: 37.5rem) {
  .OurCentresMap-module--mapwrapper--330dd {
    height: unset;
    aspect-ratio: 16/9;
    width: calc(100% - var(--s-8));
    border-radius: var(--s-2);
    box-shadow: var(--sh-box-card-hover);
  }
}

.OurCentresMap-module--cardoverlaywrapper--1908f {
  position: absolute;
  min-height: 92px;
  /* 120px */
  max-height: calc(var(--s-1) * 15);
  width: 395px;
  border: 2px solid var(--c-black);
  align-self: center;
  border-radius: var(--s-1);
  transform: scale(0.8);
  inset-block-start: var(--s-0-5);
  overflow: hidden;
}
@media screen and (min-width: 25.875rem) {
  .OurCentresMap-module--cardoverlaywrapper--1908f {
    top: var(--s-2);
    transform: scale(1);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CentreMapOverlayCard-module--centrecardcontainer--ae80f {
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 92px;
  /* 120px */
  max-height: calc(var(--s-1) * 15);
  width: 100%;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
  margin: 0;
  overflow: hidden;
}

.CentreMapOverlayCard-module--centrecardimagewrapper--4d334 {
  position: relative;
  width: 135px;
  overflow: hidden;
}

.CentreMapOverlayCard-module--centrecardimage--dccb9 {
  position: relative;
  object-fit: contain;
  height: 100%;
  background-position: center center;
}

.CentreMapOverlayCard-module--middlecontainer--b1d8e {
  position: relative;
  /* 168px */
  width: calc(var(--s-1) * 21);
  padding: var(--s-1) var(--s-2);
  box-sizing: border-box;
}
.CentreMapOverlayCard-module--middlecontainer--b1d8e .CentreMapOverlayCard-module--centrelocation--a07ad {
  position: relative;
  font-family: var(--font-family);
  font-weight: 500;
}
.CentreMapOverlayCard-module--middlecontainer--b1d8e .CentreMapOverlayCard-module--centrename--2e9b2 {
  position: relative;
  margin-block-end: var(--s-1);
}
.CentreMapOverlayCard-module--middlecontainer--b1d8e .CentreMapOverlayCard-module--centrename--2e9b2 a {
  color: var(--c-midnight);
}

.CentreMapOverlayCard-module--rightcontainer--a4eea {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 88px */
  width: calc(var(--s-1) * 11);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  color: var(--c-dawn);
}
.CentreMapOverlayCard-module--rightcontainer--a4eea .CentreMapOverlayCard-module--distance--9b9e5 {
  width: 100%;
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-black);
  font-size: var(--t-body-s);
  word-wrap: normal;
  position: relative;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroCharityShops-module--introcolumnouter--59b8e {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  overflow: hidden;
}

.IntroCharityShops-module--introcolumnoutermobile--5a6a0 {
}
@media screen and (min-width: 64rem) {
  .IntroCharityShops-module--introcolumnoutermobile--5a6a0 {
    display: none;
  }
}

.IntroCharityShops-module--introcolumnouterdesktop--bf396 {
}
@media screen and (max-width: 1023px) {
  .IntroCharityShops-module--introcolumnouterdesktop--bf396 {
    display: none;
  }
}

.IntroCharityShops-module--introcolumninner--4f834 {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: var(--c-sunshine-yellow);
  max-width: 64rem;
}
@media screen and (min-width: 64rem) {
  .IntroCharityShops-module--introcolumninner--4f834 {
    padding-inline: var(--s-4);
  }
}

/* TWO COLUMNS */
.IntroCharityShops-module--twocolumncontent--2857b {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  /* 504px */
  height: calc(var(--s-1) * 63);
}

.IntroCharityShops-module--leftcolumn--f55f0 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  padding: var(--s-2);
  position: relative;
  width: 50%;
  height: 100%;
  text-align: center;
  align-items: center;
}
@media screen and (min-width: 64rem) {
  .IntroCharityShops-module--leftcolumn--f55f0 {
    text-align: left;
  }
}
.IntroCharityShops-module--leftcolumn--f55f0 .IntroCharityShops-module--text--64906 {
  height: calc(var(--s-1) * 28);
  /* 224px */
  align-self: center;
  margin-block-start: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: 90%;
}
@media screen and (min-width: 37.5rem) {
  .IntroCharityShops-module--leftcolumn--f55f0 .IntroCharityShops-module--text--64906 {
    max-width: 70%;
  }
}
.IntroCharityShops-module--leftcolumn--f55f0 .IntroCharityShops-module--text--64906 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 21px;
  line-height: var(--lh-body-l);
}

.IntroCharityShops-module--rightcolumn--e1177 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: var(--s-8);
  width: 50%;
  height: 100%;
}

.IntroCharityShops-module--columnscurvedborder--84973 {
  position: absolute;
  z-index: var(--z-app-shell);
  overflow: hidden;
  width: 100%;
  inset-block-end: calc(var(--s-6) * -1);
  pointer-events: none;
}
@media screen and (min-width: 112.5rem) {
  .IntroCharityShops-module--columnscurvedborder--84973 {
    bottom: calc(var(--s-2) * -1);
  }
}

.IntroCharityShops-module--columnscurvedborderwrapper--9f46c {
  position: relative;
  overflow: hidden;
  max-height: 80%;
  inset-block-start: calc(var(--s-1) * -1);
}

/* TWO ROWS */
.IntroCharityShops-module--tworowcontent--bdea0 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.IntroCharityShops-module--toprow--5bbbc {
  position: relative;
  width: 100%;
  text-align: center;
  padding: var(--s-2);
  box-sizing: border-box;
  /* 304px */
  height: calc(var(--s-1) * 38);
}
@media screen and (min-width: 25.875rem) {
  .IntroCharityShops-module--toprow--5bbbc {
    /* 304px */
    height: calc(var(--s-1) * 38);
  }
}
.IntroCharityShops-module--toprow--5bbbc .IntroCharityShops-module--text--64906 {
  height: calc(var(--s-1) * 28);
  /* 224px */
  align-self: center;
  margin-block-start: var(--s-6);
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: 90%;
}
@media screen and (min-width: 37.5rem) {
  .IntroCharityShops-module--toprow--5bbbc .IntroCharityShops-module--text--64906 {
    max-width: 70%;
  }
}
.IntroCharityShops-module--toprow--5bbbc .IntroCharityShops-module--text--64906 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.IntroCharityShops-module--bottomrow--edf52 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 352px */
  min-height: calc(var(--s-1) * 44);
  width: 100%;
  background-color: var(--c-sandy-fur);
}

.IntroCharityShops-module--rowscurvedborder--1002b {
  padding: 0;
  margin: 0;
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: calc(var(--s-1) * -1);
  z-index: var(--z-app-shell);
  overflow: hidden;
  pointer-events: none;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.InlineShopLocationFilters-module--inlinefilters--2904e {
  position: relative;
  /* 448px */
  height: calc(var(--s-1) * 56);
  width: 95%;
  border-radius: var(--s-1);
  background-color: var(--c-sandy-fur);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: var(--s-2) var(--s-4);
  box-sizing: border-box;
}
@media screen and (min-width: 37.5rem) {
  .InlineShopLocationFilters-module--inlinefilters--2904e {
    /* 384px */
    height: calc(var(--s-1) * 48);
    width: 404px;
  }
}

.InlineShopLocationFilters-module--title--1b22d {
  width: 100%;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}

.InlineShopLocationFilters-module--label--3e097 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  width: 100%;
}
.InlineShopLocationFilters-module--label--3e097 > span {
  display: inline-block;
  font-family: var(--font-family);
}

form {
  width: 100%;
}

.InlineShopLocationFilters-module--searchinput--34f5c {
  height: var(--s-6);
  width: 100%;
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  box-sizing: border-box;
  padding-inline-end: var(--s-5);
  padding-block-end: 0;
}

.InlineShopLocationFilters-module--distancecontainer--1ecb8 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.InlineShopLocationFilters-module--distancecontrols--891cc {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.InlineShopLocationFilters-module--distancerange--bcd46 {
  margin-block-start: var(--s-2);
  width: 55%;
  display: none;
}
@media screen and (min-width: 25.875rem) {
  .InlineShopLocationFilters-module--distancerange--bcd46 {
    display: block;
  }
}

input[type=range] {
  -webkit-appearance: none;
  height: 12px;
  border-radius: var(--s-1);
  width: 55%;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
}
input[type=range]:disabled {
  opacity: 0.4;
}

input[type=range]:focus {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0;
  cursor: pointer;
  background-color: var(--c-white);
  border-radius: 1.3px;
}
input[type=range]::-webkit-slider-runnable-track:disabled {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-thumb {
  border: 6px solid var(--c-midnight);
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
  -webkit-appearance: none;
  margin-block-start: -16px;
}
input[type=range]::-webkit-slider-thumb:disabled {
  opacity: 0.4;
}

_::-webkit-full-page-media,
_:future,
:root input[type=range]::-webkit-slider-thumb {
  margin-block-start: calc(var(--s-1) * -1);
}

input[type=range]::-moz-range-thumb {
  border: 6px solid var(--c-midnight);
  height: 11px;
  width: 11px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb:disabled {
  opacity: 0.4;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

.InlineShopLocationFilters-module--distanceselect--32260 {
  width: 100%;
  height: var(--s-6);
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjYgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbl9kcm9wZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTIuNjQ5NTQyNCwxNi4yODEyMzc0IEMxMi44MTYyMDg1LDE2LjI4MTIzNzQgMTIuOTYyMDQxNywxNi4yMTg3Mzc2IDEzLjA4NzA0MTQsMTYuMDkzNzM3OSBMMTcuMTE4MjgxOCwxMi4wNjI0OTc1IEMxNy4zMDU3ODEzLDExLjg3NDk5NzkgMTcuMzQ3NDQ3NywxMS42NTEwNCAxNy4yNDMyODE1LDExLjM5MDYyNDEgQzE3LjEzOTExNTIsMTEuMTMwMjA4MiAxNi45NTE2MTU3LDExIDE2LjY4MDc4MjgsMTEgTDguNjE4MzAyMDMsMTEgQzguMzQ3NDY5MTgsMTEgOC4xNTk5Njk2MywxMS4xMzAyMDgyIDguMDU1ODAzMzcsMTEuMzkwNjI0MSBDNy45NTE2MzcxMSwxMS42NTEwNCA3Ljk5MzMwMzUyLDExLjg3NDk5NzkgOC4xODA4MDMwNywxMi4wNjI0OTc1IEwxMi4yMTIwNDM1LDE2LjA5MzczNzkgQzEyLjMzNzA0MzIsMTYuMjE4NzM3NiAxMi40ODI4NzYzLDE2LjI4MTIzNzQgMTIuNjQ5NTQyNCwxNi4yODEyMzc0IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJpY29uX2Ryb3Bkb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBzdHJva2U9IiNEREREREQiIGN4PSIxMyIgY3k9IjEzIiByPSIxMiI+PC9jaXJjbGU+CiAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8dXNlIGlkPSJjYXJldC1kb3duIiBmaWxsPSIjMjIyMjIyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgPC9nPgo8L3N2Zz4=) no-repeat center right;
  background-color: var(--c-white);
  padding-inline-end: var(--s-1);
  background-origin: content-box;
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  padding-inline-start: var(--s-2);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: radio-container;
  opacity: 1;
  color: var(--c-midnight);
}
.InlineShopLocationFilters-module--distanceselect--32260:disabled {
  opacity: 0.4;
  color: var(--c-dawn);
}
@media screen and (min-width: 25.875rem) {
  .InlineShopLocationFilters-module--distanceselect--32260 {
    width: 40%;
  }
}

.InlineShopLocationFilters-module--viewmore--7a8af {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.InlineShopLocationFilters-module--viewmore--7a8af:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.InlineShopLocationFilters-module--viewmore--7a8af:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.InlineShopLocationFilters-module--viewmore--7a8af:visited {
  text-decoration-style: solid;
}
.InlineShopLocationFilters-module--viewmore--7a8af {
  color: var(--c-midnight);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  letter-spacing: 0;
  line-height: var(--lh-body-l);
  cursor: pointer;
  -webkit-text-decoration: dotted underline !important;
          text-decoration: dotted underline !important;
  text-decoration-color: var(--c-midnight);
  text-underline-position: under;
  text-underline-offset: 4px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CharityShopsMap-module--mapcontainer--d615e {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  background-color: var(--c-sandy-fur);
}

.CharityShopsMap-module--bordersection--5cb3e {
  position: absolute;
  display: flex;
  width: 100%;
  background-color: var(--c-sandy-fur);
}
@media screen and (min-width: 64rem) {
  .CharityShopsMap-module--bordersection--5cb3e {
    background-color: var(--c-sunshine-yellow);
  }
}

.CharityShopsMap-module--bordertop--396b8 {
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin-block-start: calc(var(--s-1) * -1);
}

.CharityShopsMap-module--mapwrapper--db78b {
  display: flex;
  justify-content: center;
  position: relative;
  background-color: var(--c-sandy-fur);
  z-index: var(--z-app-shell);
  overflow: hidden;
  height: 80vh;
  width: 100%;
}
@media screen and (min-width: 37.5rem) {
  .CharityShopsMap-module--mapwrapper--db78b {
    height: unset;
    aspect-ratio: 16/9;
    width: calc(100% - var(--s-8));
    border-radius: var(--s-2);
    box-shadow: var(--sh-box-card-hover);
  }
}

.CharityShopsMap-module--cardoverlaywrapper--1e283 {
  position: absolute;
  min-height: 92px;
  width: 395px;
  border: 2px solid var(--c-black);
  align-self: center;
  border-radius: var(--s-1);
  transform: scale(0.8);
  inset-block-start: var(--s-0-5);
}
@media screen and (min-width: 25.875rem) {
  .CharityShopsMap-module--cardoverlaywrapper--1e283 {
    top: var(--s-2);
    transform: scale(1);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CharityShopMapOverlayCard-module--shopcardcontainer--52dd9 {
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 92px;
  width: 100%;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
  margin: 0;
  overflow: hidden;
}

.CharityShopMapOverlayCard-module--leftcontainer--cebe7 {
  position: relative;
  width: 305px;
  padding: var(--s-1) var(--s-2);
  box-sizing: border-box;
}
.CharityShopMapOverlayCard-module--leftcontainer--cebe7 .CharityShopMapOverlayCard-module--shoplocation--babbd {
  position: relative;
  font-family: var(--font-family);
  font-weight: 500;
}
.CharityShopMapOverlayCard-module--leftcontainer--cebe7 .CharityShopMapOverlayCard-module--shopname--19a13 {
  position: relative;
  margin-block-end: var(--s-1);
}
.CharityShopMapOverlayCard-module--leftcontainer--cebe7 .CharityShopMapOverlayCard-module--shopname--19a13 a {
  color: var(--c-midnight);
}

.CharityShopMapOverlayCard-module--rightcontainer--fdfef {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 88px */
  width: calc(var(--s-1) * 11);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  color: var(--c-dawn);
}
.CharityShopMapOverlayCard-module--rightcontainer--fdfef .CharityShopMapOverlayCard-module--distance--10c18 {
  width: 100%;
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-black);
  font-size: var(--t-body-s);
  word-wrap: normal;
  position: relative;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.LocationDistanceFilter-module--locationdistancefilter--c0ef2 {
  position: relative;
  /* 320px */
  height: calc(var(--s-1) * 40);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: var(--s-2) var(--s-2);
  box-sizing: border-box;
}
@media screen and (min-width: 37.5rem) {
  .LocationDistanceFilter-module--locationdistancefilter--c0ef2 {
    /* 304px */
    height: calc(var(--s-1) * 38);
    padding: var(--s-2) 0;
  }
}

.LocationDistanceFilter-module--title--5ac43 {
  width: 80%;
  align-self: flex-start;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}

.LocationDistanceFilter-module--label--5564e {
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  font-family: var(--font-family);
  font-weight: 500;
  width: 100%;
}
.LocationDistanceFilter-module--label--5564e > span {
  display: inline-block;
  font-family: var(--font-family);
}

form {
  width: 100%;
}

.LocationDistanceFilter-module--searchinput--32afc {
  height: var(--s-6);
  width: 100%;
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  box-sizing: border-box;
  padding-inline-end: var(--s-5);
  padding-block-end: 0;
}

.LocationDistanceFilter-module--distancecontainer--62590 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.LocationDistanceFilter-module--distancecontrols--67a24 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.LocationDistanceFilter-module--distancerange--f08da {
  margin-block-start: var(--s-2);
  width: 60%;
  display: none;
}
@media screen and (min-width: 25.875rem) {
  .LocationDistanceFilter-module--distancerange--f08da {
    display: block;
  }
}

input[type=range] {
  -webkit-appearance: none;
  height: 12px;
  border-radius: var(--s-1);
  width: 48%;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
}
input[type=range]:disabled {
  opacity: 0.4;
}

input[type=range]:focus {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0;
  cursor: pointer;
  background-color: var(--c-white);
  border-radius: 1.3px;
}
input[type=range]::-webkit-slider-runnable-track:disabled {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-thumb {
  border: 6px solid var(--c-midnight);
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
  -webkit-appearance: none;
  margin-block-start: -16px;
}
input[type=range]::-webkit-slider-thumb:disabled {
  opacity: 0.4;
}

_::-webkit-full-page-media,
_:future,
:root input[type=range]::-webkit-slider-thumb {
  margin-block-start: calc(var(--s-1) * -1);
}

input[type=range]::-moz-range-thumb {
  border: 6px solid var(--c-midnight);
  height: 11px;
  width: 11px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb:disabled {
  opacity: 0.4;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

.LocationDistanceFilter-module--distanceselect--dab94 {
  width: 100%;
  height: var(--s-6);
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjYgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbl9kcm9wZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTIuNjQ5NTQyNCwxNi4yODEyMzc0IEMxMi44MTYyMDg1LDE2LjI4MTIzNzQgMTIuOTYyMDQxNywxNi4yMTg3Mzc2IDEzLjA4NzA0MTQsMTYuMDkzNzM3OSBMMTcuMTE4MjgxOCwxMi4wNjI0OTc1IEMxNy4zMDU3ODEzLDExLjg3NDk5NzkgMTcuMzQ3NDQ3NywxMS42NTEwNCAxNy4yNDMyODE1LDExLjM5MDYyNDEgQzE3LjEzOTExNTIsMTEuMTMwMjA4MiAxNi45NTE2MTU3LDExIDE2LjY4MDc4MjgsMTEgTDguNjE4MzAyMDMsMTEgQzguMzQ3NDY5MTgsMTEgOC4xNTk5Njk2MywxMS4xMzAyMDgyIDguMDU1ODAzMzcsMTEuMzkwNjI0MSBDNy45NTE2MzcxMSwxMS42NTEwNCA3Ljk5MzMwMzUyLDExLjg3NDk5NzkgOC4xODA4MDMwNywxMi4wNjI0OTc1IEwxMi4yMTIwNDM1LDE2LjA5MzczNzkgQzEyLjMzNzA0MzIsMTYuMjE4NzM3NiAxMi40ODI4NzYzLDE2LjI4MTIzNzQgMTIuNjQ5NTQyNCwxNi4yODEyMzc0IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJpY29uX2Ryb3Bkb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBzdHJva2U9IiNEREREREQiIGN4PSIxMyIgY3k9IjEzIiByPSIxMiI+PC9jaXJjbGU+CiAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8dXNlIGlkPSJjYXJldC1kb3duIiBmaWxsPSIjMjIyMjIyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgPC9nPgo8L3N2Zz4=) no-repeat center right;
  background-color: var(--c-white);
  padding-inline-end: var(--s-1);
  background-origin: content-box;
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  padding-inline-start: var(--s-2);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: radio-container;
  opacity: 1;
  color: var(--c-midnight);
}
.LocationDistanceFilter-module--distanceselect--dab94:disabled {
  opacity: 0.4;
  color: var(--c-dawn);
}
@media screen and (min-width: 25.875rem) {
  .LocationDistanceFilter-module--distanceselect--dab94 {
    width: 30%;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionVolunteerVacancyFiltersList-module--volunteervacancyfilterslistouter--3d30b {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--c-sandy-fur);
  padding-block-end: var(--s-4);
}
@media screen and (min-width: 64rem) {
  .SectionVolunteerVacancyFiltersList-module--volunteervacancyfilterslistouter--3d30b {
    padding-block-end: var(--s-4);
  }
}

.SectionVolunteerVacancyFiltersList-module--volunteervacancyfilterslistinner--c1b55 {
  text-align: left;
  width: calc(100% - var(--s-2) * 2);
  height: auto;
  margin-block-start: var(--s-2);
  margin-inline-start: var(--s-2);
  margin-inline-end: var(--s-2);
}
@media screen and (min-width: 64rem) {
  .SectionVolunteerVacancyFiltersList-module--volunteervacancyfilterslistinner--c1b55 {
    width: calc(100% - var(--s-4) * 2);
    margin: 0 var(--s-4);
    padding: 0;
  }
}

.SectionVolunteerVacancyFiltersList-module--filterhead--56e88 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 var(--s-2);
}

.SectionVolunteerVacancyFiltersList-module--reset--00435 {
  position: absolute;
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.SectionVolunteerVacancyFiltersList-module--reset--00435:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionVolunteerVacancyFiltersList-module--reset--00435:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionVolunteerVacancyFiltersList-module--reset--00435:visited {
  text-decoration-style: solid;
}
.SectionVolunteerVacancyFiltersList-module--reset--00435 {
  inset-block-start: 83px;
  inset-inline-end: 29px;
}
@media (min-width: 25.875rem) {
  .SectionVolunteerVacancyFiltersList-module--reset--00435 {
    top: var(--s-8);
    inset-inline-end: var(--s-6);
  }
}

.SectionVolunteerVacancyFiltersList-module--volunteervacancyfilterslist--13ee6 {
  position: relative;
  width: 100%;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
  cursor: pointer;
  padding: var(--s-2) var(--s-1);
  box-sizing: border-box;
  border-block-end: 1px solid var(--c-mist);
  border-bottom-width: 60%;
  padding-block-end: var(--s-4);
  margin-block-end: var(--s-4);
}

.SectionVolunteerVacancyFiltersList-module--filters--a385f {
  position: relative;
  max-width: 90rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  padding-inline-start: var(--s-1);
  padding-inline-end: var(--s-1);
  box-sizing: border-box;
}
@media screen and (min-width: 25.875rem) {
  .SectionVolunteerVacancyFiltersList-module--filters--a385f {
    flex-wrap: nowrap;
    width: 100%;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
}

.SectionVolunteerVacancyFiltersList-module--filtersbutton--1b9cd {
  display: flex;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--s-1);
  padding-inline-end: var(--s-1);
  padding-inline-start: var(--s-1);
  min-width: 365px;
  /* 384px */
  max-width: calc(var(--s-1) * 48);
  height: var(--s-6);
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 600;
  box-shadow: var(--sh-box-outer);
  text-decoration: none !important;
}
.SectionVolunteerVacancyFiltersList-module--filtersbutton--1b9cd:hover {
  cursor: pointer;
}
.SectionVolunteerVacancyFiltersList-module--filtersbutton--1b9cd {
  background-color: var(--c-white);
  margin: var(--s-1);
  font-size: var(--t-body-s);
}

.SectionVolunteerVacancyFiltersList-module--allfilters--f7c8c {
  width: 100%;
  color: var(--c-black);
  /* 160px */
  min-width: calc(var(--s-1) * 20);
}
@media only screen and (min-width: 25.875rem) {
  .SectionVolunteerVacancyFiltersList-module--allfilters--f7c8c {
    width: 46%;
  }
}

.SectionVolunteerVacancyFiltersList-module--sortfilters--634c8 {
  position: relative;
  width: 100%;
  color: var(--c-black);
  /* 160px */
  min-width: calc(var(--s-1) * 20);
}
@media only screen and (min-width: 25.875rem) {
  .SectionVolunteerVacancyFiltersList-module--sortfilters--634c8 {
    width: 46%;
  }
}
.SectionVolunteerVacancyFiltersList-module--sortfilters--634c8 {
  z-index: 2;
}

.SectionVolunteerVacancyFiltersList-module--filterpanel--54750 {
  position: absolute;
  inset-block-start: var(--s-7);
  inset-inline-start: 0;
  /* 400px */
  height: calc(var(--s-1) * 50);
  width: 100%;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
  border-radius: var(--s-2);
  z-index: var(--z-app-shell);
}
@media only screen and (min-width: 37.5rem) {
  .SectionVolunteerVacancyFiltersList-module--filterpanel--54750 {
    left: 0;
    margin-inline-start: var(--s-1);
    /* 384px */
    width: calc(var(--s-1) * 48);
  }
}

.SectionVolunteerVacancyFiltersList-module--buttonwrapper--309cc {
  width: 100%;
  height: var(--s-7);
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--s-1);
  padding-inline-end: var(--s-2);
  padding-block-end: var(--s-2);
  box-sizing: border-box;
  border-block-start: 1px solid var(--c-mist);
}

.SectionVolunteerVacancyFiltersList-module--filtertabs--606bd {
  display: flex;
  position: relative;
  border-top-left-radius: var(--s-2);
  border-top-right-radius: var(--s-2);
  width: 100%;
  height: 45px;
}

.SectionVolunteerVacancyFiltersList-module--filtertableft--4249f {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-oatmeal);
  border-top-left-radius: var(--s-2);
  height: 45px;
  width: 50%;
  font-family: var(--font-family);
  cursor: pointer;
}

.SectionVolunteerVacancyFiltersList-module--filtertabright--9796c {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-oatmeal);
  border-top-right-radius: var(--s-2);
  height: 45px;
  width: 50%;
  font-family: var(--font-family);
  cursor: pointer;
}

.SectionVolunteerVacancyFiltersList-module--filteroptionscontainer--fa08d {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: var(--s-2);
  border-bottom-right-radius: var(--s-2);
  width: 100%;
  height: calc(100% - var(--s-8));
}

.SectionVolunteerVacancyFiltersList-module--filteroptions--6af65 {
  width: calc(100% - var(--s-2));
  height: 100%;
  overflow: auto;
}

.SectionVolunteerVacancyFiltersList-module--checkbox--0ed8d {
  display: flex;
  align-items: center;
}
.SectionVolunteerVacancyFiltersList-module--checkbox--0ed8d input {
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
  cursor: pointer;
}
.SectionVolunteerVacancyFiltersList-module--checkbox--0ed8d label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: var(--lh-body-xxs);
  margin-inline-start: var(--s-1);
  font-size: var(--t-body-s);
  cursor: pointer;
}

.SectionVolunteerVacancyFiltersList-module--activetab--be8aa {
  background-color: var(--c-white);
}

.SectionVolunteerVacancyFiltersList-module--something--ec73a {
  width: 100%;
}

.SectionVolunteerVacancyFiltersList-module--filterbuttons--ff127 {
  width: 100%;
}

.SectionVolunteerVacancyFiltersList-module--volunteerresults--2fe65 {
  display: grid;
  min-height: var(--s-4);
  max-height: 100%;
  width: 100%;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  grid-template-columns: 1fr;
}
@media (min-width: 46.875rem) {
  .SectionVolunteerVacancyFiltersList-module--volunteerresults--2fe65 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .SectionVolunteerVacancyFiltersList-module--volunteerresults--2fe65 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.SectionVolunteerVacancyFiltersList-module--vacancycardlink--0ec19 {
  color: var(--c-black) !important;
  font-weight: 600 !important;
}

.SectionVolunteerVacancyFiltersList-module--noresults--3b0b9 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 384px */
  max-width: calc(var(--s-1) * 48);
  height: calc(var(--s-1) * 19);
  /* 150px */
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionBreedSearchFilteredList-module--filters--f42e8 {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  margin-block-start: var(--s-4);
  padding-block-end: var(--s-4);
  border-block-end: solid 2px var(--c-oatmeal);
}
@media screen and (min-width: 32.5rem) {
  .SectionBreedSearchFilteredList-module--filters--f42e8 {
    flex-wrap: nowrap;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
}
@media screen and (min-width: 64rem) {
  .SectionBreedSearchFilteredList-module--filters--f42e8 {
    margin-block-start: var(--s-5);
    padding-block-end: var(--s-10);
  }
}

.SectionBreedSearchFilteredList-module--filtersbutton--ababd {
  display: flex;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--s-1);
  padding-inline-end: var(--s-1);
  padding-inline-start: var(--s-1);
  width: auto;
  height: var(--s-6);
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 600;
  box-shadow: var(--sh-box-outer);
  text-decoration: none !important;
}
.SectionBreedSearchFilteredList-module--filtersbutton--ababd:hover {
  cursor: pointer;
}
.SectionBreedSearchFilteredList-module--filtersbutton--ababd {
  background-color: var(--c-white);
  margin: var(--s-1) 0;
  font-size: var(--t-body-s);
}

.SectionBreedSearchFilteredList-module--allfilters--218f0 {
  width: 100%;
  color: var(--c-black);
  /* 160px */
  min-width: calc(var(--s-1) * 20);
}
@media only screen and (min-width: 32.5rem) {
  .SectionBreedSearchFilteredList-module--allfilters--218f0 {
    width: 48%;
  }
}

.SectionBreedSearchFilteredList-module--sortfilters--4397a {
  position: relative;
  width: 100%;
  color: var(--c-black);
  /* 160px */
  min-width: calc(var(--s-1) * 20);
}
@media only screen and (min-width: 32.5rem) {
  .SectionBreedSearchFilteredList-module--sortfilters--4397a {
    width: 48%;
  }
}
.SectionBreedSearchFilteredList-module--sortfilters--4397a {
  z-index: var(--z-app-shell);
}

.SectionBreedSearchFilteredList-module--results--9a16e {
  padding-block-start: var(--s-4);
  min-height: var(--s-4);
  max-height: 100%;
  gap: var(--s-4);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 37.5rem) {
  .SectionBreedSearchFilteredList-module--results--9a16e {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .SectionBreedSearchFilteredList-module--results--9a16e {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.SectionBreedSearchFilteredList-module--component--41959 {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f6f4f1;
  box-sizing: border-box;
  z-index: 3;
  pointer-events: all;
}
@media only screen and (min-width: 64rem) {
  .SectionBreedSearchFilteredList-module--component--41959 {
    /* 704px */
    width: calc(var(--s-1) * 88);
  }
}

.SectionBreedSearchFilteredList-module--componentvisible--dd51b {
  animation: SectionBreedSearchFilteredList-module--slideIn--8e1ca 0.5s forwards;
  animation-delay: 0.3s;
  -webkit-animation: SectionBreedSearchFilteredList-module--slideIn--8e1ca 0.5s forwards;
  -webkit-animation-delay: 0.3s;
}

.SectionBreedSearchFilteredList-module--componenthidden--61d86 {
  animation: SectionBreedSearchFilteredList-module--slideOut--9d32d 0.5s forwards;
  animation-delay: 0s;
  -webkit-animation: SectionBreedSearchFilteredList-module--slideOut--9d32d 0.5s forwards;
  -webkit-animation-delay: 0s;
}

.SectionBreedSearchFilteredList-module--filteroptionswrapper--0ccfa {
  position: relative;
  overflow: auto;
  height: calc(100% - var(--s-10) - var(--s-9));
  padding-block-start: var(--s-2);
}

.SectionBreedSearchFilteredList-module--filteroptions--03bc8 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  box-sizing: border-box;
  width: 95%;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.SectionBreedSearchFilteredList-module--header--b92a7 {
  position: relative;
  background-color: var(--c-white);
  min-height: var(--s-7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-inline-start: var(--s-2);
  padding-inline-end: var(--s-2);
  box-sizing: border-box;
}

.SectionBreedSearchFilteredList-module--title--f16b8 {
  height: var(--s-4);
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: 500;
}

.SectionBreedSearchFilteredList-module--headersection--240fa {
  justify-content: center;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--c-black);
}

.SectionBreedSearchFilteredList-module--closefilters--b3c28 {
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.SectionBreedSearchFilteredList-module--section--afce1 {
  position: relative;
  width: 100%;
  /* 504px */
  max-width: calc(var(--s-1) * 63);
  padding: 0 0 var(--s-2) 0;
  margin: 0 auto;
  box-sizing: border-box;
  border: 0;
}

.SectionBreedSearchFilteredList-module--sectiontitle--bbc49 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  padding: 0;
  display: block;
}

.SectionBreedSearchFilteredList-module--options--ce211 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: center;
}
@media only screen and (min-width: 25.875rem) {
  .SectionBreedSearchFilteredList-module--options--ce211 {
    justify-content: space-evenly;
  }
}
@media only screen and (min-width: 37.5rem) {
  .SectionBreedSearchFilteredList-module--options--ce211 {
    justify-content: space-between;
  }
}

.SectionBreedSearchFilteredList-module--breedoption--41fc5 {
  margin-block-start: var(--s-1);
  width: 95%;
}
@media only screen and (min-width: 25.875rem) {
  .SectionBreedSearchFilteredList-module--breedoption--41fc5 {
    width: 48%;
  }
}

.SectionBreedSearchFilteredList-module--sizeoption--8f428 {
  margin-block-start: var(--s-1);
  width: 95%;
}
@media only screen and (min-width: 25.875rem) {
  .SectionBreedSearchFilteredList-module--sizeoption--8f428 {
    width: 23%;
  }
}

.SectionBreedSearchFilteredList-module--sheddingoption--af527 {
  margin-block-start: var(--s-1);
  width: 95%;
}
@media only screen and (min-width: 37.5rem) {
  .SectionBreedSearchFilteredList-module--sheddingoption--af527 {
    width: 100%;
  }
}

.SectionBreedSearchFilteredList-module--activityoption--fb4d7 {
  margin-block-start: var(--s-1);
  width: 95%;
}
@media only screen and (min-width: 37.5rem) {
  .SectionBreedSearchFilteredList-module--activityoption--fb4d7 {
    width: auto;
  }
}

.SectionBreedSearchFilteredList-module--showresults--9beb1 {
  position: relative;
  width: 100%;
  margin: 0;
  background-color: var(--c-white);
  /* 88px */
  height: calc(var(--s-1) * 11);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: flex-end;
  margin-block-start: 0;
}

.SectionBreedSearchFilteredList-module--buttonwrapper--888e6 {
  width: 80%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CmsMapCard-module--cardcontainer--e879f {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--s-1);
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
  width: 90%;
  padding: var(--s-2);
  box-sizing: border-box;
}
@media only screen and (min-width: 37.5rem) {
  .CmsMapCard-module--cardcontainer--e879f {
    width: 333px;
  }
}
@media only screen and (min-width: 56.25rem) {
  .CmsMapCard-module--cardcontainer--e879f {
    /* 360px */
    width: calc(var(--s-1) * 45);
  }
}

.CmsMapCard-module--selected--56dec {
  border: solid 2px var(--c-sunshine-yellow);
}

.CmsMapCard-module--cardsectionbreak--87e6f {
  width: 100%;
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: 1px solid var(--c-oatmeal);
  padding: 0;
  box-sizing: border-box;
}

.CmsMapCard-module--text--33ff6 {
  justify-content: space-between;
  box-sizing: border-box;
  max-width: 100%;
}

.CmsMapCard-module--textcontainer--e3f88 {
  display: flex;
  column-gap: var(--s-2);
}

.CmsMapCard-module--title--cc2ab {
  width: 100%;
}

.CmsMapCard-module--heading--0635a {
  font-size: var(--t-body-s);
  font-family: "Work Sans";
  font-weight: 700;
  color: var(--c-black);
}

.CmsMapCard-module--subheading--b4e75 {
  font-weight: 400;
  color: #737373;
  margin-block-end: 0;
  font-size: var(--t-body-s);
}

.CmsMapCard-module--cardtext--ba53b {
  font-size: var(--t-body-s);
  font-weight: 400;
}

.CmsMapCard-module--htmltext--0e992 > p,
.CmsMapCard-module--htmltext--0e992 li {
  font-family: "Work Sans";
  font-size: var(--t-body-s);
  color: var(--c-black);
}

.CmsMapCard-module--nomargin--efb15 {
  margin-block-end: 0;
}

.CmsMapCard-module--buttonscontainer--c40e6 {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  align-items: flex-end;
  height: 100%;
  margin-block-start: var(--s-1);
}

.CmsMapCard-module--iconWrapper--c0377 {
  position: absolute;
  inset-block-start: 15px;
  inset-inline-end: 15px;
  cursor: pointer;
  border: 0;
  background: none;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.InlineCmsMapLocationFilters-module--inlinefilters--ed7a6 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: var(--s-2);
  box-sizing: border-box;
}
@media screen and (min-width: 64rem) {
  .InlineCmsMapLocationFilters-module--inlinefilters--ed7a6 {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
@media screen and (min-width: 75rem) {
  .InlineCmsMapLocationFilters-module--inlinefilters--ed7a6 {
    padding: var(--s-2) 0;
  }
}

.InlineCmsMapLocationFilters-module--title--c6fa3 {
  width: 100%;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}

.InlineCmsMapLocationFilters-module--label--fd92e {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  width: 100%;
}
.InlineCmsMapLocationFilters-module--label--fd92e > span {
  display: inline-block;
  font-family: var(--font-family);
}

form {
  width: 100%;
}

.InlineCmsMapLocationFilters-module--postcodesearchform--1105d {
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .InlineCmsMapLocationFilters-module--postcodesearchform--1105d {
    /* 360px */
    width: calc(var(--s-1) * 45);
    margin-inline-end: var(--s-5);
  }
}

.InlineCmsMapLocationFilters-module--searchinput--4a0de {
  height: var(--s-6);
  width: 100%;
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  box-sizing: border-box;
  padding-inline-end: var(--s-5);
  padding-block-end: 0;
}

.InlineCmsMapLocationFilters-module--distancecontainer--a8f7b {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-block-start: var(--s-4);
}
@media screen and (min-width: 64rem) {
  .InlineCmsMapLocationFilters-module--distancecontainer--a8f7b {
    /* 360px */
    width: calc(var(--s-1) * 45);
    margin-block-start: 0;
  }
}

.InlineCmsMapLocationFilters-module--distancecontrols--16f0a {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.InlineCmsMapLocationFilters-module--distancerange--435ea {
  margin-block-start: var(--s-2);
  width: 55%;
  display: none;
}
@media screen and (min-width: 25.875rem) {
  .InlineCmsMapLocationFilters-module--distancerange--435ea {
    display: block;
  }
}

input[type=range] {
  -webkit-appearance: none;
  height: 12px;
  border-radius: var(--s-1);
  width: 55%;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
}
input[type=range]:disabled {
  opacity: 0.4;
}

input[type=range]:focus {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0;
  cursor: pointer;
  background-color: var(--c-white);
  border-radius: 1.3px;
}
input[type=range]::-webkit-slider-runnable-track:disabled {
  background-color: var(--c-white);
}

input[type=range]::-webkit-slider-thumb {
  border: 6px solid var(--c-midnight);
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
  -webkit-appearance: none;
  margin-block-start: -16px;
}
input[type=range]::-webkit-slider-thumb:disabled {
  opacity: 0.4;
}

_::-webkit-full-page-media,
_:future,
:root input[type=range]::-webkit-slider-thumb {
  margin-block-start: calc(var(--s-1) * -1);
}

input[type=range]::-moz-range-thumb {
  border: 6px solid var(--c-midnight);
  height: 11px;
  width: 11px;
  border-radius: 11px;
  background: var(--c-sunshine-yellow);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb:disabled {
  opacity: 0.4;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

.InlineCmsMapLocationFilters-module--distanceselect--c13d9 {
  width: 100%;
  height: var(--s-6);
  border-radius: var(--s-0-5);
  border: 0;
  box-shadow: var(--sh-box-card);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjYgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbl9kcm9wZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTIuNjQ5NTQyNCwxNi4yODEyMzc0IEMxMi44MTYyMDg1LDE2LjI4MTIzNzQgMTIuOTYyMDQxNywxNi4yMTg3Mzc2IDEzLjA4NzA0MTQsMTYuMDkzNzM3OSBMMTcuMTE4MjgxOCwxMi4wNjI0OTc1IEMxNy4zMDU3ODEzLDExLjg3NDk5NzkgMTcuMzQ3NDQ3NywxMS42NTEwNCAxNy4yNDMyODE1LDExLjM5MDYyNDEgQzE3LjEzOTExNTIsMTEuMTMwMjA4MiAxNi45NTE2MTU3LDExIDE2LjY4MDc4MjgsMTEgTDguNjE4MzAyMDMsMTEgQzguMzQ3NDY5MTgsMTEgOC4xNTk5Njk2MywxMS4xMzAyMDgyIDguMDU1ODAzMzcsMTEuMzkwNjI0MSBDNy45NTE2MzcxMSwxMS42NTEwNCA3Ljk5MzMwMzUyLDExLjg3NDk5NzkgOC4xODA4MDMwNywxMi4wNjI0OTc1IEwxMi4yMTIwNDM1LDE2LjA5MzczNzkgQzEyLjMzNzA0MzIsMTYuMjE4NzM3NiAxMi40ODI4NzYzLDE2LjI4MTIzNzQgMTIuNjQ5NTQyNCwxNi4yODEyMzc0IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJpY29uX2Ryb3Bkb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBzdHJva2U9IiNEREREREQiIGN4PSIxMyIgY3k9IjEzIiByPSIxMiI+PC9jaXJjbGU+CiAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgIDwvbWFzaz4KICAgICAgICA8dXNlIGlkPSJjYXJldC1kb3duIiBmaWxsPSIjMjIyMjIyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgPC9nPgo8L3N2Zz4=) no-repeat center right;
  background-color: var(--c-white);
  padding-inline-end: var(--s-1);
  background-origin: content-box;
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  padding-inline-start: var(--s-2);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: radio-container;
  opacity: 1;
  color: var(--c-midnight);
}
.InlineCmsMapLocationFilters-module--distanceselect--c13d9:disabled {
  opacity: 0.4;
  color: var(--c-dawn);
}
@media screen and (min-width: 25.875rem) {
  .InlineCmsMapLocationFilters-module--distanceselect--c13d9 {
    width: 40%;
  }
}

.InlineCmsMapLocationFilters-module--btncontainer--252ea {
  width: 100%;
  flex-basis: 100%;
  margin-block-start: var(--s-4);
}
@media screen and (min-width: 64rem) {
  .InlineCmsMapLocationFilters-module--btncontainer--252ea {
    margin-block-start: var(--s-5);
  }
}

.InlineCmsMapLocationFilters-module--viewmore--ed715 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.InlineCmsMapLocationFilters-module--viewmore--ed715:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.InlineCmsMapLocationFilters-module--viewmore--ed715:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.InlineCmsMapLocationFilters-module--viewmore--ed715:visited {
  text-decoration-style: solid;
}
.InlineCmsMapLocationFilters-module--viewmore--ed715 {
  color: var(--c-midnight);
  font-family: var(--font-family);
  font-size: var(--t-body-l);
  letter-spacing: 0;
  line-height: var(--lh-body-l);
  cursor: pointer;
  -webkit-text-decoration: dotted underline !important;
          text-decoration: dotted underline !important;
  text-decoration-color: var(--c-midnight);
  text-underline-position: under;
  text-underline-offset: 4px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CmsMap-module--mapcontainer--a4663 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 37.5rem) {
  .CmsMap-module--mapcontainer--a4663 {
    padding-inline-start: var(--s-2);
    padding-inline-end: var(--s-2);
    width: auto;
  }
}
@media screen and (min-width: 75rem) {
  .CmsMap-module--mapcontainer--a4663 {
    padding-left: 0;
    padding-inline-end: 0;
    width: 100%;
  }
}

.CmsMap-module--mapwrapper--eaad4 {
  display: flex;
  justify-content: center;
  position: relative;
  background-color: var(--c-sandy-fur);
  z-index: var(--z-app-shell);
  width: 100%;
  overflow: hidden;
  /* 344px */
  height: calc(var(--s-1) * 43);
}
@media screen and (min-width: 37.5rem) {
  .CmsMap-module--mapwrapper--eaad4 {
    border-radius: var(--s-2);
    box-shadow: var(--sh-box-card-hover);
    /* 400px */
    height: calc(var(--s-1) * 50);
  }
}
@media screen and (min-width: 64rem) {
  .CmsMap-module--mapwrapper--eaad4 {
    /* 608px */
    height: calc(var(--s-1) * 76);
  }
}

.CmsMap-module--cardoverlaywrapper--bc3b7 {
  position: absolute;
  min-height: 92px;
  width: 249px;
  border: 2px solid var(--c-black);
  align-self: center;
  border-radius: var(--s-1);
  inset-block-start: var(--s-0-5);
}
@media screen and (min-width: 25.875rem) {
  .CmsMap-module--cardoverlaywrapper--bc3b7 {
    top: var(--s-2);
  }
}
@media screen and (min-width: 37.5rem) {
  .CmsMap-module--cardoverlaywrapper--bc3b7 {
    width: 281px;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CmsMapOverlayCard-module--cardcontainer--78118 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 92px;
  width: 100%;
  background-color: var(--c-white);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
  border-radius: var(--s-1);
  margin: 0;
  overflow: hidden;
  padding: var(--s-2);
  box-sizing: border-box;
}
@media only screen and (min-width: 37.5rem) {
  .CmsMapOverlayCard-module--cardcontainer--78118 {
    padding: var(--s-4);
  }
}

.CmsMapOverlayCard-module--closeicon--6f087 {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
  z-index: var(--z-app-shell);
}

.CmsMapOverlayCard-module--location--23463 {
  position: relative;
  font-weight: 400;
  color: #737373;
  font-size: var(--t-body-s);
  margin: 0;
}

.CmsMapOverlayCard-module--title--b3350 {
  position: relative;
  margin-block-start: 0;
  margin-block-end: var(--s-1);
  font-family: var(--font-family-heading);
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.CmsMapOverlayCard-module--cardsectionbreak--f5153 {
  width: 100%;
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: 1px solid var(--c-oatmeal);
  padding: 0;
  box-sizing: border-box;
}
.withSkipMap-module--hiddenButton--b0680 {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
}
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}

/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionSADFiltersList-module--sponsordogfilterstopouter--ad4fd {
  display: flex;
  justify-content: center;
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--c-sunshine-yellow);
}
@media screen and (min-width: 64rem) {
  .SectionSADFiltersList-module--sponsordogfilterstopouter--ad4fd {
    padding-block-end: var(--s-4);
  }
}

.SectionSADFiltersList-module--sponsordogfilterstopinner--18948 {
  text-align: left;
  width: 100%;
  height: auto;
  margin-inline-start: var(--s-2);
  margin-inline-end: var(--s-2);
  max-width: 56rem;
}
@media screen and (min-width: 64rem) {
  .SectionSADFiltersList-module--sponsordogfilterstopinner--18948 {
    margin: 0 var(--s-4);
    padding: 0;
  }
}

.SectionSADFiltersList-module--sponsordogfiltersbottomouter--c77e8 {
  position: relative;
  display: flex;
  justify-content: center;
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--c-sandy-fur);
  padding-block-end: var(--s-4);
}
@media screen and (min-width: 64rem) {
  .SectionSADFiltersList-module--sponsordogfiltersbottomouter--c77e8 {
    padding-block-end: var(--s-4);
  }
}

.SectionSADFiltersList-module--sponsordogfiltersbottominner--ea9c2 {
  position: relative;
  text-align: left;
  width: 100%;
  height: auto;
  margin-block-start: var(--s-2);
  margin-inline: var(--s-2);
  max-width: 56.25rem;
}
@media screen and (min-width: 64rem) {
  .SectionSADFiltersList-module--sponsordogfiltersbottominner--ea9c2 {
    padding: 0;
    margin-inline: 0;
  }
}

.SectionSADFiltersList-module--bordersection--92a5c {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  background-color: var(--c-sunshine-yellow);
  max-height: calc(var(--s-1) * 75);
  /* 600px */
  max-width: 90rem;
}

.SectionSADFiltersList-module--bordertop--7c0ee {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  height: 100%;
  margin-block-end: -2px;
}

.SectionSADFiltersList-module--filterhead--beca7 {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  margin: 0 var(--s-4);
  padding: var(--s-2);
  box-sizing: border-box;
}

.SectionSADFiltersList-module--filterheadcontrols--508bf {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  /* 744px */
  max-width: 56rem;
  margin: 0 var(--s-2);
}

.SectionSADFiltersList-module--title--67c59 {
}

.SectionSADFiltersList-module--sponsordogfilterslist--bf863 {
  position: relative;
  width: 100%;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  cursor: pointer;
  background-color: var(--c-sunshine-yellow);
}

.SectionSADFiltersList-module--locationdistancefilter--f9c4c {
  height: calc(var(--s-1) * 25);
  padding: 0;
}

.SectionSADFiltersList-module--reset--79089 {
  position: absolute;
  z-index: 1;
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.SectionSADFiltersList-module--reset--79089:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionSADFiltersList-module--reset--79089:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionSADFiltersList-module--reset--79089:visited {
  text-decoration-style: solid;
}
.SectionSADFiltersList-module--reset--79089 {
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
}
@media screen and (min-width: 64rem) {
  .SectionSADFiltersList-module--reset--79089 {
    inset-inline-end: var(--s-6);
  }
}

.SectionSADFiltersList-module--label--f16db {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  width: 100%;
}
.SectionSADFiltersList-module--label--f16db > span {
  display: inline-block;
  font-family: var(--font-family);
}

.SectionSADFiltersList-module--filteroption--2554f {
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--s-2);
}
@media screen and (min-width: 64rem) {
  .SectionSADFiltersList-module--filteroption--2554f {
    width: 50%;
  }
}

.SectionSADFiltersList-module--filters--0dbbc {
  position: relative;
  max-width: 90rem;
  padding-inline: var(--s-2);
  width: 100%;
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 37.5rem) {
  .SectionSADFiltersList-module--filters--0dbbc {
    grid-template-columns: 1fr 1fr;
    padding-inline: 0;
  }
}
.SectionSADFiltersList-module--filters--0dbbc {
  background-color: var(--c-sunshine-yellow);
  z-index: var(--z-toast);
}

.SectionSADFiltersList-module--filtersbutton--6290c {
  display: flex;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--s-1);
  padding-inline: var(--s-1);
  width: 100%;
  height: var(--s-6);
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 600;
  box-shadow: var(--sh-box-outer);
  text-decoration: none !important;
}
.SectionSADFiltersList-module--filtersbutton--6290c:hover {
  cursor: pointer;
}
.SectionSADFiltersList-module--filtersbutton--6290c {
  background-color: var(--c-white);
  font-size: var(--t-body-s);
}

.SectionSADFiltersList-module--allfilters--dbb48 {
  width: 100%;
  color: var(--c-black);
}

.SectionSADFiltersList-module--filteroverlay--99d5b {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  width: 100%;
  height: 100%;
  cursor: default;
}

.SectionSADFiltersList-module--sortfilters--7df9a {
  position: relative;
  width: 100%;
  color: var(--c-black);
}

.SectionSADFiltersList-module--filterpanel--34d62 {
  position: absolute;
  inset-block-start: var(--s-7);
  inset-inline-start: 0;
  width: 100%;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-card);
  border-radius: var(--s-2);
}
@media only screen and (min-width: 37.5rem) {
  .SectionSADFiltersList-module--filterpanel--34d62 {
    left: 0;
    margin-inline-start: var(--s-1);
    /* 384px */
    width: calc(var(--s-1) * 48);
  }
}

.SectionSADFiltersList-module--buttonwrapper--fa43b {
  width: 100%;
  height: var(--s-7);
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--s-1);
  padding-inline-end: var(--s-2);
  padding-block-end: var(--s-2);
  box-sizing: border-box;
  border-block-start: 1px solid var(--c-mist);
}

.SectionSADFiltersList-module--filterpanelcontents--4c75a {
  position: relative;
}

.SectionSADFiltersList-module--canlivewith--57da3 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.SectionSADFiltersList-module--canlivewithcheckbox--36df9 {
  display: flex;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  margin-block-start: var(--s-1);
  margin-inline-start: var(--s-2);
  background-color: var(--c-sunshine-yellow);
  max-width: 70%;
}
.SectionSADFiltersList-module--canlivewithcheckbox--36df9 input {
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
  cursor: pointer;
}
.SectionSADFiltersList-module--canlivewithcheckbox--36df9 label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: var(--lh-body-xxs);
  margin-inline-start: var(--s-1);
  font-size: var(--t-body-s);
  cursor: pointer;
}

.SectionSADFiltersList-module--filteroptionscontainer--6455e {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: var(--s-2);
  border-bottom-right-radius: var(--s-2);
  width: 100%;
  height: calc(100% - 45px);
}

.SectionSADFiltersList-module--filteroptions--001fd {
  width: calc(100% - var(--s-2));
  height: 90%;
  overflow: auto;
}

.SectionSADFiltersList-module--checkbox--c99f5 {
  display: flex;
  align-items: center;
}
.SectionSADFiltersList-module--checkbox--c99f5 input {
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
  cursor: pointer;
}
.SectionSADFiltersList-module--checkbox--c99f5 label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: var(--lh-body-xxs);
  margin-block-end: 0;
  margin-inline-start: var(--s-1);
  font-size: var(--t-body-s);
  cursor: pointer;
}

.SectionSADFiltersList-module--sponsordogresults--81cef {
  display: grid;
  min-height: var(--s-4);
  max-height: 100%;
  width: 100%;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  grid-template-columns: 1fr;
}
@media (min-width: 46.875rem) {
  .SectionSADFiltersList-module--sponsordogresults--81cef {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .SectionSADFiltersList-module--sponsordogresults--81cef {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.SectionSADFiltersList-module--noresults--a850c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 384px */
  max-width: calc(var(--s-1) * 48);
  height: calc(var(--s-1) * 19);
  /* 150px */
}

.SectionSADFiltersList-module--title--67c59 {
  width: 100%;
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}

.SectionSADFiltersList-module--label--f16db {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  width: 100%;
}
.SectionSADFiltersList-module--label--f16db > span {
  display: inline-block;
  font-family: var(--font-family);
}

form {
  width: 100%;
}

.SectionSADFiltersList-module--checklabel--e2067 {
  margin-inline-start: var(--s-2);
  margin-block-end: 0;
  width: auto;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroRehomingCentre-module--bottomsection--06781 {
  width: 100%;
  height: auto;
  padding-block-start: var(--s-8);
  background-color: var(--c-sandy-fur);
}

.IntroRehomingCentre-module--headingsection--745df {
  position: relative;
  display: flex;
  flex-direction: row;
  margin: var(--s-4) var(--s-2) 0;
  box-sizing: border-box;
  max-width: 64rem;
}
@media screen and (min-width: 75rem) {
  .IntroRehomingCentre-module--headingsection--745df {
    padding: var(--s-4) var(--s-2);
    margin-left: auto;
    margin-inline-end: auto;
  }
}
.IntroRehomingCentre-module--headingsection--745df .IntroRehomingCentre-module--text--faf52 {
  height: 100%;
  width: 100%;
}
@media screen and (min-width: 37.5rem) {
  .IntroRehomingCentre-module--headingsection--745df .IntroRehomingCentre-module--text--faf52 {
    max-width: 78%;
  }
}
.IntroRehomingCentre-module--headingsection--745df .IntroRehomingCentre-module--text--faf52 .IntroRehomingCentre-module--location--cecbb {
  margin-block-start: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionCmsMap-module--title--97e03 {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
  margin-block-end: var(--s-3);
  padding-inline-start: var(--s-2);
  padding-inline-end: var(--s-2);
}
@media (min-width: 64rem) {
  .SectionCmsMap-module--title--97e03 {
    font-size: var(--t-heading-xl);
    line-height: var(--s-5);
  }
}
@media screen and (min-width: 75rem) {
  .SectionCmsMap-module--title--97e03 {
    padding: 0;
  }
}

.SectionCmsMap-module--map--94c69 {
  position: relative;
  margin-block-end: var(--s-5);
  margin-block-start: var(--s-3);
  margin-inline-start: -8px;
  margin-inline-end: -8px;
}
@media only screen and (min-width: 37.5rem) {
  .SectionCmsMap-module--map--94c69 {
    margin-left: 0;
    margin-inline-end: 0;
  }
}
@media only screen and (min-width: 64rem) {
  .SectionCmsMap-module--map--94c69 {
    margin-block-end: var(--s-10);
    margin-block-start: var(--s-8);
  }
}

.SectionCmsMap-module--listcontainer--f01e5 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  min-height: var(--s-4);
  max-height: 100%;
  width: 100%;
  row-gap: var(--s-5);
}
@media only screen and (min-width: 64rem) {
  .SectionCmsMap-module--listcontainer--f01e5 {
    column-gap: calc((100% - 1036px) / 6);
  }
}
@media only screen and (min-width: 75rem) {
  .SectionCmsMap-module--listcontainer--f01e5 {
    column-gap: calc((100% - 1036px) / 3);
  }
}

.SectionCmsMap-module--pagination--4445d {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-block-start: var(--s-5);
  padding-block-end: var(--s-3);
}
@media only screen and (min-width: 37.5rem) {
  .SectionCmsMap-module--pagination--4445d {
    padding-block-end: var(--s-1);
  }
}
@media only screen and (min-width: 64rem) {
  .SectionCmsMap-module--pagination--4445d {
    padding-block-start: var(--s-10);
    padding-block-end: var(--s-4);
  }
}

.SectionCmsMap-module--previouspage--503e3 {
  margin-inline-end: var(--s-6);
}
@media only screen and (min-width: 64rem) {
  .SectionCmsMap-module--previouspage--503e3 {
    margin-inline-end: var(--s-7);
  }
}
.SectionCmsMap-module--previouspage--503e3:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.SectionCmsMap-module--nextpage--efa25 {
  margin-inline-start: var(--s-6);
}
@media only screen and (min-width: 64rem) {
  .SectionCmsMap-module--nextpage--efa25 {
    margin-inline-start: var(--s-7);
  }
}
.SectionCmsMap-module--nextpage--efa25:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.SectionCmsMap-module--page--4d2d9 {
  font-family: var(--font-family-heading);
  font-size: var(--s-3);
  font-weight: 700;
  line-height: var(--lh-body-l);
  color: var(--c-black);
  margin-inline-end: 12px;
  margin-inline-start: 12px;
}
@media only screen and (min-width: 64rem) {
  .SectionCmsMap-module--page--4d2d9 {
    font-size: var(--t-heading-xl);
    line-height: var(--s-5);
    margin-inline-end: var(--s-2);
    margin-inline-start: var(--s-2);
  }
  .SectionCmsMap-module--page--4d2d9.SectionCmsMap-module--currentpage--6a9cd {
    width: var(--s-6);
    height: var(--s-6);
  }
}
.SectionCmsMap-module--page--4d2d9:disabled {
  cursor: not-allowed;
}
.SectionCmsMap-module--page--4d2d9.SectionCmsMap-module--currentpage--6a9cd {
  background-color: var(--c-sunshine-yellow);
  border-radius: 50%;
  width: var(--s-5);
  height: var(--s-5);
}

.SectionCmsMap-module--hidden--b9d79 {
  display: none;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionContactDetails-module--innerwrapper--70d4e {
  width: 100%;
}

.SectionContactDetails-module--heading--260b9 {
  width: 100%;
}

.SectionContactDetails-module--title--624f0 {
}

.SectionContactDetails-module--detailswrapper--203f8 {
  display: grid;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  margin-block: var(--s-4);
}
@media (min-width: 37.5rem) {
  .SectionContactDetails-module--detailswrapper--203f8 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .SectionContactDetails-module--detailswrapper--203f8 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.SectionContactDetails-module--detailsection--5a2dc {
  height: auto;
  margin-inline-end: var(--s-1);
  background-color: var(--c-white);
  border-radius: var(--s-2);
  padding: var(--s-2);
}
@media (min-width: 64rem) {
  .SectionContactDetails-module--detailsection--5a2dc {
    padding: var(--s-4);
  }
}

.SectionContactDetails-module--detailstitle--c393b {
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.SectionContactDetails-module--detail--8309c {
  position: relative;
  margin-block-start: var(--s-2);
  padding-inline-start: 37px;
}
.SectionContactDetails-module--detail--8309c .SectionContactDetails-module--icon--7ef2b {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}
.SectionContactDetails-module--detail--8309c .SectionContactDetails-module--address--47e21 address {
  font-style: normal;
  margin-block-end: var(--s-0-5);
  font-family: var(--font-family);
  font-weight: 500;
}
.SectionContactDetails-module--detail--8309c .SectionContactDetails-module--link--e8b0e p {
  display: inline-block;
}
.SectionContactDetails-module--detail--8309c a {
  font-weight: 600;
}

.SectionContactDetails-module--openingtimes--4145c {
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-dawn);
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
}

.SectionContactDetails-module--buttoncontainer--3da98 {
  width: 100%;
}
@media (min-width: 37.5rem) {
  .SectionContactDetails-module--buttoncontainer--3da98 {
    width: 50%;
    margin: 0 auto;
  }
}
.SectionContactDetails-module--buttoncontainer--3da98 a {
  margin: var(--s-1) 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionContactForm-module--innerwrapper--65456 {
  width: 100%;
  height: auto;
}

.SectionContactForm-module--titlewrapper--d1a3e {
  width: 100%;
  padding-block-start: var(--s-4);
}

.SectionContactForm-module--title--b20fd {
}

.SectionContactForm-module--introtext--3f8f3 {
  width: 100%;
  box-sizing: border-box;
}

.SectionContactForm-module--formcontainer--69d09 {
  background: var(--c-sandy-fur);
  border-radius: var(--s-1);
  margin: var(--s-4) 0;
  padding-block-start: var(--s-4);
  padding-block-end: var(--s-4);
  padding-inline-start: var(--s-3);
  padding-inline-end: var(--s-3);
}

.SectionContactForm-module--contactform--0d2a8 {
  width: 100%;
}
.SectionContactForm-module--contactform--0d2a8 .SectionContactForm-module--inputtextarea--0c43f {
  width: 100%;
  padding: 0;
  margin-block-end: var(--s-2);
  background-color: transparent;
}
.SectionContactForm-module--contactform--0d2a8 .SectionContactForm-module--inputtextarea--0c43f textarea {
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--c-dawn);
  color: var(--c-midnight);
}
.SectionContactForm-module--contactform--0d2a8 .SectionContactForm-module--inputtextarea--0c43f textarea::placeholder {
  color: var(--c-dawn);
}

.SectionContactForm-module--textinputlabel--a705f {
  margin-block-end: var(--s-1);
  display: block;
  font-weight: 600;
}

.SectionContactForm-module--input--50539 {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--sh-box-1);
  border: 1px solid var(--c-dawn);
  color: var(--c-midnight);
  margin-block-end: var(--s-2);
  padding-inline-start: 15px;
}
.SectionContactForm-module--input--50539::placeholder {
  color: var(--c-dawn);
}

.SectionContactForm-module--select--7cc82 {
  margin-block-end: var(--s-2);
  border-radius: 6px;
  border: 1px solid var(--c-dawn);
  color: var(--c-midnight);
  box-shadow: var(--sh-box-1);
}
.SectionContactForm-module--select--7cc82 > div {
  min-height: var(--s-6);
  border: 0;
  background: none;
}
.SectionContactForm-module--select--7cc82 > div > div > div {
  color: var(--c-dawn);
  padding-inline-start: 5px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionDogSearchSuggestions-module--dogsearchsuggestionsinner--230ed {
  width: 100%;
  /* 464px */
  min-height: calc(var(--s-1) * 58);
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-items: center;
}
@media screen and (min-width: 46.875rem) {
  .SectionDogSearchSuggestions-module--dogsearchsuggestionsinner--230ed {
    flex-direction: row;
  }
}

.SectionDogSearchSuggestions-module--dogfiltercontainer--24bc7 {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 46.875rem) {
  .SectionDogSearchSuggestions-module--dogfiltercontainer--24bc7 {
    width: 50%;
  }
}
@media screen and (min-width: 64rem) {
  .SectionDogSearchSuggestions-module--dogfiltercontainer--24bc7 {
    width: 40%;
  }
}
@media screen and (min-width: 75rem) {
  .SectionDogSearchSuggestions-module--dogfiltercontainer--24bc7 {
    width: 30%;
  }
}

.SectionDogSearchSuggestions-module--dogresultscontainer--1570f {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 46.875rem) {
  .SectionDogSearchSuggestions-module--dogresultscontainer--1570f {
    width: 50%;
  }
}
@media screen and (min-width: 64rem) {
  .SectionDogSearchSuggestions-module--dogresultscontainer--1570f {
    width: 60%;
  }
}
@media screen and (min-width: 75rem) {
  .SectionDogSearchSuggestions-module--dogresultscontainer--1570f {
    width: 70%;
  }
}

.SectionDogSearchSuggestions-module--swiperwrapper--ead0e {
  position: relative;
  width: 100%;
  /* 352px */
  min-height: calc(var(--s-1) * 44);
}

.SectionDogSearchSuggestions-module--swiper--754b6 {
  box-sizing: border-box;
  /* 352px */
  min-height: calc(var(--s-1) * 44);
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .SectionDogSearchSuggestions-module--swiper--754b6 {
    max-width: calc(100% - var(--s-10));
  }
}

.SectionDogSearchSuggestions-module--buttonwrapper--6f2fd {
  position: relative;
  width: 90%;
  /* 320px */
  max-width: calc(var(--s-1) * 40);
  margin-block-end: var(--s-6);
}
@media screen and (min-width: 37.5rem) {
  .SectionDogSearchSuggestions-module--buttonwrapper--6f2fd {
    margin-block-end: 57px;
  }
}
@media screen and (min-width: 75rem) {
  .SectionDogSearchSuggestions-module--buttonwrapper--6f2fd {
    margin-top: var(--s-2);
    /* 88px */
    margin-block-end: calc(var(--s-1) * 11);
  }
}

.SectionDogSearchSuggestions-module--navbuttons--c9c66 {
  position: absolute;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  inset-block-start: 0;
  pointer-events: none;
}

.SectionDogSearchSuggestions-module--back--0860c {
  border: 0;
  background-color: transparent;
  cursor: pointer;
  margin-inline-start: 0;
  z-index: 2;
  pointer-events: all;
}

.SectionDogSearchSuggestions-module--next--08080 {
  border: 0;
  background-color: transparent;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-block-start: var(--s-0-5);
  margin-inline-end: 0;
  z-index: 2;
  pointer-events: all;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionUnderdogPromotedDogs-module--spotlightdogsinner--0d103 {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-block-start: var(--s-4);
}

.SectionUnderdogPromotedDogs-module--bordersection--0086e {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  background-color: var(--c-white);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
}

.SectionUnderdogPromotedDogs-module--bordertop--b3990 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
  margin-block-end: -2px;
}

.SectionUnderdogPromotedDogs-module--titlewrapper--ac389 {
  text-align: center;
  width: 100%;
  margin: 0 var(--s-2);
}

.SectionUnderdogPromotedDogs-module--title--3e167 {
}

.SectionUnderdogPromotedDogs-module--introtext--85167 {
  text-align: center;
  width: 100%;
  padding: 0 var(--s-2);
  box-sizing: border-box;
}
.SectionUnderdogPromotedDogs-module--introtext--85167 p {
  margin-block-end: 0;
}

.SectionUnderdogPromotedDogs-module--swiperwrapper--8d560 {
  position: relative;
  width: 100%;
  /* 352px */
  min-height: calc(var(--s-1) * 44);
}

.SectionUnderdogPromotedDogs-module--swiper--713c2 {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .SectionUnderdogPromotedDogs-module--swiper--713c2 {
    max-width: calc(100% - var(--s-10));
  }
}

.SectionUnderdogPromotedDogs-module--curvedborder--62ac3 {
  pointer-events: none;
  padding: 0;
  margin: 0;
  position: absolute;
  inset-block-start: -18.5185185185vw px;
  inset-inline-start: 0;
  inset-block-end: calc(var(--s-1) * -1);
  z-index: var(--z-app-shell);
  overflow: hidden;
}

.SectionUnderdogPromotedDogs-module--buttonwrapper--c89e1 {
  position: relative;
  width: 90%;
  /* 320px */
  max-width: calc(var(--s-1) * 40);
}
@media screen and (min-width: 75rem) {
  .SectionUnderdogPromotedDogs-module--buttonwrapper--c89e1 {
    margin-top: var(--s-2);
  }
}

.SectionUnderdogPromotedDogs-module--navbuttons--95615 {
  display: none;
}
@media screen and (min-width: 64rem) {
  .SectionUnderdogPromotedDogs-module--navbuttons--95615 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    inset-block-start: 0;
  }
}
.SectionUnderdogPromotedDogs-module--navbuttons--95615 .SectionUnderdogPromotedDogs-module--back--ba9ef {
  cursor: pointer;
  margin-inline-start: var(--s-1);
}
.SectionUnderdogPromotedDogs-module--navbuttons--95615 .SectionUnderdogPromotedDogs-module--next--c89f0 {
  cursor: pointer;
  margin-block-start: var(--s-0-5);
  margin-inline-end: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionLargeFeaturedPromo-module--largefeaturedpromo--660f4 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
}
@media screen and (min-width: 40.625rem) {
  .SectionLargeFeaturedPromo-module--largefeaturedpromo--660f4 {
    max-width: 85%;
    flex-direction: row;
    align-items: center;
  }
}

.SectionLargeFeaturedPromo-module--title--f7b76 {
  font-size: var(--t-heading-l);
  line-height: var(--lh-heading-l);
}
@media (min-width: 64rem) {
  .SectionLargeFeaturedPromo-module--title--f7b76 {
    font-size: var(--t-heading-xl);
    line-height: var(--lh-heading-xl);
  }
}
.SectionLargeFeaturedPromo-module--title--f7b76 span {
  display: block;
  font-family: var(--font-family-heading);
  font-size: var(--t-heading-m);
  line-height: var(--lh-heading-m);
}
@media (min-width: 64rem) {
  .SectionLargeFeaturedPromo-module--title--f7b76 span {
    font-size: var(--t-heading-l);
    line-height: var(--lh-heading-l);
  }
}
.SectionLargeFeaturedPromo-module--title--f7b76 span.SectionLargeFeaturedPromo-module--highlight--9738a {
  font-family: var(--font-family-heading);
  font-weight: var(--fw-bold);
  color: var(--c-sunshine-yellow);
  /* 48px */
  font-size: calc(var(--s-1) * 6);
  line-height: var(--s-8);
  margin-block-start: 15px;
  margin-block-end: 15px;
}
@media (min-width: 64rem) {
  .SectionLargeFeaturedPromo-module--title--f7b76 span.SectionLargeFeaturedPromo-module--highlight--9738a {
    /* 72px */
    font-size: var(--t-heading-xxl);
    line-height: var(--lh-heading-xxl);
  }
}

.SectionLargeFeaturedPromo-module--imagecontainer--54bf8 {
  width: calc(100% - var(--s-2));
  margin-inline-start: -8px;
  margin-inline-end: -8px;
  /* 48px */
  margin-block-end: calc(var(--s-1) * 6);
}
@media screen and (min-width: 37.5rem) {
  .SectionLargeFeaturedPromo-module--imagecontainer--54bf8 {
    margin-inline-start: -16px;
    margin-inline-end: -16px;
    width: calc(100% - var(--s-4));
  }
}
@media screen and (min-width: 40.625rem) {
  .SectionLargeFeaturedPromo-module--imagecontainer--54bf8 {
    width: 50%;
    margin-inline-end: 0;
    margin-block-end: 0;
  }
}
@media screen and (min-width: 64rem) {
  .SectionLargeFeaturedPromo-module--imagecontainer--54bf8 {
    width: 75%;
  }
}
.SectionLargeFeaturedPromo-module--imagecontainer--54bf8 img {
  height: auto;
  width: 100%;
}
.SectionLargeFeaturedPromo-module--imagecontainer--54bf8 img.SectionLargeFeaturedPromo-module--styledimage--920f1 {
  object-fit: cover;
  height: 481px;
  width: 100%;
  object-position: right;
}
@media screen and (min-width: 25.875rem) {
  .SectionLargeFeaturedPromo-module--imagecontainer--54bf8 img.SectionLargeFeaturedPromo-module--styledimage--920f1 {
    width: 75%;
  }
}
@media screen and (min-width: 40.625rem) {
  .SectionLargeFeaturedPromo-module--imagecontainer--54bf8 img.SectionLargeFeaturedPromo-module--styledimage--920f1 {
    width: 100%;
  }
}
@media screen and (min-width: 64rem) {
  .SectionLargeFeaturedPromo-module--imagecontainer--54bf8 img.SectionLargeFeaturedPromo-module--styledimage--920f1 {
    height: 678px;
  }
}

.SectionLargeFeaturedPromo-module--content--38ac8 {
  max-width: 299px;
  margin: 0 auto;
  padding-block-end: var(--s-4);
}
@media screen and (min-width: 64rem) {
  .SectionLargeFeaturedPromo-module--content--38ac8 {
    max-width: 424px;
    margin: 0;
  }
}
.SectionLargeFeaturedPromo-module--content--38ac8 .SectionLargeFeaturedPromo-module--buttoncontainer--b3627 {
  display: flex;
  column-gap: var(--s-4);
  margin-block-start: var(--s-4);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionOurStoriesCarouselByTopic-module--sectionheader--9fafb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-block-end: var(--s-7);
}
@media screen and (min-width: 40.625rem) {
  .SectionOurStoriesCarouselByTopic-module--sectionheader--9fafb {
    flex-direction: row;
  }
}

.SectionOurStoriesCarouselByTopic-module--title--39ffe {
  order: 2;
  word-break: break-all;
}
@media screen and (min-width: 40.625rem) {
  .SectionOurStoriesCarouselByTopic-module--title--39ffe {
    order: 1;
  }
}

.SectionOurStoriesCarouselByTopic-module--dogimage--54f1d {
  order: 1;
  margin-block-end: var(--s-4);
  height: auto;
  /* 272px */
  width: calc(var(--s-1) * 34);
}
@media screen and (min-width: 40.625rem) {
  .SectionOurStoriesCarouselByTopic-module--dogimage--54f1d {
    order: 2;
    margin-block-end: 0;
    margin-inline-start: 15px;
    width: 266px;
  }
}
@media screen and (min-width: 64rem) {
  .SectionOurStoriesCarouselByTopic-module--dogimage--54f1d {
    width: 387px;
  }
}

.SectionOurStoriesCarouselByTopic-module--swiperwrapper--1592e {
  position: relative;
  width: 100%;
}

.SectionOurStoriesCarouselByTopic-module--swiper--d8902 {
  max-width: 100%;
  box-sizing: border-box;
}

.SectionOurStoriesCarouselByTopic-module--pagination--7f725 {
  width: 100%;
  display: flex;
  justify-content: center;
  height: var(--s-10);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionOurStoriesListByTopic-module--title--69427 {
  margin-block-end: var(--s-2);
  word-break: break-all;
}

.SectionOurStoriesListByTopic-module--paginationbreak--ea207 {
  width: 100%;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  padding-block-start: var(--s-4);
  padding-block-end: var(--s-1);
  box-sizing: border-box;
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-block-end: var(--bb-section-break);
  text-align: center;
  font-weight: 600;
}

.SectionOurStoriesListByTopic-module--viewmorewrapper--d45e8 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  /* 144px */
  height: calc(var(--s-1) * 18);
  padding: var(--s-2) 0;
}

.SectionOurStoriesListByTopic-module--viewmoretext--14c3b {
  position: relative;
  font-family: var(--font-family);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
  font-weight: 500;
}

.SectionOurStoriesListByTopic-module--loadingbar--f8f48 {
  display: flex;
  justify-self: left;
  border-block-end: 3px solid var(--c-oatmeal-40);
  width: var(--s-common-element-width-m);
}

.SectionOurStoriesListByTopic-module--loadingbarfiller--64d9b {
  border-block-end: 3px solid var(--c-dawn);
  margin-block-end: -3px;
}

.SectionOurStoriesListByTopic-module--loadingoverlay--f2111 {
  pointer-events: none;
  height: var(--s-9);
  width: 100%;
  position: absolute;
  z-index: var(--s-0-5);
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  margin-block-start: calc(var(--s-5) * -1);
}
.SectionOurStoriesListByTopic-module--loadingoverlay--f2111 .SectionOurStoriesListByTopic-module--loadingicon--fde01 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: var(--s-0-5);
  box-sizing: border-box;
  overflow: visible;
  transform: scale(0.6);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionSearchSite-module--sitesearchinner--8918b {
  z-index: var(--z-toast);
  width: 100%;
}

.SectionSearchSite-module--searchinputwrapper--e3add {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  margin: 0;
  margin-inline-start: var(--s-4);
  max-width: calc(100% - var(--s-6));
}
@media screen and (min-width: 40.625rem) {
  .SectionSearchSite-module--searchinputwrapper--e3add {
    flex-direction: row;
    /* 632px */
    max-width: calc(var(--s-1) * 79);
  }
}
@media screen and (min-width: 64rem) {
  .SectionSearchSite-module--searchinputwrapper--e3add {
    max-width: none;
    margin-inline-start: var(--s-2);
  }
}

.SectionSearchSite-module--search--05ba2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  /* 448px */
  max-width: calc(var(--s-1) * 56);
  /* 104px */
  height: calc(var(--s-1) * 13);
  order: 2;
}
@media screen and (min-width: 40.625rem) {
  .SectionSearchSite-module--search--05ba2 {
    order: 1;
  }
}

.SectionSearchSite-module--title--d7640 {
}

.SectionSearchSite-module--searchinput--deef8 {
  border: 0;
  box-shadow: var(--sh-box-card);
  border-radius: var(--s-1);
  padding-inline-start: var(--s-2);
}
.SectionSearchSite-module--searchinput--deef8::placeholder {
  color: var(--c-dawn);
}

.SectionSearchSite-module--dogimage--d8ca2 {
  order: 1;
  margin-block-end: var(--s-4);
  height: auto;
  /* 272px */
  width: calc(var(--s-1) * 34);
}
@media screen and (min-width: 40.625rem) {
  .SectionSearchSite-module--dogimage--d8ca2 {
    order: 2;
    margin-block-end: 0;
    margin-inline-start: 15px;
    width: 266px;
  }
}
@media screen and (min-width: 64rem) {
  .SectionSearchSite-module--dogimage--d8ca2 {
    width: 387px;
  }
}
.YouTubeLite-module--youtubewrapper--9f0a2 {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: var(--c-midnight);
  padding-block-start: 56.25%;
}

.YouTubeLite-module--youtubeiframe--36eac {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.YouTubeLite-module--youtubeplayer--53960 {
  width: 68px;
  height: 48px;
  /* Youtube red */
  background-color: #FF0000;
  border-radius: 12px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: auto;
  inset-block-start: calc(50% - 20px);
  inset-inline-start: calc(50% - var(--s-5));
}
.YouTubeLite-module--youtubeplayer--53960:before {
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent white;
  margin-left: 5px;
}
.YouTubeLite-module--youtubeplayer--53960 {
  /* Hide the accessibility text on the play button */
}
.YouTubeLite-module--youtubeplayer--53960 span {
  visibility: hidden;
  inline-size: 0;
}

.YouTubeLite-module--youtubeactivated--bfbc1 {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.IntroHomepageComponent-module--sombreTheme--a4a3b {
  background: var(--c-midnight) !important;
  color: var(--c-white) !important;
}

.IntroHomepageComponent-module--fuzzyborder--6bc19 {
  margin-block-end: calc(var(--s-1) * -1);
  background-color: var(--c-sunshine-yellow);
}

.IntroHomepageComponent-module--youtubecontainer--aa348 {
  position: relative !important;
  padding-block-start: 56.25%;
  /* 720 / 1280 = 0.5625 */
  /* 400px */
  max-height: calc(var(--s-1) * 50);
  background-color: var(--c-sunshine-yellow);
}
@media screen and (min-width: 64rem) {
  .IntroHomepageComponent-module--youtubecontainer--aa348 {
    border-radius: var(--s-1);
  }
}

.IntroHomepageComponent-module--youtubecontainer--aa348 iframe {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.IntroHomepageComponent-module--herowithimagecontainerouter--1b44b {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  /* Not sure this is used? */
  z-index: var(--z-app-shell);
  overflow: hidden;
}

.IntroHomepageComponent-module--widget--bdc5d {
  width: 100%;
  margin: var(--s-4) 0;
  padding: var(--s-2);
  box-sizing: border-box;
}
@media screen and (min-width: 46.875rem) {
  .IntroHomepageComponent-module--widget--bdc5d {
    width: 50%;
    margin: 0;
  }
}
@media screen and (min-width: 64rem) {
  .IntroHomepageComponent-module--widget--bdc5d {
    width: 100%;
    margin: var(--s-4) 0 var(--s-2) 0;
  }
}

.IntroHomepageComponent-module--widgetouterprimary--fef52 {
  background-color: var(--c-sunshine-yellow);
  margin: var(--s-4) 0;
  width: 100%;
  padding: var(--s-2);
  box-sizing: border-box;
  border-radius: var(--s-2);
}
@media screen and (min-width: 46.875rem) {
  .IntroHomepageComponent-module--widgetouterprimary--fef52 {
    width: 50%;
    margin: 0;
  }
}
@media screen and (min-width: 64rem) {
  .IntroHomepageComponent-module--widgetouterprimary--fef52 {
    width: 100%;
    margin: var(--s-4) 0 var(--s-2) 0;
  }
}

.IntroHomepageComponent-module--widgetouteralternative--cf929 {
  background-color: var(--c-sandy-fur);
}

.IntroHomepageComponent-module--widgetouterlight--35cda {
  background-color: var(--c-white);
}

.IntroHomepageComponent-module--widgetouterdark--614fc {
  background-color: var(--c-black);
}

.IntroHomepageComponent-module--cta--f8add {
  display: inline-block !important;
}

.IntroHomepageComponent-module--mobile--61436 {
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .IntroHomepageComponent-module--mobile--61436 {
    display: none;
  }
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--herowithimagecontainer--f7128 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 248px */
  min-height: calc(var(--s-1) * 31);
}
@media screen and (min-width: 37.5rem) {
  .IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--herowithimagecontainer--f7128 {
    /* 320px */
    min-height: calc(var(--s-1) * 40);
  }
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--herowithimagecontainer--f7128 img {
  width: 100%;
  height: auto;
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--herowithvideocontainer--aec88 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 248px */
  min-height: calc(var(--s-1) * 31);
  padding-block-end: var(--s-4);
}
@media screen and (min-width: 37.5rem) {
  .IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--herowithvideocontainer--aec88 {
    /* 320px */
    min-height: calc(var(--s-1) * 40);
  }
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--herowithvideocontainer--aec88 {
  /* To remove padding on 'lite-embed' element */
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--herowithvideocontainer--aec88 > div {
  padding-block-end: unset !important;
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--bordersection--580bf {
  position: absolute;
  width: 100%;
  height: auto;
  inset-block-end: -2px;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--border--990c7 {
  position: relative;
  min-width: 100%;
  /* Not sure this is used? */
  z-index: var(--z-app-shell);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: 0;
  margin-block-end: -2px;
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--introcontent--6bdea {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 46.875rem) {
  .IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--introcontent--6bdea {
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
    padding-block-end: var(--s-4);
  }
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--introcontentjusttext--b59c2 {
  width: 90%;
  padding-block-end: var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 46.875rem) {
  .IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--introcontentjusttext--b59c2 {
    flex-direction: column;
    justify-content: center;
  }
}
@media screen and (min-width: 46.875rem) {
  .IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--introcontentjusttext--b59c2 .IntroHomepageComponent-module--textcontainer--edd80 {
    width: 100%;
  }
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--textcontainer--edd80 {
  width: 100%;
}
@media screen and (min-width: 46.875rem) {
  .IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--textcontainer--edd80 {
    width: 50%;
  }
}
.IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--linkscontainer--3c2fb {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding-block-end: var(--s-4);
  padding-block-start: var(--s-4);
  gap: 3px;
}
@media screen and (min-width: 46.875rem) {
  .IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--linkscontainer--3c2fb {
    gap: 0;
    width: 50%;
    padding: 0;
    flex-wrap: wrap;
  }
  .IntroHomepageComponent-module--mobile--61436 .IntroHomepageComponent-module--linkscontainer--3c2fb > div {
    flex: 1 1 50%;
  }
}

.IntroHomepageComponent-module--desktop--aba4e {
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .IntroHomepageComponent-module--desktop--aba4e {
    display: none;
  }
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--herowithimagecontainerinner--4f94a {
  display: flex;
  width: 100%;
  max-width: 90rem;
  margin-block-end: var(--s-4);
  gap: var(--s-2);
}
@media screen and (min-width: 56rem) {
  .IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--herowithimagecontainerinner--4f94a {
    gap: var(--s-8);
  }
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--herowithimagecontainer--f7128 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  max-width: calc(var(--s-1) * 75);
  /* 600px */
  height: 417px;
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--herowithimagecontainer--f7128 img {
  height: 417px;
  width: calc(var(--s-1) * 75);
  /* 600px */
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--herowithvideocontainer--aec88 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--c-sunshine-yellow);
  /* 320px */
  min-height: calc(var(--s-1) * 40);
  max-width: 56.25rem;
  padding-block-start: var(--s-5);
  padding-inline-start: var(--s-4);
  /* To remove padding on 'lite-embed' element */
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--herowithvideocontainer--aec88 > div {
  padding-block-end: unset !important;
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--bordersection--580bf {
  /* 600px */
  width: calc(var(--s-1) * 75);
  position: absolute;
  inset-block-end: -1px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--border--990c7 {
  position: relative;
  min-width: 100%;
  /* Not sure this is used? */
  z-index: var(--z-app-shell);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  inset-block-end: 0;
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--introcontent--6bdea,
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--introcontentjusttext--b59c2 {
  width: 90%;
  /* 600px */
  max-width: calc(var(--s-1) * 75);
  margin-inline-end: var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--textcontainer--edd80 {
  width: 100%;
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--textcontainer--edd80 h1 {
  margin-block-start: var(--s-4);
}
.IntroHomepageComponent-module--desktop--aba4e .IntroHomepageComponent-module--linkscontainer--3c2fb {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding-block-start: var(--s-4);
}

.IntroHomepageComponent-module--embeddedquicklinkitem--61081 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* 104px */
  width: calc(var(--s-1) * 13);
}
@media screen and (min-width: 46.875rem) {
  .IntroHomepageComponent-module--embeddedquicklinkitem--61081 {
    width: 108px;
  }
}

.IntroHomepageComponent-module--iconwrapper--fd1ed {
  position: relative;
  height: 65px;
  width: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}
@media screen and (min-width: 46.875rem) {
  .IntroHomepageComponent-module--iconwrapper--fd1ed {
    height: var(--s-10);
    width: var(--s-10);
  }
}
.IntroHomepageComponent-module--iconwrapper--fd1ed img {
  position: relative;
  height: 100%;
  width: 100%;
  transition: transform 0.7s;
}
.IntroHomepageComponent-module--iconwrapper--fd1ed:hover img {
  transform: scale(1.2);
}

.IntroHomepageComponent-module--quicklinkstitle--e6da6 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: calc(var(--s-1) * 1.75);
  line-height: var(--lh-body-xxs);
  padding-block-start: 0;
  color: var(--c-black);
  max-width: 108px;
  margin: var(--s-2) 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionCentrePromotedDogs-module--spotlightdogsinner--b60c8 {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-block-start: var(--s-4);
}

.SectionCentrePromotedDogs-module--bordersection--4f920 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  background-color: var(--c-white);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
}

.SectionCentrePromotedDogs-module--bordertop--cc9f2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
  margin-block-end: -2px;
}

.SectionCentrePromotedDogs-module--titlewrapper--0bdc9 {
  text-align: start;
  width: 100%;
  padding: 0 var(--s-2);
  max-width: var(--s-max-content-width);
}

.SectionCentrePromotedDogs-module--showalldogs--a58ad {
  position: relative;
  max-width: calc(100% - var(--s-6));
}
@media (min-width: 37.5rem) {
  .SectionCentrePromotedDogs-module--showalldogs--a58ad {
    max-width: calc(var(--s-10) * 3.5);
  }
}
.SectionCentrePromotedDogs-module--showalldogs--a58ad {
  margin-inline: auto;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionDogBio-module--dogbioinner--96312 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: var(--c-sandy-fur);
  padding-block-start: var(--s-6);
}
@media screen and (min-width: 37.5rem) {
  .SectionDogBio-module--dogbioinner--96312 {
    padding-block-start: 0;
  }
}

.SectionDogBio-module--dogbioinnerireland--64e29 {
  gap: var(--s-4);
}

.SectionDogBio-module--headingsection--d5529 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--s-2) 0;
  padding: var(--s-1) 0;
  box-sizing: border-box;
  gap: var(--s-2);
}
@media screen and (min-width: 37.5rem) {
  .SectionDogBio-module--headingsection--d5529 {
    /* 120px */
    margin: var(--s-1);
    padding: var(--s-1);
  }
}

.SectionDogBio-module--headingsectionwithlabel--799e3 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--s-4) 0 var(--s-1) 0;
  padding: var(--s-1) 0;
  box-sizing: border-box;
  gap: var(--s-2);
}
@media screen and (min-width: 37.5rem) {
  .SectionDogBio-module--headingsectionwithlabel--799e3 {
    /* 120px */
    margin: var(--s-1);
    padding: var(--s-1);
  }
}

.SectionDogBio-module--text--f8750 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: var(--s-2);
}

.SectionDogBio-module--favourite--35149 {
  inset-block-start: calc(var(--s-4) * -1);
  inset-inline-end: var(--s-2);
  position: absolute;
  width: var(--s-10);
  height: var(--s-10);
}

.SectionDogBio-module--dogisunderdog--f1de1 {
  position: relative;
  inset-inline-start: 0;
  display: flex;
  column-gap: var(--s-1);
  justify-content: space-evenly;
  align-items: center;
  background-color: var(--c-sunshine-yellow);
  min-width: max(fit-content, var(--s-10));
  max-width: max-content;
  height: var(--s-3);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-s);
  padding-block: var(--s-1);
  padding-inline: var(--s-2);
  border-radius: var(--s-2);
  font-family: var(--font-family);
}

.SectionDogBio-module--tagicon--6c63f {
  min-width: 14px;
  min-height: 14px;
}

.SectionDogBio-module--dogisreserved--8ffd6 {
}

.SectionDogBio-module--contentsection--da0a3 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.SectionDogBio-module--firstsection--abe67 {
  position: relative;
  width: 100%;
}
@media (min-width: 64rem) {
  .SectionDogBio-module--firstsection--abe67 {
    max-width: 100%;
    margin: 0;
    margin-inline-end: var(--s-4);
  }
}

.SectionDogBio-module--secondsection--f2bb7 {
  position: relative;
  width: 30%;
  display: none;
}
@media (min-width: 64rem) {
  .SectionDogBio-module--secondsection--f2bb7 {
    max-width: 30%;
    display: flex;
  }
}

.SectionDogBio-module--bordersection--119ae {
  position: absolute;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  background-color: var(--c-sandy-fur);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
  pointer-events: none;
}
.SectionDogBio-module--bordersection--119ae .SectionDogBio-module--borderbottom--c6352 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-block-start: calc(var(--s-1) * -1);
  min-width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
}

.SectionDogBio-module--dogbiofields--c2f61 {
  width: 100%;
  align-items: center;
}

.SectionDogBio-module--dogbiofieldsfirst--f84e6 {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.SectionDogBio-module--dogbiofieldsfirst--f84e6 .SectionDogBio-module--dogbiofieldcontainer--644f4 {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
  min-height: 68px;
  border-radius: var(--s-1);
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
}
@media (min-width: 37.5rem) {
  .SectionDogBio-module--dogbiofieldsfirst--f84e6 .SectionDogBio-module--dogbiofieldcontainer--644f4 {
    width: 49%;
  }
}

.SectionDogBio-module--dogbiofieldssecond--876bf {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.SectionDogBio-module--dogbiofieldssecond--876bf .SectionDogBio-module--dogbiofieldcontainer--644f4 {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: var(--s-1) 0;
  min-height: var(--s-8);
  width: 100%;
  border-radius: var(--s-1);
  background-color: rgba(255, 255, 255, 0.5);
}

.SectionDogBio-module--icon--83a56 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-width: var(--s-8);
}

.SectionDogBio-module--textarea--a6c21 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.SectionDogBio-module--sizeguide--42a98 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  align-self: right;
  height: 100%;
  font-family: var(--font-family);
  font-weight: bold;
  text-decoration: underline;
  text-underline-position: under;
  text-underline-offset: 4px;
  cursor: pointer;
}

.SectionDogBio-module--sizeguidecontent--eda2b {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: auto;
  align-self: flex-end;
  margin-inline-end: var(--s-2);
  /* 120px */
  width: calc(var(--s-1) * 15);
}
.SectionDogBio-module--sizeguidecontent--eda2b > svg {
  margin-inline-start: var(--s-1);
}

.SectionDogBio-module--title--db51c {
  height: 50%;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  padding-block-start: var(--s-1);
}
@media (min-width: 64rem) {
  .SectionDogBio-module--title--db51c {
    padding-block-start: 0;
  }
}

.SectionDogBio-module--value--ee0fa {
  height: 50%;
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-dawn);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xs);
}
@media (min-width: 25.875rem) {
  .SectionDogBio-module--value--ee0fa {
    line-height: var(--lh-body-s);
  }
}
.SectionDogBio-module--value--ee0fa {
  padding-block-end: var(--s-2);
}
@media (min-width: 64rem) {
  .SectionDogBio-module--value--ee0fa {
    padding-block-end: 0;
  }
}
.SectionDogBio-module--value--ee0fa a {
  color: var(--c-dawn);
  text-decoration: underline !important;
  text-decoration-style: dotted !important;
  text-underline-offset: 5px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionCentreVolunteerRoles-module--centrevolunteeringrolesouter--9b466 {
  background-color: var(--c-sandy-fur);
  position: relative;
  display: flex;
  height: auto;
  padding-block-start: var(--s-1);
  padding-block-end: var(--s-1);
}
@media (min-width: 37.5rem) {
  .SectionCentreVolunteerRoles-module--centrevolunteeringrolesouter--9b466 {
    padding-block-start: var(--s-4);
    padding-block-end: var(--s-4);
  }
}
@media (min-width: 75rem) {
  .SectionCentreVolunteerRoles-module--centrevolunteeringrolesouter--9b466 {
    padding-block-start: var(--s-6);
    padding-block-end: var(--s-6);
  }
}

.SectionCentreVolunteerRoles-module--centrevolunteeringrolesinner--7556a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: start;
}

.SectionCentreVolunteerRoles-module--titlewrapper--37bdb {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.SectionCentreVolunteerRoles-module--title--ece61 {
  font-size: var(--t-heading-s);
  line-height: var(--lh-heading-s);
}
@media (min-width: 37.5rem) {
  .SectionCentreVolunteerRoles-module--title--ece61 {
    font-size: var(--t-heading-l);
    line-height: var(--lh-heading-l);
  }
}
.SectionCentreVolunteerRoles-module--title--ece61 {
  text-align: start;
}

.SectionCentreVolunteerRoles-module--introtext--e40a6 {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: start;
}
@media (min-width: 64rem) {
  .SectionCentreVolunteerRoles-module--introtext--e40a6 {
    width: 100%;
  }
}

.SectionCentreVolunteerRoles-module--volunteeringresultscontainer--74bff {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--s-4) 0;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--s-2);
}
@media (min-width: 37.5rem) {
  .SectionCentreVolunteerRoles-module--volunteeringresultscontainer--74bff {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .SectionCentreVolunteerRoles-module--volunteeringresultscontainer--74bff {
    grid-template-columns: repeat(3, 1fr);
  }
}

.SectionCentreVolunteerRoles-module--volunteeringresultscontainershowmore--590ce {
  padding-block-end: var(--s-4);
  box-sizing: border-box;
}

.SectionCentreVolunteerRoles-module--ctacontainer--f2cd9 {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-block: var(--s-2);
}
@media (min-width: 37.5rem) {
  .SectionCentreVolunteerRoles-module--ctacontainer--f2cd9 :first-child {
    width: fit-content !important;
  }
}

.SectionCentreVolunteerRoles-module--showmorecontainer--b014e {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  inset-block-end: var(--s-2);
  z-index: 2;
}

.SectionCentreVolunteerRoles-module--showmoretext--27ea6 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.SectionCentreVolunteerRoles-module--showmoretext--27ea6:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionCentreVolunteerRoles-module--showmoretext--27ea6:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionCentreVolunteerRoles-module--showmoretext--27ea6:visited {
  text-decoration-style: solid;
}

.SectionCentreVolunteerRoles-module--gradient--94568 {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  /* 160px */
  height: calc(var(--s-1) * 20);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--c-sandy-fur) 70%);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.VolunteerVacancySimpleCard-module--volunteervacancycard--3b153 {
  width: 100%;
  border-radius: var(--s-2);
  box-shadow: var(--sh-box-card);
  background-color: var(--c-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-0-5) var(--s-1);
  text-decoration: none;
}

.VolunteerVacancySimpleCard-module--volunteervacancycardtext--84275 {
  height: 100%;
  width: calc(100% - var(--s-10));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-2);
}

.VolunteerVacancySimpleCard-module--volunteervacancydate--a141c {
  width: 100%;
}
.VolunteerVacancySimpleCard-module--volunteervacancydate--a141c p {
  padding: 0;
  margin: var(--s-1) 0;
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-dawn);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-s);
}
.VolunteerVacancySimpleCard-module--volunteervacancytitle--29277 {
  width: 100%;
  color: inherit;
  font-family: var(--font-family-heading);
  margin: 0;
}

.VolunteerVacancySimpleCard-module--volunteervacancylink--ed76a {
  /* 80px */
  max-width: calc(var(--s-1) * 10);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline-end: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionSteppedProcess-module--steppedprocess--ad86f {
  position: relative;
}
.SectionSteppedProcess-module--steppedprocess--ad86f *::selection {
  background-color: var(--c-sunshine-yellow);
}

.SectionSteppedProcess-module--title--72f52 {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  text-align: left;
}

.SectionSteppedProcess-module--introtext--6fdd7 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
  width: 100%;
}
@media screen and (min-width: 37.5rem) {
  .SectionSteppedProcess-module--introtext--6fdd7 {
    justify-content: flex-start;
    text-align: left;
  }
}
@media screen and (min-width: 64rem) {
  .SectionSteppedProcess-module--introtext--6fdd7 {
    margin: 0;
  }
}

.SectionSteppedProcess-module--stepwrapper--7e9c5 {
  width: 100%;
  padding: var(--s-1) var(--s-1);
  padding-inline-start: 0;
  box-sizing: border-box;
}
@media screen and (min-width: 37.5rem) {
  .SectionSteppedProcess-module--stepwrapper--7e9c5 {
    padding: var(--s-1) 0;
  }
}

.SectionSteppedProcess-module--step--0aa70 {
  position: relative;
  max-width: 100%;
  min-height: var(--s-7);
  display: flex;
  flex-direction: row;
}

.SectionSteppedProcess-module--stepordering--9d05c {
  position: absolute;
  /* 48px */
  width: calc(var(--s-1) * 6);
  height: 100%;
}
@media screen and (min-width: 37.5rem) {
  .SectionSteppedProcess-module--stepordering--9d05c {
    /* 88px */
    width: calc(var(--s-1) * 11);
  }
}

.SectionSteppedProcess-module--stepcontent--64681 {
  border-block-end: 1px solid var(--c-mist);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--s-1) 0;
  box-sizing: border-box;
  position: relative;
  /* 48px */
  width: calc(100% - var(--s-1) * 6);
  margin-inline-start: auto;
}
@media screen and (min-width: 37.5rem) {
  .SectionSteppedProcess-module--stepcontent--64681 {
    /* 88px */
    width: calc(100% - var(--s-1) * 11);
  }
}

.SectionSteppedProcess-module--stepcontentbottom--81817 {
  border-block-end: 0;
}

.SectionSteppedProcess-module--steptitle--d8690 {
  margin-block-start: var(--s-1);
  font-size: var(--t-body-l);
  /* This prevents the gradient overlapping the title */
  z-index: var(--z-app-shell);
}

.SectionSteppedProcess-module--stepintrotext--0a981 p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.SectionSteppedProcess-module--steplink--5d192 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.SectionSteppedProcess-module--steplink--5d192:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionSteppedProcess-module--steplink--5d192:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionSteppedProcess-module--steplink--5d192:visited {
  text-decoration-style: solid;
}
.SectionSteppedProcess-module--steplink--5d192 {
  margin-block-end: var(--s-2);
  text-align: left;
}

.SectionSteppedProcess-module--number--3c530 {
  position: relative;
  height: 100%;
}
.SectionSteppedProcess-module--number--3c530 .SectionSteppedProcess-module--numbertitle--99b05 {
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
  margin: var(--s-2) auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-heading);
  font-size: 17px;
  z-index: 1;
}
@media screen and (min-width: 37.5rem) {
  .SectionSteppedProcess-module--number--3c530 .SectionSteppedProcess-module--numbertitle--99b05 {
    height: var(--s-5);
    width: var(--s-5);
    font-size: var(--t-heading-s);
  }
}
.SectionSteppedProcess-module--number--3c530 .SectionSteppedProcess-module--numberborder--77a63 {
  position: relative;
  border-inline-start: 3px solid var(--c-sunshine-yellow);
  inset-block-start: calc(var(--s-2) * -1);
  inset-inline-start: 0;
  margin: 0 auto;
  height: 100%;
  width: 1px;
}

.SectionSteppedProcess-module--gradient--60451 {
  position: absolute;
  z-index: var(--z-raised);
  inset-inline-end: 0;
  inset-block-end: var(--s-4);
  inset-inline-start: 0;
  height: calc(var(--s-10) * 2);
  background: url(data:image/svg+xml;base64,alotofcodehere);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%);
}

.SectionSteppedProcess-module--showmore--1e95e {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: var(--s-2);
  z-index: var(--z-app-shell);
  cursor: pointer;
  padding: var(--s-1);
}
.SectionSteppedProcess-module--showmore--1e95e p {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.SectionSteppedProcess-module--showmore--1e95e p:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionSteppedProcess-module--showmore--1e95e p:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionSteppedProcess-module--showmore--1e95e p:visited {
  text-decoration-style: solid;
}
.SectionSteppedProcess-module--showmore--1e95e p:hover {
  background-color: var(--c-white);
}
.SectionSteppedProcess-module--showmore--1e95e p {
  margin: 0;
}

.SectionSteppedProcess-module--visibilityhidden--4a9c1 {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphImageOrText-module--imagecontainer--293f9 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--s-2) 0;
  box-sizing: border-box;
}
.ParagraphImageOrText-module--imagecontainer--293f9 img {
  max-width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionTitleBody-module--titlebodyinner--2df28 {
  text-align: left;
  z-index: var(--z-toast);
  width: 100%;
  height: auto;
}

.SectionTitleBody-module--textarea--f7005 {
  width: 100%;
}

.SectionTitleBody-module--titlebodysectionbreak--0aa90 {
  width: 100%;
  margin-block: var(--s-4) auto;
  border-block-end: var(--bb-section-break);
}
@media screen and (min-width: 64rem) {
  .SectionTitleBody-module--titlebodysectionbreak--0aa90 {
    max-width: 70%;
  }
}
.SectionTitleBody-module--titlebodysectionbreak--0aa90 {
  align-self: flex-start;
  margin: var(--s-4) 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphTextArea-module--paragraphtextareainner--2c2e7 {
  width: 100%;
  box-sizing: border-box;
}

.ParagraphTextArea-module--textarea--d085b {
  color: var(--c-black);
}
.ParagraphTextArea-module--textarea--d085b table {
  width: 100% !important;
  border-spacing: 0;
}
.ParagraphTextArea-module--textarea--d085b table caption {
  font-family: var(--font-family);
  font-weight: 500;
  padding: var(--s-2) var(--s-1);
}
.ParagraphTextArea-module--textarea--d085b table thead {
  color: var(--c-dawn);
}
.ParagraphTextArea-module--textarea--d085b table thead tr > th {
  border-block-end: solid 3px var(--c-oatmeal);
  padding: 0 0 var(--s-1) var(--s-1);
  width: auto !important;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
}
.ParagraphTextArea-module--textarea--d085b table tbody {
  color: var(--c-midnight);
}
.ParagraphTextArea-module--textarea--d085b table tbody tr:nth-child(even) {
  background-color: var(--c-oatmeal-20);
}
.ParagraphTextArea-module--textarea--d085b table tbody tr:first-child > td {
  border-top: 0;
}
.ParagraphTextArea-module--textarea--d085b table tbody tr > td {
  padding: 12px var(--s-4) 12px var(--s-1);
  border-block-start: solid 1px var(--c-oatmeal);
  width: auto !important;
  font-family: var(--font-family);
  font-weight: 500;
}
@media (min-width: 37.5rem) {
  .ParagraphTextArea-module--textarea--d085b table {
    /* 744px */
    min-width: calc(var(--s-1) * 93);
  }
}
.ParagraphTextArea-module--textarea--d085b ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
  position: absolute;
  inset-inline-start: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}
.ParagraphTextArea-module--textarea--d085b h2,
.ParagraphTextArea-module--textarea--d085b h3,
.ParagraphTextArea-module--textarea--d085b h4 {
  margin-block-end: var(--s-2);
}
.ParagraphTextArea-module--textarea--d085b p::selection,
.ParagraphTextArea-module--textarea--d085b h2::selection,
.ParagraphTextArea-module--textarea--d085b h3::selection,
.ParagraphTextArea-module--textarea--d085b h4::selection,
.ParagraphTextArea-module--textarea--d085b li::selection {
  background-color: var(--c-sunshine-yellow);
}

.ParagraphTextArea-module--tableouterwrapper--2b76c {
  width: 100%;
  margin: var(--s-2) 0;
}
@media screen and (max-width: 37.5rem) {
  .ParagraphTextArea-module--tableouterwrapper--2b76c {
    position: relative;
  }
  .ParagraphTextArea-module--tableouterwrapper--2b76c:before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    width: 15%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  }
}

.ParagraphTextArea-module--tableinnerwrapper--5298b {
  width: 100%;
}
@media screen and (max-width: 37.5rem) {
  .ParagraphTextArea-module--tableinnerwrapper--5298b {
    overflow-x: scroll;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionThreeColCardsDoubleFeature-module--columns--ddc58 {
  width: 100%;
  display: grid;
  grid-template-areas: "signpostcardsection" "articlecardsection";
  grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
  .SectionThreeColCardsDoubleFeature-module--columns--ddc58 {
    grid-template-areas: "signpostcardsection  articlecardsection";
    grid-template-columns: 2fr 1fr;
  }
}

.SectionThreeColCardsDoubleFeature-module--signpostcardsection--aacd9 {
  grid-area: signpostcardsection;
  position: relative;
  width: 100%;
  padding: var(--s-2);
  gap: var(--s-2);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(minmax(100%, calc(var(--s-1) * 70)), 2) auto;
}
@media (min-width: 37.5rem) {
  .SectionThreeColCardsDoubleFeature-module--signpostcardsection--aacd9 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(100%, calc(var(--s-1) * 70)) auto;
  }
  .SectionThreeColCardsDoubleFeature-module--signpostcardsection--aacd9 > article {
    grid-column: unset;
  }
}

.SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 {
  position: relative;
  grid-area: articlecardsection;
  max-width: 100%;
  height: fit-content;
  overflow: hidden;
  display: grid;
  grid-template-areas: "cards" "showmore";
  grid-template-rows: auto var(--s-10);
}
.SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 .SectionThreeColCardsDoubleFeature-module--collapsedcards--97d2e > div {
  display: flex;
}
.SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 .SectionThreeColCardsDoubleFeature-module--collapsedcards--97d2e > div:nth-child(n+3) {
  display: none;
}
@media (min-width: 37.5rem) {
  .SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 .SectionThreeColCardsDoubleFeature-module--collapsedcards--97d2e > div:nth-child(n+0) {
    display: flex;
  }
  .SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 .SectionThreeColCardsDoubleFeature-module--collapsedcards--97d2e > div:nth-child(n+5) {
    display: none;
  }
  .SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 {
    /* Hide .showmorearea if there are no hidden cards at this breakpoint */
  }
  .SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 .SectionThreeColCardsDoubleFeature-module--collapsedcards--97d2e:not(:has(> div:nth-child(n+5))) + .SectionThreeColCardsDoubleFeature-module--showmorearea--304ba {
    display: none;
  }
}
@media (min-width: 64rem) {
  .SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 .SectionThreeColCardsDoubleFeature-module--collapsedcards--97d2e > div {
    display: flex;
  }
  .SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 .SectionThreeColCardsDoubleFeature-module--collapsedcards--97d2e > div:nth-child(n+0) {
    display: flex;
  }
  .SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 .SectionThreeColCardsDoubleFeature-module--collapsedcards--97d2e > div:nth-child(n+6) {
    display: none;
  }
  .SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 {
    /* Hide .showmorearea if there are no hidden cards at this breakpoint */
  }
  .SectionThreeColCardsDoubleFeature-module--articlecardsection--cfb45 .SectionThreeColCardsDoubleFeature-module--collapsedcards--97d2e:not(:has(> div:nth-child(n+6))) + .SectionThreeColCardsDoubleFeature-module--showmorearea--304ba {
    display: none;
  }
}

.SectionThreeColCardsDoubleFeature-module--cards--25258 {
  display: grid;
  width: 100%;
  grid-template-rows: repeat(auto, calc(var(--s-1) * 14));
  gap: var(--s-2);
  overflow: hidden;
  padding: var(--s-2);
}

.SectionThreeColCardsDoubleFeature-module--collapsedcards--97d2e {
  display: grid;
  width: 100%;
  grid-template-rows: repeat(auto, calc(var(--s-1) * 14));
  grid-template-columns: 1fr;
  gap: var(--s-2);
  overflow: hidden;
  padding: var(--s-2);
}

.SectionThreeColCardsDoubleFeature-module--showmorearea--304ba {
  position: relative;
  grid-area: showmore;
}

.SectionThreeColCardsDoubleFeature-module--gradient--766b9 {
  display: var(--gradient-display);
  position: absolute;
  inset-block-end: var(--s-9);
  height: calc(var(--s-1) * 18);
  background: url(data:image/svg+xml;base64);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--c-white) 70%);
  width: 100%;
}

.SectionThreeColCardsDoubleFeature-module--showmore--d1aa0 {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  inset-block-end: var(--s-10);
  margin-inline: auto;
  border: 0;
  background-color: transparent;
}

.SectionThreeColCardsDoubleFeature-module--text--cb989 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.SectionThreeColCardsDoubleFeature-module--text--cb989:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionThreeColCardsDoubleFeature-module--text--cb989:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionThreeColCardsDoubleFeature-module--text--cb989:visited {
  text-decoration-style: solid;
}
.SectionThreeColCardsDoubleFeature-module--text--cb989 {
  margin-inline-end: var(--s-0-5);
  font-weight: 600;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
}
.SectionThreeColCardsDoubleFeature-module--text--cb989 .SectionThreeColCardsDoubleFeature-module--chevron--67a66 {
  position: relative;
  margin-inline-start: var(--s-1);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.SectionThreeColCardsDoubleFeature-module--text--cb989 .SectionThreeColCardsDoubleFeature-module--chevron--67a66 svg {
  margin-block-end: 0;
}

.SectionThreeColCardsDoubleFeature-module--showless--c1cf7 {
  margin-block-start: var(--s-1);
  box-sizing: border-box;
}

.SectionThreeColCardsDoubleFeature-module--labeltext--a7fd5 {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  font-family: var(--font-family-heading);
  z-index: 2;
  background-color: var(--c-sunshine-yellow);
  padding: var(--s-1);
  border-bottom-left-radius: var(--s-2);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.SectionThreeColCardsDoubleFeature-module--labeltext--a7fd5 svg {
  margin-inline-end: var(--s-0-5);
}

.SectionThreeColCardsDoubleFeature-module--accessibilityalert--9dc2b {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed {
  position: relative;
  grid-area: articlecardsection;
  max-width: 100%;
  height: fit-content;
  overflow: hidden;
  padding: var(--s-2);
  display: grid;
  grid-template-areas: "cards" "showmore";
  grid-template-rows: auto var(--s-10);
}
.SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc > div {
  display: flex;
}
.SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc > div:nth-child(n+3) {
  display: none;
}
@media (min-width: 37.5rem) {
  .SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc > div:nth-child(n+0) {
    display: flex;
  }
  .SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc > div:nth-child(n+5) {
    display: none;
  }
  .SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed {
    /* Hide .showmorearea if there are no hidden cards at this breakpoint */
  }
  .SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc:not(:has(> div:nth-child(n+5))) + .SectionThreeColCardsOneFeature-module--showmorearea--a3503 {
    display: none;
  }
}
@media (min-width: 64rem) {
  .SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc > div {
    display: flex;
  }
  .SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc > div:nth-child(n+0) {
    display: flex;
  }
  .SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc > div:nth-child(n+9) {
    display: none;
  }
  .SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed {
    /* Hide .showmorearea if there are no hidden cards at this breakpoint */
  }
  .SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc:not(:has(> div:nth-child(n+9))) + .SectionThreeColCardsOneFeature-module--showmorearea--a3503 {
    display: none;
  }
}

.SectionThreeColCardsOneFeature-module--columns--19711 {
  width: 100%;
  display: grid;
  grid-template-areas: "signpostcardsection" "articlecardsection";
  grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
  .SectionThreeColCardsOneFeature-module--columns--19711 {
    grid-template-areas: "signpostcardsection articlecardsection";
    grid-template-columns: 1fr 2fr;
  }
}

.SectionThreeColCardsOneFeature-module--signpostcardsection--fe879 {
  grid-area: signpostcardsection;
  position: relative;
  width: 100%;
  padding: var(--s-2);
  gap: var(--s-2);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(minmax(100%, calc(var(--s-1) * 70)), 2) auto;
}
@media (min-width: 37.5rem) {
  .SectionThreeColCardsOneFeature-module--signpostcardsection--fe879 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(100%, calc(var(--s-1) * 70)) auto;
  }
}
@media (min-width: 64rem) {
  .SectionThreeColCardsOneFeature-module--signpostcardsection--fe879 {
    display: flex;
    flex-wrap: wrap;
  }
  .SectionThreeColCardsOneFeature-module--signpostcardsection--fe879 > article:nth-child(n+2) {
    display: none;
  }
}

.SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed {
  position: relative;
  grid-area: articlecardsection;
  max-width: 100%;
  height: fit-content;
  overflow: hidden;
  padding: var(--s-2);
  display: grid;
  grid-template-areas: "cards" "showmore";
  grid-template-rows: auto var(--s-10);
  /* Hide .showmorearea if there are no hidden cards at this breakpoint */
}
.SectionThreeColCardsOneFeature-module--articlecardsection--ee5ed .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc:not(:has(> div:nth-child(n+3))) + .SectionThreeColCardsOneFeature-module--showmorearea--a3503 {
  display: none;
}

.SectionThreeColCardsOneFeature-module--cards--cd753 {
  display: grid;
  width: 100%;
  grid-template-rows: repeat(auto, calc(var(--s-1) * 14));
  gap: var(--s-2);
  overflow: hidden;
}
@media (min-width: 37.5rem) {
  .SectionThreeColCardsOneFeature-module--cards--cd753 {
    grid-template-columns: 1fr 1fr;
  }
}

.SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc {
  display: grid;
  width: 100%;
  grid-template-rows: repeat(auto, calc(var(--s-1) * 14));
  gap: var(--s-2);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 37.5rem) {
  .SectionThreeColCardsOneFeature-module--collapsedcards--2f4bc {
    grid-template-columns: 1fr 1fr;
  }
}

.SectionThreeColCardsOneFeature-module--showmorearea--a3503 {
  position: relative;
  grid-area: showmore;
}

.SectionThreeColCardsOneFeature-module--gradient--95a00 {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--s-9);
  height: calc(var(--s-1) * 18);
  background: url(data:image/svg+xml;base64);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(250, 245, 230) 70%);
  width: 100%;
}

.SectionThreeColCardsOneFeature-module--showmore--ce70d {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  inset-block-end: var(--s-10);
  margin-inline: auto;
  border: 0;
  background-color: transparent;
}

.SectionThreeColCardsOneFeature-module--text--c3992 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.SectionThreeColCardsOneFeature-module--text--c3992:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionThreeColCardsOneFeature-module--text--c3992:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionThreeColCardsOneFeature-module--text--c3992:visited {
  text-decoration-style: solid;
}
.SectionThreeColCardsOneFeature-module--text--c3992 {
  margin-inline-end: var(--s-0-5);
  font-weight: 600;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
}
.SectionThreeColCardsOneFeature-module--text--c3992 .SectionThreeColCardsOneFeature-module--chevron--d4713 {
  position: relative;
  margin-inline-start: var(--s-1);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.SectionThreeColCardsOneFeature-module--text--c3992 .SectionThreeColCardsOneFeature-module--chevron--d4713 svg {
  margin-block-end: 0;
}

.SectionThreeColCardsOneFeature-module--showless--80772 {
  margin-block-start: var(--s-1);
  box-sizing: border-box;
}

.SectionThreeColCardsOneFeature-module--labeltext--27415 {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  font-family: var(--font-family-heading);
  z-index: 2;
  background-color: var(--c-sunshine-yellow);
  padding: var(--s-1);
  border-bottom-left-radius: var(--s-2);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.SectionThreeColCardsOneFeature-module--labeltext--27415 svg {
  margin-inline-end: var(--s-0-5);
}

.SectionThreeColCardsOneFeature-module--accessibilityalert--9033f {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionVolunteeringRoleLookup-module--lookupwithctaouter--83b5b {
  width: 100%;
  height: auto;
  background-color: var(--c-sandy-fur);
  margin: 0;
}

.SectionVolunteeringRoleLookup-module--lookupwithctainner--ff08a {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.SectionVolunteeringRoleLookup-module--lookupwithctacontainer--ed50b {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
}

.SectionVolunteeringRoleLookup-module--lookupwithctatitle--ab19e {
  position: relative;
  width: 100%;
  /* 384px */
  max-width: calc(var(--s-1) * 48);
  text-align: center;
}

.SectionVolunteeringRoleLookup-module--title--59978 {
}

.SectionVolunteeringRoleLookup-module--bordersection--78cc1 {
  position: absolute;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  background-color: var(--c-sandy-fur);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
  z-index: 1;
}
.SectionVolunteeringRoleLookup-module--bordersection--78cc1 .SectionVolunteeringRoleLookup-module--border--e916e {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphShareableCarousel-module--innercontainer--0abeb {
  position: relative;
  /* 120px */
  padding-block-end: calc(var(--s-1) * 15);
}

.ParagraphShareableCarousel-module--sharetools--9f932 {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: -69px;
}
@media screen and (min-width: 37.5rem) {
  .ParagraphShareableCarousel-module--sharetools--9f932 {
    inset-block-end: 0;
    inset-inline-start: -69px;
  }
}

.ParagraphShareableCarousel-module--sharedog--a77f7 {
  position: absolute;
  inset-inline-start: 69px;
  inset-block-end: 0;
}

.ParagraphShareableCarousel-module--sharetoicons--b53fd {
  display: flex;
  padding: 0;
  padding-inline-start: var(--s-1);
  padding-inline-end: var(--s-1);
  height: 33px;
  background-color: var(--c-black);
  border-radius: var(--s-5);
  max-width: 172px;
  position: absolute;
  inset-inline-start: 155px;
  inset-block-end: 55px;
}
.ParagraphShareableCarousel-module--sharetoicons--b53fd > a > svg {
  height: var(--s-4);
  width: var(--s-4);
}
@media screen and (min-width: 23.4375rem) {
  .ParagraphShareableCarousel-module--sharetoicons--b53fd {
    padding-inline-start: var(--s-1);
    padding-inline-end: var(--s-1);
    max-width: 178px;
  }
}
@media screen and (min-width: 37.5rem) {
  .ParagraphShareableCarousel-module--sharetoicons--b53fd {
    height: 42px;
    /* 232px */
    max-width: calc(var(--s-1) * 29);
    /* 48px */
    border-radius: calc(var(--s-1) * 6);
  }
  .ParagraphShareableCarousel-module--sharetoicons--b53fd > a > svg {
    height: var(--s-5);
    width: var(--s-5);
  }
}

.ParagraphShareableCarousel-module--swiper--49491 > div > div {
  padding: 14px;
  box-sizing: border-box;
}

.ParagraphShareableCarousel-module--imagewrapper--19a01 {
  position: relative;
  border-radius: var(--s-1);
  overflow: hidden;
  height: 100%;
  width: 100%;
  aspect-ratio: 16/9;
  box-shadow: 0 0.916px 15.206px 0 rgba(0, 0, 0, 0.15);
  z-index: 1;
  min-height: 149px;
  background-color: var(--c-white);
}
.ParagraphShareableCarousel-module--imagewrapper--19a01 img {
  position: absolute;
  inset-inline-start: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ParagraphShareableCarousel-module--navbuttons--366fc {
  position: absolute;
  z-index: 2;
  inset-inline-end: 0;
  margin-block-start: 27px;
  width: 69px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 23.4375rem) {
  .ParagraphShareableCarousel-module--navbuttons--366fc {
    width: 73px;
  }
}
@media screen and (min-width: 37.5rem) {
  .ParagraphShareableCarousel-module--navbuttons--366fc {
    width: 107px;
    inset-inline-end: var(--s-1);
  }
}
.ParagraphShareableCarousel-module--navbuttons--366fc .ParagraphShareableCarousel-module--next--a9f32 > div,
.ParagraphShareableCarousel-module--navbuttons--366fc .ParagraphShareableCarousel-module--back--2a074 > div {
  height: var(--s-4);
}
.ParagraphShareableCarousel-module--navbuttons--366fc .ParagraphShareableCarousel-module--next--a9f32 > div > svg,
.ParagraphShareableCarousel-module--navbuttons--366fc .ParagraphShareableCarousel-module--back--2a074 > div > svg {
  height: var(--s-4);
  width: var(--s-4);
}
.ParagraphShareableCarousel-module--navbuttons--366fc .ParagraphShareableCarousel-module--next--a9f32:disabled,
.ParagraphShareableCarousel-module--navbuttons--366fc .ParagraphShareableCarousel-module--back--2a074:disabled {
  cursor: not-allowed;
}
@media screen and (min-width: 37.5rem) {
  .ParagraphShareableCarousel-module--navbuttons--366fc .ParagraphShareableCarousel-module--next--a9f32 > div,
  .ParagraphShareableCarousel-module--navbuttons--366fc .ParagraphShareableCarousel-module--back--2a074 > div {
    height: var(--s-5);
  }
  .ParagraphShareableCarousel-module--navbuttons--366fc .ParagraphShareableCarousel-module--next--a9f32 > div > svg,
  .ParagraphShareableCarousel-module--navbuttons--366fc .ParagraphShareableCarousel-module--back--2a074 > div > svg {
    height: var(--s-5);
    width: var(--s-5);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SponsorDogPromoCardFlat-module--sponsordogpromocontainer--d02ad {
  display: flex;
  position: relative;
  /* 240px */
  height: calc(var(--s-1) * 30);
  width: 100%;
  border-radius: var(--s-1);
  box-shadow: var(--sh-box-card);
  overflow: hidden;
  background-color: var(--c-sunshine-yellow);
  max-width: 56rem;
  margin-inline: auto;
}

.SponsorDogPromoCardFlat-module--label--ccb7c {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-start: 0;
  z-index: var(--z-app-shell);
  /* 152px */
  width: calc(var(--s-1) * 19);
  height: 35px;
  display: flex;
  justify-content: flex-start;
}
.SponsorDogPromoCardFlat-module--label--ccb7c img {
  margin-inline-start: -2px;
}

.SponsorDogPromoCardFlat-module--labeltext--8048f {
  position: absolute;
  align-self: center;
  justify-self: center;
  margin-inline-start: var(--s-2);
  font-family: var(--font-family-heading);
}

.SponsorDogPromoCardFlat-module--image--cfda4 {
  position: relative;
  /* 232px */
  min-width: 30%;
  height: 100%;
  overflow: hidden;
}
.SponsorDogPromoCardFlat-module--image--cfda4 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1);
}

.SponsorDogPromoCardFlat-module--bordercontainer--80715 {
  position: absolute;
  height: 100%;
  width: auto;
  inset-inline-end: 0;
  z-index: var(--z-app-shell);
  display: flex;
  flex-direction: row;
  margin-inline-end: calc(var(--s-0-5) * -1);
}

.SponsorDogPromoCardFlat-module--border--d4857 {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-self: flex-end;
}

.SponsorDogPromoCardFlat-module--topheart--f6551 {
  position: absolute;
  /* 192px */
  inset-inline-start: calc(30% - var(--s-5));
  width: var(--s-4);
  z-index: calc(var(--z-app-shell) + 1);
  inset-block-start: var(--s-2);
}

.SponsorDogPromoCardFlat-module--bottomheart--ef936 {
  position: absolute;
  /* 192px */
  inset-inline-start: calc(30% - var(--s-6));
  width: var(--s-6);
  z-index: calc(var(--z-app-shell) + 1);
  inset-block-end: var(--s-2);
}

.SponsorDogPromoCardFlat-module--details--7508c {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-4);
}

.SponsorDogPromoCardFlat-module--text--4cc37 {
  width: 100%;
  padding: 0 var(--s-1);
  font-family: var(--font-family-heading);
  text-align: left;
  box-sizing: border-box;
}

.SponsorDogPromoCardFlat-module--buttonwrapper--c26f8 {
  width: 100%;
  display: flex;
  margin-inline-start: var(--s-2);
  justify-content: flex-start;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphSponsorMePromoCard-module--outer--5273a {
  height: auto;
  width: 100%;
  background-color: transparent;
  box-sizing: border-box;
  z-index: 6;
}

.ParagraphSponsorMePromoCard-module--inner--d0ade {
  text-align: left;
  height: auto;
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphSuccessStories-module--parasuccessstoriesouter--956ae {
  width: 100%;
  height: auto;
  background-color: var(--c-sandy-fur);
  margin: 0;
}

.ParagraphSuccessStories-module--parasuccessstoriesinner--edcc7 {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphSupportWidgetPrimary-module--inner--179c1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  z-index: var(--z-toast);
  width: 100%;
  padding: var(--s-4);
  box-sizing: border-box;
  flex-direction: column;
  border-radius: var(--s-1);
  max-width: 56rem;
  margin-inline: auto;
}
@media (min-width: 37.5rem) {
  .ParagraphSupportWidgetPrimary-module--inner--179c1 {
    margin: var(--s-10) auto;
    width: 100%;
    display: flex;
    flex-direction: row;
  }
}

.ParagraphSupportWidgetPrimary-module--textarea--38e13 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  margin-block-end: var(--s-2);
}
@media (min-width: 37.5rem) {
  .ParagraphSupportWidgetPrimary-module--textarea--38e13 {
    width: 50%;
    margin-block-end: 0;
    margin-inline-end: var(--s-2);
  }
}

.ParagraphSupportWidgetPrimary-module--title--7223d {
  width: 100%;
}
.ParagraphSupportWidgetPrimary-module--title--7223d .ParagraphSupportWidgetPrimary-module--heading--f3e84 {
  font-size: var(--s-5);
  line-height: var(--s-7);
}
@media (min-width: 64rem) {
  .ParagraphSupportWidgetPrimary-module--title--7223d .ParagraphSupportWidgetPrimary-module--heading--f3e84 {
    font-size: var(--s-7);
    line-height: var(--s-8);
  }
}

.ParagraphSupportWidgetPrimary-module--description--3b452 {
  width: 100%;
}

.ParagraphSupportWidgetPrimary-module--widgetarea--e84e1 {
  height: 100%;
  width: 100%;
  background-color: var(--c-sandy-fur);
  border-radius: var(--s-2);
  margin-block-start: var(--s-2);
  /* 344px */
  min-height: calc(var(--s-1) * 43);
}
@media (min-width: 37.5rem) {
  .ParagraphSupportWidgetPrimary-module--widgetarea--e84e1 {
    width: 50%;
    margin-block-start: 0;
    margin-inline-start: var(--s-2);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.Layout-module--layoutcontainer--ae276 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: auto;
  overflow: hidden;
}

form {
  margin-block-end: 0 !important;
}

.Layout-module--contentwrapper--0ffb0 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-inline-start: auto;
  margin-inline-end: auto;
  width: 100%;
  background-color: var(--c-oatmeal-light);
}
.Layout-module--contentwrapper--0ffb0 .Layout-module--inner--b8839 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--c-white);
  max-width: 90rem;
}
.Layout-module--contentwrapper--0ffb0 .Layout-module--inner--b8839 .Layout-module--footercontainer--ad1ba {
  position: relative;
  height: auto;
  width: 100%;
  inset-block-end: 0;
  background-color: var(--c-midnight);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.Footer-module--footerwrapper--93f7d {
  position: relative;
  background-color: var(--c-midnight);
  width: 100%;
  display: flex;
  justify-content: center;
}

.Footer-module--footercomponent--286cb {
  display: flex;
  justify-content: center;
  inset-inline-start: 0;
  inset-inline-end: 0;
  box-sizing: border-box;
  /* Small Mobile */
  padding: var(--s-4);
  inset-block-end: 0;
  flex-direction: column;
  align-self: center;
  background-color: var(--c-midnight);
  width: 100%;
}

.Footer-module--footertop--61432 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}
@media (min-width: 37.5rem) {
  .Footer-module--footertop--61432 {
    flex-direction: row;
    justify-content: space-between;
  }
}

.Footer-module--footertopcustom--b4a45 {
  flex-direction: column-reverse;
}
@media (min-width: 37.5rem) {
  .Footer-module--footertopcustom--b4a45 {
    flex-direction: row;
  }
}

.Footer-module--footerbottom--682db {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}
@media (min-width: 64rem) {
  .Footer-module--footerbottom--682db {
    flex-direction: row;
    justify-content: flex-start;
  }
}

.Footer-module--usefullinkswrapper--0d699 {
  width: 100%;
  padding-block: var(--s-1);
}
@media (min-width: 37.5rem) {
  .Footer-module--usefullinkswrapper--0d699 {
    width: 50%;
  }
}
@media (min-width: 64rem) {
  .Footer-module--usefullinkswrapper--0d699 {
    padding: 0 var(--s-4);
    box-sizing: border-box;
  }
}

.Footer-module--usefullinkstitle--35ecd {
  background-color: var(--c-midnight);
  color: var(--c-sunshine-yellow);
  font-family: var(--font-family-heading);
  margin: 0;
  margin-block-end: var(--s-1);
  font-size: var(--t-heading-m);
  line-height: var(--lh-heading-m);
}
@media (min-width: 64rem) {
  .Footer-module--usefullinkstitle--35ecd {
    font-size: var(--t-heading-l);
    line-height: var(--lh-heading-l);
  }
}

.Footer-module--links--60f64 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.Footer-module--link--fc375 {
  display: flex;
  align-items: center;
  font-family: var(--font-family);
  width: 50%;
  height: var(--s-4);
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
.Footer-module--link--fc375 a {
  color: var(--c-white) !important;
}

.Footer-module--sectionbreaktop--4f609 {
  align-self: center;
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  border-block-end: var(--border-spacer);
  width: 90%;
}
@media (min-width: 37.5rem) {
  .Footer-module--sectionbreaktop--4f609 {
    display: none;
  }
}

.Footer-module--newsletterwrapper--e20ae {
  box-sizing: border-box;
}
@media (min-width: 37.5rem) {
  .Footer-module--newsletterwrapper--e20ae {
    padding: 0 var(--s-6);
    width: 50%;
  }
}

.Footer-module--sectionbreakmiddle--041d6 {
  align-self: center;
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  border-block-end: var(--border-spacer);
  width: 90%;
}
@media (min-width: 64rem) {
  .Footer-module--sectionbreakmiddle--041d6 {
    width: 100%;
  }
}

.Footer-module--socialmediawrapper--61470 {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-inline-start: var(--s-2);
}
@media (min-width: 64rem) {
  .Footer-module--socialmediawrapper--61470 {
    padding-inline-start: var(--s-4);
    flex-direction: column;
  }
}

.Footer-module--sectionbreakbottom--c1db3 {
  box-sizing: border-box;
  align-self: center;
  margin: 0;
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  border-block-end: var(--border-spacer);
  width: 90%;
}
@media (min-width: 64rem) {
  .Footer-module--sectionbreakbottom--c1db3 {
    align-self: center;
    margin: 0;
    margin-block-start: var(--s-4);
    margin-block-end: var(--s-4);
    border-block-end: 0;
    border-inline-start: var(--border-spacer);
    width: 2px;
    /* 88px */
    height: calc(var(--s-1) * 11);
  }
}

.Footer-module--bottomwrapper--46546 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-flow: wrap;
  margin: 0;
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-1);
  width: 100%;
  padding: var(--s-1) var(--s-1);
}
@media (min-width: 37.5rem) {
  .Footer-module--bottomwrapper--46546 {
    flex-direction: row;
    align-items: center;
    padding: var(--s-1) var(--s-1) var(--s-1) var(--s-8);
    height: 100%;
  }
}

.Footer-module--legalwrapper--71b13 {
  box-sizing: border-box;
}
@media (min-width: 37.5rem) {
  .Footer-module--legalwrapper--71b13 {
    max-width: 60%;
  }
}
.Footer-module--legalwrapper--71b13 {
  color: var(--c-white);
}

.Footer-module--legalwrapperheader--26e2e {
  font-family: var(--font-family-heading);
  margin-block-end: var(--s-1);
}

.Footer-module--legalwrapperp--446a2 {
  font-size: var(--t-body-s);
  line-height: var(--lh-body-s);
  text-align: start;
  padding-inline-end: var(--s-4);
}

.Footer-module--fundraiseregswrapper--395a8 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  align-self: flex-end;
  width: 100%;
  /* 120px */
  height: calc(var(--s-1) * 15);
}
@media (min-width: 37.5rem) {
  .Footer-module--fundraiseregswrapper--395a8 {
    width: 40%;
  }
}

.Footer-module--cookiebutton--bf77e {
  background: transparent !important;
  border: none !important;
  white-space: nowrap !important;
  padding: 0 !important;
  font-family: var(--font-family);
  color: var(--c-white) !important;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  line-height: var(--lh-body-xs);
  cursor: pointer;
}
.Footer-module--cookiebutton--bf77e:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.Footer-module--cookiebutton--bf77e:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.Footer-module--cookiebutton--bf77e:visited {
  text-decoration-style: solid;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.HeaderDesktop-module--headerouter--e8942 {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: auto;
  margin: 0 auto;
  z-index: var(--z-header);
  background-color: var(--c-white);
  max-width: 90rem;
}

.HeaderDesktop-module--headerinner--3fd18 {
  position: relative;
  width: 100%;
  height: auto;
}

.HeaderDesktop-module--content--d6874 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: var(--s-1) var(--s-2);
  min-height: 106px;
}

.HeaderDesktop-module--contentrightwrapper--74c99 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  width: auto;
  padding: var(--s-2) 0;
}

.HeaderDesktop-module--controlswrapper--7eec0 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: flex-end;
  /* 480px */
  width: calc(var(--s-1) * 60);
  height: 100%;
}

.HeaderDesktop-module--logowrappertop--637bf {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 101;
  align-items: center;
  color: white;
  font-size: 1px;
  line-height: 1px;
  overflow: hidden;
}

.HeaderDesktop-module--searchboxwrapper--3ef3c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  margin-inline-end: var(--s-1);
}
.HeaderDesktop-module--searchboxwrapper--3ef3c svg {
  margin-block-start: -2px;
}
.HeaderDesktop-module--searchboxwrapper--3ef3c .HeaderDesktop-module--searchbox--eb805 {
  height: var(--s-5);
  min-height: var(--s-5);
  width: 224px;
  border-radius: var(--s-3);
  padding-inline-start: var(--s-2);
  border: 2px solid var(--c-black);
  box-shadow: none;
  margin: 0;
  font-weight: 600;
  font-size: var(--t-body-s);
}

.HeaderDesktop-module--donatewrapper--a78d9 {
  display: flex;
  justify-content: center;
  width: auto;
  height: 100%;
}
@media (min-width: 64rem) {
  .HeaderDesktop-module--donatewrapper--a78d9 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    /* 120px */
    width: calc(var(--s-1) * 15);
  }
}

@media (min-width: 64rem) {
  .HeaderDesktop-module--burgerwrapper--de6b8 {
    display: none;
  }
}

.HeaderDesktop-module--accountwrapper--8d1a4 {
  display: flex;
  justify-content: center;
  width: auto;
  height: 100%;
  margin-inline-end: 6px;
}

.HeaderDesktop-module--favs--47de5 {
  display: flex;
  justify-content: center;
  width: auto;
  height: 100%;
  position: relative;
  color: var(--c-black);
  margin-inline-end: var(--s-2);
}

.HeaderDesktop-module--favsscrolled--8d24a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100%;
  position: relative;
  color: var(--c-black);
  margin-inline-start: var(--s-2);
}

.HeaderDesktop-module--bottomlinkswrapper--2be61 {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  max-width: 1444px;
  height: var(--s-7);
  border-block-start: 1px solid var(--c-mist);
}

.HeaderDesktop-module--primarylinks--57055 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-weight: 500;
}

.HeaderDesktop-module--logowrapperbottom--9c904 {
  display: none;
  position: absolute;
  align-self: flex-start;
  justify-self: flex-start;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  box-shadow: var(--sh-box-heavy);
  border-radius: 50%;
}

.HeaderDesktop-module--basket--435d1 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--s-4);
  margin-inline-end: var(--s-2);
  height: 100%;
  cursor: pointer;
  color: var(--c-black);
}
.HeaderDesktop-module--basket--435d1:visited {
  color: var(--c-black);
}
.HeaderDesktop-module--basket--435d1 .HeaderDesktop-module--basketnotification--75dec {
  inset-block-start: -3px;
  inset-inline-end: -13px;
}

.HeaderDesktop-module--basketscrolled--8e81c {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--s-4);
  margin-block-start: var(--s-0-5);
  height: 100%;
  cursor: pointer;
  color: var(--c-black);
}
.HeaderDesktop-module--basketscrolled--8e81c:visited {
  color: var(--c-black);
}

.HeaderDesktop-module--listoflinks--d18e1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 100%;
  margin: 0;
  overflow: visible;
  padding: 0;
  list-style: none;
  width: 100%;
}
.HeaderDesktop-module--listoflinks--d18e1 ::before {
  margin: 0;
  padding: 0;
}

.HeaderDesktop-module--listlink--16cd2 {
  position: unset;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  padding-block-start: var(--s-1);
  border: 1px solid var(--c-white);
  box-sizing: border-box;
}
.HeaderDesktop-module--listlink--16cd2::before,
.HeaderDesktop-module--listlink--16cd2 ::before {
  display: none;
}
.HeaderDesktop-module--listlink--16cd2:hover {
  color: var(--c-black) !important;
  background-color: var(--c-white) !important;
}
.HeaderDesktop-module--listlink--16cd2:hover > button, .HeaderDesktop-module--listlink--16cd2:focus-within > button, .HeaderDesktop-module--listlink--16cd2[aria-expanded=true] > button {
  border-bottom: 6px solid var(--c-sunshine-yellow);
  box-shadow: none;
}

.HeaderDesktop-module--listlinkanchor--bf239 {
  color: var(--c-midnight);
  text-decoration: none;
  line-height: var(--lh-body-xl);
  text-underline-position: initial;
  font-family: var(--font-family);
  font-weight: 500;
  border: 0;
  min-width: 100%;
  height: 100%;
  border-radius: 0;
  border-block-end: 6px solid var(--c-white);
}

.HeaderDesktop-module--primarylink--96cfb {
  min-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.HeaderDesktop-module--primarylink--96cfb a {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-block-end: 6px solid var(--c-white);
}
.HeaderDesktop-module--primarylink--96cfb:focus a, .HeaderDesktop-module--primarylink--96cfb:focus-within a, .HeaderDesktop-module--primarylink--96cfb:hover a {
  border-bottom: 6px solid var(--c-sunshine-yellow);
  box-shadow: none;
}
.SkipToContent-module--skiptoinvisible--0ba8d {
  position: absolute;
  inset-inline-start: -1000;
}

.SkipToContent-module--skiptovisible--b162a {
  position: fixed;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-inline-end: 0;
  height: 188px;
  z-index: 1000;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

a > u {
  border: none;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SecondaryNavigation-module--secondarynavwrapper--86917 {
  position: absolute;
  inset-block-start: var(--s-1);
  inset-inline-start: 0;
  z-index: 96;
  box-sizing: border-box;
  opacity: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.SecondaryNavigation-module--secondarynavinner--885a9 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  /* 440px */
  min-height: calc(var(--s-1) * 55);
  max-height: minmax(440, 40vh);
  box-shadow: var(--sh-box-light);
  overflow: auto;
  background-color: var(--c-white);
}

.SecondaryNavigation-module--secondarynavwrapperhidden--16153 {
  position: absolute;
  opacity: 0;
  width: 100%;
  box-sizing: border-box;
  max-height: 0;
  pointer-events: none;
  visibility: hidden;
}

.SecondaryNavigation-module--secondarynavlist--b101c {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* 440px */
  min-height: calc(var(--s-1) * 55);
  height: 100%;
  box-sizing: border-box;
  border-inline-end: 1px solid var(--c-mist);
  background-color: var(--c-white);
  overflow: auto;
}

.SecondaryNavigation-module--secondarylink--17385 {
  position: relative;
  font-weight: 600;
  padding: 0;
  box-sizing: border-box;
  max-width: 50%;
  width: 100%;
  background-color: var(--c-white);
}
.SecondaryNavigation-module--secondarylink--17385:hover {
  background-color: var(--c-sandy-fur);
}
.SecondaryNavigation-module--secondarylink--17385 {
  border-inline-end: 1px solid var(--c-mist);
  border-block-end: 1px solid var(--c-mist);
}
.SecondaryNavigation-module--secondarylink--17385 a {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: var(--s-6);
  padding-inline-start: var(--s-4);
  align-items: center;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}
.SecondaryNavigation-module--secondarylink--17385::before {
  content: "";
  text-align: center;
  border-radius: 0;
  background-color: transparent;
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  inset-block-start: 0;
}
.SecondaryNavigation-module--secondarylink--17385 > button:active, .SecondaryNavigation-module--secondarylink--17385 > button:focus {
  background-color: var(--c-oatmeal-light) !important;
}
.SecondaryNavigation-module--secondarylink--17385 > button {
  box-shadow: none !important;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
}

.SecondaryNavigation-module--primarylinkwrapper--dc858 {
}
.SecondaryNavigation-module--primarylinkwrapper--dc858:hover {
  text-decoration-style: dotted;
  background-color: var(--c-white);
}
@media (min-width: 64rem) {
  .SecondaryNavigation-module--primarylinkwrapper--dc858 {
    min-height: var(--s-6);
  }
}

.SecondaryNavigation-module--secondarylinkwrapper--aa684 {
  max-width: 100%;
}
.SecondaryNavigation-module--secondarylinkwrapper--aa684:hover {
  text-decoration-style: dotted;
  background-color: var(--c-white);
}

.SecondaryNavigation-module--primarylink--2f207 {
  font-family: var(--font-family-heading);
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-position: under;
  min-width: 100%;
  cursor: pointer;
}
.SecondaryNavigation-module--primarylink--2f207:hover {
  text-decoration-style: dotted;
  background-color: var(--c-white);
}
.SecondaryNavigation-module--primarylink--2f207:active {
  text-decoration-style: dotted;
}
.SecondaryNavigation-module--primarylink--2f207:visited {
  text-decoration-style: dashed;
}

.SecondaryNavigation-module--secondaryTitle--52a77 {
  font-size: var(--t-body-l);
  font-weight: 600;
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-position: under;
  min-width: 100%;
  cursor: pointer;
  background-color: var(--c-oatmeal-light);
}
.SecondaryNavigation-module--secondaryTitle--52a77:hover {
  text-decoration-style: dotted;
}
.SecondaryNavigation-module--secondaryTitle--52a77:active {
  text-decoration-style: dotted;
}
.SecondaryNavigation-module--secondaryTitle--52a77:focus {
  outline: 1px solid blue;
}
.SecondaryNavigation-module--secondaryTitle--52a77:visited {
  text-decoration-style: dashed;
}

.SecondaryNavigation-module--tertiaryTriggerCta--81060 {
  background-color: var(--c-white);
  min-width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.SecondaryNavigation-module--tertiaryTriggerCta--81060 > span {
  width: 100%;
  justify-content: space-between;
  padding-inline-start: var(--s-4);
}

.SecondaryNavigation-module--secondarylinkactive--b6d3d {
}
.SecondaryNavigation-module--secondarylinkactive--b6d3d > button {
  background-color: var(--c-oatmeal-light) !important;
}

.SecondaryNavigation-module--tertiarylistwrapper--a072a {
  position: absolute;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  inset-inline-start: 50%;
  width: 50%;
  height: 100%;
  /* 440px */
  min-height: calc(var(--s-1) * 55);
  list-style-type: none;
  box-sizing: border-box;
  background-color: var(--c-oatmeal-light);
  overflow: hidden;
}

.SecondaryNavigation-module--promocardsnotertiary--1301c {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 50%;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
}

.SecondaryNavigation-module--tertiarytitle--c81d3 {
  font-weight: 600;
  margin-inline-start: var(--s-4);
  margin-block-end: var(--s-1);
}

.SecondaryNavigation-module--tertiarylist--eecb3 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  list-style-type: none;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  padding: 0;
  margin: 0;
  background-color: var(--c-oatmeal-light);
}

.SecondaryNavigation-module--tertiarylisthidden--c1c4a {
  height: 0;
  width: 0;
  overflow: hidden;
}

.SecondaryNavigation-module--tertiarylinkwrapper--8466f {
  height: 47px;
  position: relative;
  display: flex;
  align-items: center;
  /* 48px */
  min-height: calc(var(--s-1) * 6);
  font-weight: 500;
  margin: 0;
  min-width: 100%;
  border-block-end: 1px solid var(--c-mist);
  background-color: var(--c-oatmeal-light);
}
.SecondaryNavigation-module--tertiarylinkwrapper--8466f:hover {
  font-weight: 600;
}
.SecondaryNavigation-module--tertiarylinkwrapper--8466f > div {
  width: 100%;
}
.SecondaryNavigation-module--tertiarylinkwrapper--8466f > div > a {
  display: flex;
  min-width: 100%;
  padding-block-start: var(--s-0-5);
  padding-block-end: var(--s-1);
  border-block-end: 0;
}

.SecondaryNavigation-module--promocards--41e05 {
  height: 100%;
  width: 100%;
  overflow: auto;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.TextAndImageCardFlat-module--textandimagecardcontainer--a7606 {
  display: flex;
  position: relative;
  height: 282px;
  width: 100%;
  border-radius: var(--s-1);
  overflow: hidden;
  margin: 0 auto;
  background-color: var(--c-sunshine-yellow);
  box-shadow: var(--sh-box-card);
  max-width: 56rem;
  margin-inline: auto;
}

.TextAndImageCardFlat-module--image--4b148 {
  position: relative;
  min-width: 368px;
  height: 100%;
  overflow: hidden;
}
.TextAndImageCardFlat-module--image--4b148 img {
  /* 400px */
  width: calc(var(--s-1) * 50);
  object-fit: contain;
  margin-inline-start: calc(var(--s-2) * -1);
  transform: scale(1);
  height: 100%;
}

.TextAndImageCardFlat-module--bordercontainer--230cc {
  position: absolute;
  height: 100%;
  width: auto;
  min-width: 53px;
  inset-inline-end: -2px;
  z-index: var(--z-app-shell);
}

.TextAndImageCardFlat-module--border--7d1df {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-self: flex-end;
}

.TextAndImageCardFlat-module--details--6f027 {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
}

.TextAndImageCardFlat-module--title--c9672 {
  font-size: var(--t-heading-xl);
  line-height: var(--s-5);
}

.TextAndImageCardFlat-module--text--f36e0 {
  width: 100%;
  font-family: var(--font-family-heading);
  text-align: left;
  box-sizing: border-box;
}

.TextAndImageCardFlat-module--buttonwrapper--9624f {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.HeaderMobile-module--headerouter--923ad {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: auto;
  margin: 0;
  z-index: var(--z-header);
  background-color: var(--c-white);
  max-width: 100vw;
  overflow: hidden;
}

.HeaderMobile-module--headerinner--2e7d3 {
  position: relative;
  width: 100%;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.04);
  height: auto;
}

.HeaderMobile-module--headerinnermenuopen--77c67 {
  position: relative;
  width: 100%;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.04);
  height: auto;
  padding-inline-start: 28px;
}
.HeaderMobile-module--headerinnermenuopen--77c67 .HeaderMobile-module--contentrightwrapper--49bcd {
  margin-inline-end: 14px;
}

.HeaderMobile-module--content--ab979 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: var(--s-1) 0;
  /* 48px */
  min-height: calc(var(--s-1) * 6);
}

.HeaderMobile-module--contentrightwrapper--49bcd {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: var(--s-1) 0;
}

.HeaderMobile-module--controlswrapper--49c4b {
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
}

.HeaderMobile-module--logowrappertop--1fa71 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-inline-start: var(--s-2);
  color: white;
  font-size: 1px;
  line-height: 1px;
  overflow: hidden;
}
@media (max-width: 360) {
  .HeaderMobile-module--logowrappertop--1fa71 {
    margin-inline-start: var(--s-1);
  }
}

.HeaderMobile-module--searchboxwrapper--d541c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-inline-end: var(--s-2);
  /* 72px */
  height: calc(var(--s-1) * 9);
}
.HeaderMobile-module--searchboxwrapper--d541c form > div > div > div > div > div {
  inset-block-start: 17%;
}

.HeaderMobile-module--searchbox--8d891 {
  height: var(--s-5);
  min-height: var(--s-5);
  /* 168px */
  width: calc(var(--s-1) * 21);
  border-radius: var(--s-3);
  padding-inline-start: var(--s-2);
  border: 2px solid var(--c-black);
  box-shadow: none;
  margin: 0;
  font-weight: 600;
  font-size: var(--t-body-l);
}

.HeaderMobile-module--donatewrapper--10b3c {
  display: flex;
  justify-content: center;
  height: 100%;
}

.HeaderMobile-module--burgerwrapper--ea092 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  width: var(--s-7);
  cursor: pointer;
  /** Hide the default button formatting **/
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  /** End hide the default button formatting **/
}
@media (max-width: 360) {
  .HeaderMobile-module--burgerwrapper--ea092 {
    margin-inline-start: -5px;
  }
}

.HeaderMobile-module--accountwrapper--1a760 {
  display: flex;
  justify-content: center;
  width: auto;
  height: 100%;
}
@media (max-width: 360) {
  .HeaderMobile-module--accountwrapper--1a760.HeaderMobile-module--allIconsDisplaying--dfd89 > a {
    padding-inline-start: 5px;
    padding-inline-end: 5px;
  }
}

.HeaderMobile-module--favs--65a38 {
  display: flex;
  justify-content: center;
  width: auto;
  height: 100%;
  position: relative;
  width: 28px;
  height: var(--s-4);
  margin-inline-end: var(--s-2);
}
@media (max-width: 360) {
  .HeaderMobile-module--favs--65a38.HeaderMobile-module--allIconsDisplaying--dfd89 {
    margin-inline-end: var(--s-1);
  }
}

.HeaderMobile-module--basket--7aa8e {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: var(--s-4);
  margin-inline-end: var(--s-2);
  height: 100%;
  cursor: pointer;
  color: var(--c-black);
}
.HeaderMobile-module--basket--7aa8e:visited {
  color: var(--c-black);
}
@media (max-width: 360) {
  .HeaderMobile-module--basket--7aa8e.HeaderMobile-module--allIconsDisplaying--dfd89 {
    margin-inline-end: var(--s-1);
  }
}

.HeaderMobile-module--burgerContainer--e4bd8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--s-6);
  height: auto;
}

.HeaderMobile-module--bar--ef4bc {
  width: 21px;
  border-width: 1px;
  border-color: var(--c-midnight);
  border-style: solid;
  border-radius: 2px;
  background: var(--c-midnight);
}
.HeaderMobile-module--bar--ef4bc.HeaderMobile-module--bar2--f980c, .HeaderMobile-module--bar--ef4bc.HeaderMobile-module--bar3--4c641 {
  margin-block-start: 5px;
}

.HeaderMobile-module--burgerContainer--e4bd8.HeaderMobile-module--opened--a529c .HeaderMobile-module--bar--ef4bc {
  width: 27px;
}
.HeaderMobile-module--burgerContainer--e4bd8.HeaderMobile-module--opened--a529c .HeaderMobile-module--bar1--d3208 {
  transform: translate(0, 3px) rotate(45deg);
}
.HeaderMobile-module--burgerContainer--e4bd8.HeaderMobile-module--opened--a529c .HeaderMobile-module--bar2--f980c {
  display: none;
}
.HeaderMobile-module--burgerContainer--e4bd8.HeaderMobile-module--opened--a529c .HeaderMobile-module--bar3--4c641 {
  transform: translate(0, -4px) rotate(-45deg);
}

@keyframes HeaderMobile-module--slideUp--0f12e {
  0% {
    /* -104px */
    inset-block-end: calc(var(--s-1) * -13);
  }
  100% {
    inset-block-end: var(--s-4);
  }
}
.HeaderMobile-module--backtotop--1f7bd {
  position: fixed;
  margin-block-end: var(--s-2);
  inset-inline-end: var(--s-4);
  z-index: 101;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-outer-dark);
  cursor: pointer;
  animation: HeaderMobile-module--slideUp--0f12e 0.5s forwards;
  -webkit-animation: HeaderMobile-module--slideUp--0f12e 0.5s forwards;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.TextAndImageCardSquare-module--textandimagecardcontainer--a6965 {
  position: relative;
  width: 100%;
  border-radius: var(--s-1);
  overflow: hidden;
  margin: 0 auto;
  background-color: var(--c-sunshine-yellow);
  max-width: 368px;
}

.TextAndImageCardSquare-module--image--3d9bf {
  position: relative;
  /* 200px */
  height: calc(var(--s-1) * 25);
  width: 100%;
  overflow: hidden;
}
.TextAndImageCardSquare-module--image--3d9bf img {
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  margin-block-start: -5%;
}
@media (min-width: 32.5rem) {
  .TextAndImageCardSquare-module--image--3d9bf img {
    object-fit: contain;
  }
}

.TextAndImageCardSquare-module--bordercontainer--1046f {
  position: absolute;
  width: 100%;
  height: auto;
  inset-block-end: -2px;
}

.TextAndImageCardSquare-module--border--ca202 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-self: flex-end;
}

.TextAndImageCardSquare-module--details--0b421 {
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  padding-block-start: var(--s-1);
}

.TextAndImageCardSquare-module--title--890dd {
  font-size: var(--t-heading-xl);
  line-height: var(--s-5);
}

.TextAndImageCardSquare-module--text--23634 {
  font-family: var(--font-family-heading);
  box-sizing: border-box;
}

.TextAndImageCardSquare-module--buttonwrapper--03155 {
  width: 100%;
  display: flex;
  justify-content: center;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ParagraphVideo-module--paragraphvideoouter--49706 {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
  box-sizing: border-box;
}

.ParagraphVideo-module--paragraphvideoinner--06731 {
  position: relative;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  margin-inline: auto;
}

.ParagraphVideo-module--videoheading--75c0c {
  width: 100%;
  margin: var(--s-4) 0;
  text-align: left;
}

.ParagraphVideo-module--heading--21980 {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .ParagraphVideo-module--heading--21980 {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}

.ParagraphVideo-module--videotext--34b64 {
  width: 100%;
  margin: var(--s-4) 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionBreedDogs-module--spotlightdogsouter--3beeb {
  width: 100%;
  height: auto;
  background-color: var(--c-sunshine-yellow);
  margin: 0;
}

.SectionBreedDogs-module--spotlightdogsinner--11261 {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.SectionBreedDogs-module--bordersection--7b7d6 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  background-color: var(--c-white);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
}

.SectionBreedDogs-module--bordertop--e9b81 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
  margin-block-end: -2px;
}

.SectionBreedDogs-module--titlewrapper--ab5fb {
  text-align: center;
  width: 100%;
  padding-block-start: var(--s-4);
  margin: 0 var(--s-2);
}

.SectionBreedDogs-module--title--a91b3 {
}

.SectionBreedDogs-module--introtext--6a65c {
  text-align: center;
  width: 100%;
  padding: 0 var(--s-2);
  box-sizing: border-box;
}
.SectionBreedDogs-module--introtext--6a65c p {
  margin-block-end: 0;
}

.SectionBreedDogs-module--swiperwrapper--38d9f {
  position: relative;
  width: 100%;
  /* 352px */
  min-height: calc(var(--s-1) * 44);
}

.SectionBreedDogs-module--swiper--8734d {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
@media screen and (min-width: 64rem) {
  .SectionBreedDogs-module--swiper--8734d {
    max-width: calc(100% - var(--s-10));
  }
}

.SectionBreedDogs-module--curvedborder--0bfc8 {
  pointer-events: none;
  padding: 0;
  margin: 0;
  position: absolute;
  inset-block-start: -18.5185185185vw px;
  inset-inline-start: 0;
  inset-block-end: calc(var(--s-1) * -1);
  z-index: var(--z-app-shell);
  overflow: hidden;
}

.SectionBreedDogs-module--buttonwrapper--2b002 {
  position: relative;
  width: 90%;
  /* 320px */
  max-width: calc(var(--s-1) * 40);
  margin-block-end: var(--s-6);
}
@media screen and (min-width: 37.5rem) {
  .SectionBreedDogs-module--buttonwrapper--2b002 {
    margin-block-end: 57px;
  }
}
@media screen and (min-width: 75rem) {
  .SectionBreedDogs-module--buttonwrapper--2b002 {
    margin-top: var(--s-2);
    /* 88px */
    margin-block-end: calc(var(--s-1) * 11);
  }
}

.SectionBreedDogs-module--navbuttons--495ac {
  display: none;
}
@media screen and (min-width: 64rem) {
  .SectionBreedDogs-module--navbuttons--495ac {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    inset-block-start: 0;
  }
}
.SectionBreedDogs-module--navbuttons--495ac .SectionBreedDogs-module--back--ff649 {
  cursor: pointer;
  margin-inline-start: var(--s-1);
}
.SectionBreedDogs-module--navbuttons--495ac .SectionBreedDogs-module--next--bcee3 {
  cursor: pointer;
  margin-block-start: var(--s-0-5);
  margin-inline-end: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionEventKeyDetails-module--eventdetailscolumnouter--8d611 {
  position: relative;
  display: flex;
  height: auto;
  padding-block-start: var(--s-1);
  padding-block-end: var(--s-1);
  background-color: var(--c-sandy-fur);
  margin: 0;
}

.SectionEventKeyDetails-module--eventdetailscolumninner--8e4aa {
  position: relative;
  height: 100%;
}
@media (max-width: 64rem) {
  .SectionEventKeyDetails-module--eventdetailscolumninner--8e4aa {
    margin-block-end: var(--s-4);
  }
}

.SectionEventKeyDetails-module--eventdetailscontainer--c7e15 {
  width: 90%;
  margin-block-start: 33px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding: var(--s-4);
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--s-1);
  /* 744px */
  max-width: calc(var(--s-1) * 93);
}
@media (max-width: 37.5rem) {
  .SectionEventKeyDetails-module--eventdetailscontainer--c7e15 {
    width: 75%;
  }
}
@media (max-width: 64rem) {
  .SectionEventKeyDetails-module--eventdetailscontainer--c7e15 {
    width: 65%;
  }
}

.SectionEventKeyDetails-module--heading--360c1 {
  width: 100%;
}
.SectionEventKeyDetails-module--heading--360c1 .SectionEventKeyDetails-module--headinglabel--b4231 {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .SectionEventKeyDetails-module--heading--360c1 .SectionEventKeyDetails-module--headinglabel--b4231 {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}

.SectionEventKeyDetails-module--allcontent--98db2 {
  width: 100%;
  margin: var(--s-2) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: start;
  flex-wrap: wrap;
  padding-block-end: var(--s-5);
  box-sizing: border-box;
}
@media (min-width: 46.875rem) {
  .SectionEventKeyDetails-module--allcontent--98db2 {
    justify-content: space-evenly;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

.SectionEventKeyDetails-module--itemrow--7f28f {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-block-start: var(--s-2);
}
.SectionEventKeyDetails-module--itemrow--7f28f .SectionEventKeyDetails-module--itemtitle--f9e2c {
  font-family: var(--font-family);
  width: 100%;
  padding: 0 var(--s-1);
  padding-block-start: var(--s-2);
  font-weight: 600;
}
@media (min-width: 64rem) {
  .SectionEventKeyDetails-module--itemrow--7f28f .SectionEventKeyDetails-module--itemtitle--f9e2c {
    font-size: var(--t-body-l);
    padding-block-start: 0;
  }
}
.SectionEventKeyDetails-module--itemrow--7f28f .SectionEventKeyDetails-module--itemtext--c6092 {
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-dawn);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xs);
}
@media (min-width: 25.875rem) {
  .SectionEventKeyDetails-module--itemrow--7f28f .SectionEventKeyDetails-module--itemtext--c6092 {
    line-height: var(--lh-body-s);
  }
}
.SectionEventKeyDetails-module--itemrow--7f28f .SectionEventKeyDetails-module--itemtext--c6092 {
  padding: 0 var(--s-1);
}
@media (min-width: 64rem) {
  .SectionEventKeyDetails-module--itemrow--7f28f .SectionEventKeyDetails-module--itemtext--c6092 {
    font-size: var(--t-body-l);
  }
}
@media (min-width: 46.875rem) {
  .SectionEventKeyDetails-module--itemrow--7f28f {
    width: 50%;
  }
}

.SectionEventKeyDetails-module--googlemaps--795f5 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.SectionEventKeyDetails-module--googlemaps--795f5:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionEventKeyDetails-module--googlemaps--795f5:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.SectionEventKeyDetails-module--googlemaps--795f5:visited {
  text-decoration-style: solid;
}
.SectionEventKeyDetails-module--googlemaps--795f5 {
  color: var(--c-dawn);
  font-weight: 600;
}

.SectionEventKeyDetails-module--bordersection--f8646 {
  position: relative;
  display: flex;
  width: 100%;
  background-color: var(--c-sandy-fur);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
}
.SectionEventKeyDetails-module--bordersection--f8646 .SectionEventKeyDetails-module--borderbottom--25a76 {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  z-index: var(--z-app-shell);
  pointer-events: none;
}
@media (min-width: 37.5rem) {
  .SectionEventKeyDetails-module--bordersection--f8646 .SectionEventKeyDetails-module--borderbottom--25a76 {
    margin-block-start: calc(var(--s-6) * -1);
  }
}
.SectionEventKeyDetails-module--bordersection--f8646 .SectionEventKeyDetails-module--borderbottom--25a76 svg {
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SectionLoadMoreArticleOrEventCards-module--outer--e76d1 {
  width: 100%;
  height: auto;
  background-color: var(--c-sunshine-yellow);
  margin: 0;
}

.SectionLoadMoreArticleOrEventCards-module--inner--41848 {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.SectionLoadMoreArticleOrEventCards-module--container--81795 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  z-index: var(--z-app-shell);
  margin-block-start: var(--s-4);
  margin-block-end: var(--s-4);
}

.SectionLoadMoreArticleOrEventCards-module--title--77065 {
  position: relative;
  width: 100%;
  /* 384px */
  max-width: calc(var(--s-1) * 48);
  text-align: center;
}

.SectionLoadMoreArticleOrEventCards-module--title--77065 {
}

.SectionLoadMoreArticleOrEventCards-module--bordersection--d359e {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  background-color: var(--c-sunshine-yellow);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
}

.SectionLoadMoreArticleOrEventCards-module--bordertop--7fa59 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 100%;
  height: 100%;
  z-index: var(--z-app-shell);
  margin-block-end: -2px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.BurgerMenuMobile-module--burgermenuhidden--ad8df {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}

.BurgerMenuMobile-module--burgermenucontainer--e9b11 {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: var(--c-white);
  height: 100%;
  width: 100%;
  border: 1px solid var(--c-mist);
  box-shadow: var(--sh-box-light);
  box-sizing: border-box;
  z-index: var(--z-dropdown);
  visibility: visible;
  overflow: hidden;
  overflow-y: auto;
}

.BurgerMenuMobile-module--primarynavlist--e59a3 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
}

.BurgerMenuMobile-module--primarylink--6ddec {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  list-style-type: none;
  margin: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-family-heading);
  padding: var(--s-1);
}
.BurgerMenuMobile-module--primarylink--6ddec::before {
  display: none;
}
.BurgerMenuMobile-module--primarylink--6ddec a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-size: var(--t-heading-l);
  line-height: var(--lh-heading-l);
}
.BurgerMenuMobile-module--primarylink--6ddec a:hover {
  background-color: var(--c-sandy-fur);
}

.BurgerMenuMobile-module--primarylinkactive--6594f {
  background-color: var(--c-sandy-fur);
}

.BurgerMenuMobile-module--secondarynavwrapper--ac4d1 {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  min-width: 100%;
  height: 100%;
  margin-inline-start: -50%;
  box-sizing: border-box;
  background-color: var(--c-white);
  z-index: var(--z-app-shell);
  border-block-start: 1px solid var(--c-mist);
}

.BurgerMenuMobile-module--secondarynavhidden--7734d {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

.BurgerMenuMobile-module--secondarynavlist--8b995 {
  position: relative;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
  max-height: 70vh;
  overflow: auto;
}

.BurgerMenuMobile-module--secondarytitle--a3da1 {
  display: flex;
  align-items: center;
  font-family: var(--font-family-heading);
  font-size: var(--t-heading-l);
  margin: var(--s-2);
}

.BurgerMenuMobile-module--secondarylink--2d033 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  list-style-type: none;
  margin: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-family);
  padding: var(--s-1);
  height: 62px;
}
.BurgerMenuMobile-module--secondarylink--2d033::before {
  display: none;
}
.BurgerMenuMobile-module--secondarylink--2d033 a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-size: var(--t-heading-m);
  line-height: var(--lh-heading-m);
}
.BurgerMenuMobile-module--secondarylink--2d033 a:hover {
  background-color: var(--c-sandy-fur);
}

.BurgerMenuMobile-module--secondarylinkactive--42c4f {
  background-color: var(--c-sandy-fur);
}

.BurgerMenuMobile-module--tertiarynavwrapper--47ec6 {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  inset-block-start: 0;
  inset-inline-start: 0;
  min-width: 100%;
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--c-white);
  z-index: 3;
  border-block-start: 1px solid var(--c-mist);
}

.BurgerMenuMobile-module--tertiarynavlist--0945a {
  position: relative;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-height: 70vh;
  width: 100%;
  background-color: var(--c-white);
  overflow: auto;
}

.BurgerMenuMobile-module--tertiarylink--13276 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  list-style-type: none;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-family);
  padding: var(--s-1);
  min-height: unset;
}
.BurgerMenuMobile-module--tertiarylink--13276::before {
  display: none;
}
.BurgerMenuMobile-module--tertiarylink--13276 a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-size: var(--t-heading-m);
  line-height: var(--lh-heading-m);
}
.BurgerMenuMobile-module--tertiarylink--13276 a:hover {
  background-color: var(--c-sandy-fur);
}

.BurgerMenuMobile-module--backarrow--77752 {
  margin-inline-end: var(--s-1);
}
.BurgerMenuMobile-module--backarrow--77752:focus {
  outline: 1px;
}

.BurgerMenuMobile-module--subMenuNavArrows--c0d94 {
  position: relative;
  background: unset;
  border: unset;
  padding: unset;
  /* This is overriding the withSafeRotate inline-block */
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.HeaderTablet-module--headerouter--02a66 {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: auto;
  margin: 0;
  z-index: var(--z-header);
  background-color: var(--c-white);
}

.HeaderTablet-module--headerinner--bf8c1 {
  position: relative;
  width: 100%;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.04);
  height: auto;
  max-width: calc(100% - var(--s-4));
}

.HeaderTablet-module--content--9f19f {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: var(--s-1) 0;
  min-height: 106px;
}

.HeaderTablet-module--contentrightwrapper--36aa0 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: var(--s-2) 0;
}

.HeaderTablet-module--controlswrapper--31819 {
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
  align-items: center;
  /* 480px */
  width: calc(var(--s-1) * 60);
  height: 100%;
}

.HeaderTablet-module--logowrappertop--22194 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 101;
  color: white;
  font-size: 1px;
  line-height: 1px;
  overflow: hidden;
}

.HeaderTablet-module--searchboxwrapper--ade7e {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  margin-inline-end: var(--s-1);
}
.HeaderTablet-module--searchboxwrapper--ade7e .HeaderTablet-module--searchbox--d92d4 {
  height: var(--s-5);
  min-height: var(--s-5);
  /* 200px */
  width: calc(var(--s-1) * 25);
  border-radius: var(--s-3);
  padding-inline-start: var(--s-2);
  border: 2px solid var(--c-black);
  box-shadow: none;
  margin: 0;
  font-weight: 600;
  font-size: var(--t-body-s);
}

.HeaderTablet-module--donatewrapper--8a3ea {
  display: flex;
  justify-content: center;
  width: auto;
  height: 100%;
  /* 120px */
  width: calc(var(--s-1) * 15);
}

.HeaderTablet-module--burgerwrapper--ba49f {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--s-7);
  min-height: var(--s-5);
  cursor: pointer;
  /** Hide the default button formatting **/
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  /** End hide the default button formatting **/
}

.HeaderTablet-module--accountwrapper--7d9e3 {
  display: flex;
  justify-content: center;
  width: auto;
  height: 100%;
  margin-inline-end: 6px;
}

.HeaderTablet-module--favs--82add {
  display: flex;
  justify-content: center;
  width: auto;
  height: 100%;
  position: relative;
  margin-inline-end: var(--s-2);
}

.HeaderTablet-module--basket--a2feb {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--s-4);
  height: var(--s-4);
  margin-inline-end: var(--s-2);
  height: 100%;
  cursor: pointer;
  color: var(--c-black);
}
.HeaderTablet-module--basket--a2feb:visited {
  color: var(--c-black);
}

.HeaderTablet-module--burgerContainer--05ecd {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--s-6);
  height: auto;
}

.HeaderTablet-module--bar--933b1 {
  width: 21px;
  border-width: 1px;
  border-color: var(--c-midnight);
  border-style: solid;
  border-radius: 2px;
  background: var(--c-midnight);
}
.HeaderTablet-module--bar--933b1.HeaderTablet-module--bar2--a8c4f, .HeaderTablet-module--bar--933b1.HeaderTablet-module--bar3--16ed0 {
  margin-block-start: 5px;
}

.HeaderTablet-module--burgerContainer--05ecd.HeaderTablet-module--opened--d49a9 .HeaderTablet-module--bar--933b1 {
  width: 27px;
}
.HeaderTablet-module--burgerContainer--05ecd.HeaderTablet-module--opened--d49a9 .HeaderTablet-module--bar1--e4ee8 {
  transform: translate(0, 3px) rotate(45deg);
}
.HeaderTablet-module--burgerContainer--05ecd.HeaderTablet-module--opened--d49a9 .HeaderTablet-module--bar2--a8c4f {
  display: none;
}
.HeaderTablet-module--burgerContainer--05ecd.HeaderTablet-module--opened--d49a9 .HeaderTablet-module--bar3--16ed0 {
  transform: translate(0, -4px) rotate(-45deg);
}

@keyframes HeaderTablet-module--slideUp--8a1cd {
  0% {
    /* -104px */
    inset-block-end: calc(var(--s-1) * -13);
  }
  100% {
    inset-block-end: var(--s-4);
  }
}
.HeaderTablet-module--backtotop--64506 {
  position: fixed;
  inset-block-end: var(--s-4);
  inset-inline-end: var(--s-4);
  z-index: 101;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-white);
  box-shadow: var(--sh-box-outer-dark);
  cursor: pointer;
  animation: HeaderTablet-module--slideUp--8a1cd 0.5s forwards;
  -webkit-animation: HeaderTablet-module--slideUp--8a1cd 0.5s forwards;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.BurgerMenuTablet-module--burgermenuhidden--6aeaf {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}

.BurgerMenuTablet-module--burgermenucontainer--e0533 {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: var(--c-white);
  max-height: 100%;
  width: 100%;
  border: 1px solid var(--c-mist);
  box-shadow: var(--sh-box-light);
  box-sizing: border-box;
  z-index: var(--z-dropdown);
  visibility: visible;
  overflow: hidden;
  overflow-y: auto;
}

.BurgerMenuTablet-module--primarynavlist--b53c4 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 50%;
}

.BurgerMenuTablet-module--primarylink--43ed7 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  list-style-type: none;
  margin: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-family-heading);
  padding: var(--s-2);
}
.BurgerMenuTablet-module--primarylink--43ed7::before {
  display: none;
}
.BurgerMenuTablet-module--primarylink--43ed7 a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-size: var(--t-heading-l);
  line-height: var(--lh-heading-l);
}
.BurgerMenuTablet-module--primarylink--43ed7 a:hover {
  background-color: var(--c-sandy-fur);
}

.BurgerMenuTablet-module--primarylinkactive--5538a {
  background-color: var(--c-sandy-fur);
}

.BurgerMenuTablet-module--secondarynavwrapper--b50f1 {
  position: fixed;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  width: 50%;
  inset-inline-start: 50%;
  background-color: var(--c-white);
  z-index: var(--z-app-shell);
  border-block-start: 1px solid var(--c-mist);
  overflow: auto;
}

.BurgerMenuTablet-module--secondarynavhidden--178b2 {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

.BurgerMenuTablet-module--secondarynavlistwrapper--716cc {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.BurgerMenuTablet-module--secondarynavlist--e6839 {
  position: relative;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--c-white);
  overflow-y: auto;
}

.BurgerMenuTablet-module--secondarytitle--2c4e9 {
  position: relative;
  font-family: var(--font-family-heading);
  font-size: var(--t-heading-l);
  margin: var(--s-2);
  height: 42px;
}

.BurgerMenuTablet-module--secondarylink--eaf1d {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  list-style-type: none;
  margin: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-family);
  padding: var(--s-2);
}
.BurgerMenuTablet-module--secondarylink--eaf1d::before {
  display: none;
}
.BurgerMenuTablet-module--secondarylink--eaf1d a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-size: var(--t-heading-l);
  line-height: var(--lh-heading-l);
}
.BurgerMenuTablet-module--secondarylink--eaf1d a:hover {
  background-color: var(--c-sandy-fur);
}

.BurgerMenuTablet-module--secondarylinkactive--4a38d {
  background-color: var(--c-sandy-fur);
}

.BurgerMenuTablet-module--tertiarynavwrapper--9f692 {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  inset-inline-start: 50%;
  background-color: var(--c-white);
  z-index: 3;
  border-block-start: 1px solid var(--c-mist);
  overflow: hidden;
  max-height: calc(100% - 140px);
}

.BurgerMenuTablet-module--promocardsnotertiary--613b1 {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  height: 100%;
  max-width: 50%;
  width: 50%;
  padding: var(--s-1);
  box-sizing: border-box;
  background-color: var(--c-pampas);
  /* 400px */
  min-height: calc(var(--s-1) * 50);
}

.BurgerMenuTablet-module--tertiarynavlist--17fa7 {
  position: relative;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--c-white);
  overflow: auto;
  max-height: calc(100% - 140px);
}

.BurgerMenuTablet-module--tertiarylink--69ffb {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  list-style-type: none;
  margin: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-family);
  padding: var(--s-2);
  margin-block-end: var(--s-1);
}
.BurgerMenuTablet-module--tertiarylink--69ffb::before {
  display: none;
}
.BurgerMenuTablet-module--tertiarylink--69ffb a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  font-size: var(--t-heading-l);
  line-height: var(--lh-heading-l);
}
.BurgerMenuTablet-module--tertiarylink--69ffb a:hover {
  background-color: var(--c-sandy-fur);
}

.BurgerMenuTablet-module--subMenuNavArrows--8d23a {
  position: relative;
  background: unset;
  border: unset;
  padding: unset;
  /* This is overriding the withSafeRotate inline-block */
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.HeaderMinimal-module--headerouter--24d32 {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: auto;
  margin: 0;
  z-index: var(--z-header);
  background-color: var(--c-white);
}

.HeaderMinimal-module--headerinner--56a9d {
  position: relative;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 37.5rem) {
  .HeaderMinimal-module--headerinner--56a9d {
    max-width: 728px;
  }
}
@media screen and (min-width: 64rem) {
  .HeaderMinimal-module--headerinner--56a9d {
    max-width: 90rem;
    box-shadow: var(--sh-box-light);
  }
}

.HeaderMinimal-module--content--f1c72 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: var(--s-1) 0;
  /* 48px */
  min-height: calc(var(--s-1) * 6);
}
@media screen and (min-width: 37.5rem) {
  .HeaderMinimal-module--content--f1c72 {
    min-height: 106px;
  }
}
@media screen and (min-width: 64rem) {
  .HeaderMinimal-module--content--f1c72 {
    padding: var(--s-1) var(--s-2);
  }
}

.HeaderMinimal-module--logowrappertop--d82fd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 101;
  margin-inline-start: var(--s-2);
}
@media screen and (min-width: 37.5rem) {
  .HeaderMinimal-module--logowrappertop--d82fd {
    margin-left: 0;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.Pagination-module--paginationwrapper--a162e {
  position: fixed;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 90rem;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: 0 auto;
  z-index: var(--z-modal);
  pointer-events: none;
}

.Pagination-module--paginationcontainer--f7aa1 {
  position: absolute;
  inset-block-end: 0;
  /* 320px */
  width: calc(var(--s-1) * 40);
  /* 104px */
  height: calc(var(--s-1) * 13);
  background-color: var(--c-sunshine-yellow);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-top-left-radius: var(--s-4);
  box-shadow: var(--sh-box-card-hover);
  padding: 0 var(--s-1);
  box-sizing: border-box;
}
@media screen and (max-width: 37.5rem) {
  .Pagination-module--paginationcontainer--f7aa1 {
    margin: 0;
    inset-inline-end: 0;
  }
}

.Pagination-module--paginationcontainerhidden--260a6 {
  /* -104px */
  inset-block-end: calc(var(--s-1) * -13);
}

.Pagination-module--paginationtoggletab--9acd4 {
  position: absolute;
  /* 112px */
  width: calc(var(--s-1) * 14);
  height: var(--s-5);
  background-color: var(--c-sunshine-yellow);
  border-top-left-radius: var(--s-4);
  border-top-right-radius: var(--s-4);
  inset-block-start: calc(var(--s-5) * -1);
  inset-inline-end: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  line-height: var(--lh-body-xs);
  cursor: pointer;
}
.Pagination-module--paginationtoggletab--9acd4:hover {
  text-decoration-style: solid;
}
.Pagination-module--paginationtoggletab--9acd4 {
  box-shadow: var(--sh-box-card);
  /** Used to remove the box-shadow on the connecting edge **/
  clip-path: inset(-5px -5px 0 -5px);
  pointer-events: all;
  border: none;
}

.Pagination-module--pagination--7eadc {
  position: relative;
  width: 100%;
  display: flex;
  margin-block-start: var(--s-2);
  justify-content: space-evenly;
  align-items: center;
  pointer-events: all;
}

.Pagination-module--paginationtext--015bc {
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-midnight);
  line-height: var(--lh-body-xs);
  font-size: var(--t-body-s);
  width: var(--s-10);
  display: flex;
  justify-content: center;
}

.Pagination-module--paginationlink--5ffe5 {
  margin-block-start: var(--s-1);
  margin-block-end: var(--s-2);
  font-weight: 600;
  pointer-events: all;
}

.Pagination-module--basebutton--a3add {
  border-radius: var(--s-4);
  height: var(--s-5);
  /* 104px */
  min-width: calc(var(--s-1) * 13);
  /* 104px */
  max-width: calc(var(--s-1) * 13);
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 600;
  align-items: center;
  text-decoration: none !important;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  cursor: pointer;
}

.Pagination-module--disabled--1721c {
  opacity: 0.4;
  border: 2px solid var(--c-midnight);
  background-color: var(--c-white);
  color: var(--c-dawn);
  cursor: default;
}

.Pagination-module--previous--f7731 {
  border: 2px solid var(--c-black);
  background-color: transparent;
  color: var(--c-midnight);
}
.Pagination-module--previous--f7731:hover, .Pagination-module--previous--f7731:focus {
  box-shadow: inset 2px 2px 100 100 rgba(126, 126, 126, 0.2);
}

.Pagination-module--next--ed6bd {
  border: 2px solid var(--c-midnight);
  background-color: var(--c-midnight);
}
.Pagination-module--next--ed6bd a {
  /** Overriding Gatsby Link styles **/
  color: var(--c-white) !important;
}
.Pagination-module--next--ed6bd:disabled {
  opacity: 0.4;
  border: 2px solid var(--c-midnight);
  background-color: var(--c-midnight);
  color: var(--c-dawn);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MyAccountManagePage-module--titleWrapper--a21a2 {
  max-width: 56rem;
  margin: auto;
}

.MyAccountManagePage-module--container--75003 {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
}

.MyAccountManagePage-module--cardscontainer--c0293 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  margin-block-end: 42px;
  margin-block-start: 42px;
  row-gap: var(--s-2);
}
@media (min-width: 64rem) {
  .MyAccountManagePage-module--cardscontainer--c0293 {
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    column-gap: var(--s-2);
  }
}

.MyAccountManagePage-module--button--bf01b {
  box-sizing: border-box;
  border-radius: var(--s-4);
  padding-inline-end: var(--s-2);
  padding-inline-start: var(--s-2);
  width: auto;
  height: var(--s-6);
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 600;
  align-items: center;
  text-decoration: none !important;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border: 2px solid var(--c-midnight);
  background-color: var(--c-midnight);
  color: var(--c-white);
}
.MyAccountManagePage-module--button--bf01b:hover {
  cursor: pointer;
}
.MyAccountManagePage-module--button--bf01b:disabled {
  opacity: 0.4;
  border: 2px solid var(--c-midnight);
  background-color: var(--c-midnight);
  color: var(--c-dawn);
}
.MyAccountManagePage-module--button--bf01b:hover, .MyAccountManagePage-module--button--bf01b:focus {
  box-shadow: inset 2px 2px 100px 100px rgba(255, 255, 255, 0.15);
}

.MyAccountManagePage-module--buttonSpacing--80a33 {
  margin-block-start: 42px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MyAccountFavouritesPage-module--titleWrapper--4c419 {
  max-width: 56rem;
  margin: auto;
}
@media screen and (min-width: 37.5rem) {
  .MyAccountFavouritesPage-module--titleWrapper--4c419 {
    margin-inline-start: -28px;
    margin-inline-end: -28px;
  }
}
@media (min-width: 64rem) {
  .MyAccountFavouritesPage-module--titleWrapper--4c419 {
    margin: auto;
  }
}

.MyAccountFavouritesPage-module--container--ba855 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (min-width: 37.5rem) {
  .MyAccountFavouritesPage-module--container--ba855 {
    margin-inline-start: -28px;
    margin-inline-end: -28px;
  }
}
@media (min-width: 64rem) {
  .MyAccountFavouritesPage-module--container--ba855 {
    flex-direction: row;
    margin: auto;
  }
}

.MyAccountFavouritesPage-module--favslist--55833 {
  position: relative;
  width: 100%;
  max-width: 56rem;
}

.MyAccountFavouritesPage-module--favdogslistcontainer--3c662 {
  display: grid;
  gap: var(--s-2);
  margin-block: var(--s-2);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 37.5rem) {
  .MyAccountFavouritesPage-module--favdogslistcontainer--3c662 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 64rem) {
  .MyAccountFavouritesPage-module--favdogslistcontainer--3c662 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MyAccountPage-module--dashboardCardWrapper--e7f07 {
  max-width: 56rem;
  margin-inline: auto;
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
  .MyAccountPage-module--dashboardCardWrapper--e7f07 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.MyAccountPage-module--titleWrapper--3da20 {
  max-width: 56rem;
  margin-block-start: var(--s-2);
}
@media (min-width: 64rem) {
  .MyAccountPage-module--titleWrapper--3da20 {
    margin-inline: auto;
  }
}

.MyAccountPage-module--title--001d5 {
  margin-block-end: var(--s-2);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.MyAccountRehomingPage-module--titleWrapper--1faa3 {
  max-width: 56rem;
  margin: auto;
}

.MyAccountRehomingPage-module--title--4dc6d {
  font-size: var(--s-3);
}

.MyAccountRehomingPage-module--overview--ae0a1 p {
  margin-block-start: revertpx;
}
.MyAccountRehomingPage-module--overview--ae0a1 p a {
  font-weight: 700;
}
.MyAccountRehomingPage-module--overview--ae0a1 ul {
  list-style: none;
  /* Remove default bullets */
  padding: 0;
}
.MyAccountRehomingPage-module--overview--ae0a1 ul li::before {
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-sunshine-yellow);
  position: absolute;
  inset-inline-start: 5px;
  width: 12px;
  height: 12px;
  margin: auto;
  inset-block-start: var(--s-1);
}

.MyAccountRehomingPage-module--ctacontainer--186d4 {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-block-start: var(--s-5);
}
@media screen and (min-width: 37.5rem) {
  .MyAccountRehomingPage-module--ctacontainer--186d4 {
    align-items: flex-start;
    gap: var(--s-2);
  }
  .MyAccountRehomingPage-module--ctacontainer--186d4 p {
    margin: 0;
  }
}

.MyAccountRehomingPage-module--container--a5862 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
}
@media screen and (min-width: 37.5rem) {
  .MyAccountRehomingPage-module--container--a5862 {
    margin-inline-start: -28px;
    margin-inline-end: -28px;
  }
}
@media (min-width: 64rem) {
  .MyAccountRehomingPage-module--container--a5862 {
    flex-direction: row;
    margin: auto;
  }
}

.MyAccountRehomingPage-module--favslist--4d6a9,
.MyAccountRehomingPage-module--interesteddogs--5ac38 {
  position: relative;
  width: 100%;
  max-width: 56rem;
  margin-block-start: var(--s-5);
}
@media screen and (min-width: 64rem) {
  .MyAccountRehomingPage-module--favslist--4d6a9,
  .MyAccountRehomingPage-module--interesteddogs--5ac38 {
    /* 72px */
    margin-block-start: calc(var(--s-1) * 9);
  }
}

.MyAccountRehomingPage-module--interesteddogslist--b7f61 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  row-gap: var(--s-3);
  margin-block-start: var(--s-5);
}
@media only screen and (min-width: 37.5rem) {
  .MyAccountRehomingPage-module--interesteddogslist--b7f61 {
    justify-content: flex-start;
    gap: var(--s-3);
  }
}

.MyAccountRehomingPage-module--interestedspacer--3cf5c {
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  background-color: var(--c-white);
  border: dashed 2px #979797;
  border-radius: var(--s-1);
  /* 160px */
  width: calc(var(--s-1) * 20);
  min-height: 204px;
  overflow: hidden;
}
.MyAccountRehomingPage-module--interestedspacer--3cf5c p {
  font-family: var(--font-family-heading);
  color: #979797;
  margin: 0;
  font-weight: 700;
  line-height: normal !important;
}
@media only screen and (min-width: 37.5rem) {
  .MyAccountRehomingPage-module--interestedspacer--3cf5c {
    width: 106px;
    min-height: 142px;
  }
}

.MyAccountRehomingPage-module--favdogslistcontainer--c2229 {
  display: grid;
  gap: var(--s-2);
  margin-block: var(--s-2);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 37.5rem) {
  .MyAccountRehomingPage-module--favdogslistcontainer--c2229 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 64rem) {
  .MyAccountRehomingPage-module--favdogslistcontainer--c2229 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.MyAccountRehomingPage-module--submittedapplications--19107 {
  position: relative;
  width: 100%;
  max-width: 56rem;
  margin-block-start: var(--s-4);
}
@media screen and (min-width: 64rem) {
  .MyAccountRehomingPage-module--submittedapplications--19107 {
    /* 72px */
    margin-block-start: calc(var(--s-1) * 9);
  }
}

.MyAccountRehomingPage-module--submittedapplication--b8d77 {
  margin-block-start: var(--s-2);
  display: flex;
  align-items: flex-start;
  width: var(--s-common-element-width-m);
}

.MyAccountRehomingPage-module--submittedapplicationtext--4567f {
  display: flex;
  flex-direction: column;
  margin-inline-start: var(--s-2);
}

.MyAccountRehomingPage-module--submittedapplicationstatus--1b539 {
  font-family: var(--font-family-heading);
  margin: 0;
  font-size: var(--t-heading-s);
  line-height: var(--lh-body-l);
}

.MyAccountRehomingPage-module--submittedapplicationdate--063b5 {
  margin: 0;
  line-height: var(--lh-body-l);
}

.MyAccountRehomingPage-module--circlecheckmark--f73e6 {
  position: relative;
  inset-block-start: var(--s-1);
  inset-inline-start: 0;
  width: var(--s-4);
  height: var(--s-4);
  background-color: var(--c-sunshine-yellow);
  color: var(--c-black);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-m-plus-1p-check);
  font-size: var(--t-heading-s);
}
@charset "UTF-8";
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.SimpleDogCard-module--cardcontainer--44ac6 {
  position: relative;
  background-color: var(--c-white);
  border-radius: var(--s-1);
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15);
  /* 160px */
  width: calc(var(--s-1) * 20);
  overflow: hidden;
}
@media only screen and (min-width: 37.5rem) {
  .SimpleDogCard-module--cardcontainer--44ac6 {
    width: 106px;
  }
}

.SimpleDogCard-module--cardcontaineryellow--c0d1e {
  background-color: var(--c-sunshine-yellow);
}

.SimpleDogCard-module--innercontainer--b2bf9 {
  overflow: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.SimpleDogCard-module--imagewrapper--e948e {
  position: relative;
  overflow: hidden;
  /* 160px */
  width: calc(var(--s-1) * 20);
  /* 160px */
  height: calc(var(--s-1) * 20);
}
@media only screen and (min-width: 37.5rem) {
  .SimpleDogCard-module--imagewrapper--e948e {
    width: 106px;
    height: 106px;
  }
}

.SimpleDogCard-module--remove--b63dd,
.SimpleDogCard-module--add--576f0 {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-end: 5px;
  z-index: var(--z-app-shell);
  display: flex;
  justify-content: flex-end;
}

.SimpleDogCard-module--removedog--7e9f0 {
  align-self: center;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  border: unset;
  background-color: var(--c-sunshine-yellow);
  cursor: pointer;
  padding: 0;
  color: var(--c-black);
}
.SimpleDogCard-module--removedog--7e9f0:before {
  font-size: var(--t-body-s);
  content: "✕";
  color: var(--c-black);
}

.SimpleDogCard-module--adddog--e106e {
  background-color: var(--c-white);
}
.SimpleDogCard-module--adddog--e106e:before {
  font-size: var(--t-heading-s);
  content: "+";
  color: var(--c-black);
  line-height: normal;
}

.SimpleDogCard-module--cardimg--8a778 {
  position: relative;
  /* 160px */
  height: calc(var(--s-1) * 20);
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}
@media only screen and (min-width: 37.5rem) {
  .SimpleDogCard-module--cardimg--8a778 {
    height: 106px;
  }
}

.SimpleDogCard-module--namewrapper--cfe9f {
  padding: 14px;
}
.SimpleDogCard-module--namewrapper--cfe9f p {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
}
@media only screen and (min-width: 37.5rem) {
  .SimpleDogCard-module--namewrapper--cfe9f {
    padding: var(--s-1);
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
@media (max-width: 64rem) {
  .MyAccountSADPage-module--titleWrapper--c7068,
  .MyAccountSADPage-module--container--13a32.MyAccountSADPage-module--noDogs--9c84b {
    width: 568px;
  }
}

.MyAccountSADPage-module--titleWrapper--c7068 {
  max-width: 56rem;
  margin-block-start: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
}
@media (max-width: 46.875rem) {
  .MyAccountSADPage-module--titleWrapper--c7068 {
    padding-left: unset;
    padding-inline-end: unsetpx;
    width: 100%;
  }
}

@media (max-width: 64rem) {
  .MyAccountSADPage-module--titleWrapper--c7068.MyAccountSADPage-module--dogs--aa373 {
    /* 752px */
    max-width: calc(var(--s-1) * 94);
    text-align: center;
    padding-inline-start: unsetpx;
    padding-inline-end: unsetpx;
  }
}
@media (max-width: 37.5rem) {
  .MyAccountSADPage-module--titleWrapper--c7068.MyAccountSADPage-module--dogs--aa373 {
    text-align: left;
    max-width: calc(100% - 2rem);
  }
}

.MyAccountSADPage-module--container--13a32 {
  display: flex;
  margin-block-start: 38px;
  max-width: 56rem;
  margin-inline-start: auto;
  margin-inline-end: auto;
}
@media (max-width: 46.875rem) {
  .MyAccountSADPage-module--container--13a32 {
    padding-left: unset;
    padding-inline-end: unsetpx;
  }
}
@media (max-width: 37.5rem) {
  .MyAccountSADPage-module--container--13a32 {
    margin-block-start: var(--s-4);
  }
}

@media (max-width: 64rem) {
  .MyAccountSADPage-module--container--13a32.MyAccountSADPage-module--noDogs--9c84b {
    flex-direction: column;
  }
}
@media (max-width: 46.875rem) {
  .MyAccountSADPage-module--container--13a32.MyAccountSADPage-module--noDogs--9c84b {
    width: 100%;
  }
}

.MyAccountSADPage-module--container--13a32.MyAccountSADPage-module--dogs--aa373 {
  position: relative;
  display: flex;
  flex-direction: column;
}

.MyAccountSADPage-module--basketList--13371 {
  position: relative;
  background-color: var(--c-white);
  min-width: 100%;
  display: grid;
  margin-block: var(--s-2);
  gap: var(--s-2);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 37.5rem) {
  .MyAccountSADPage-module--basketList--13371 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 64rem) {
  .MyAccountSADPage-module--basketList--13371 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.MyAccountSADPage-module--basketcta--8b26a {
  width: 100%;
  max-width: 325px;
  text-align: center;
  margin-block-start: var(--s-4);
}

.MyAccountSADPage-module--basketcta--8b26a.MyAccountSADPage-module--continuecta--b69b1 {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.MyAccountSADPage-module--noDogsCopy--09562,
.MyAccountSADPage-module--noDogsImage--f2523 {
  width: 50%;
}
@media (max-width: 64rem) {
  .MyAccountSADPage-module--noDogsCopy--09562,
  .MyAccountSADPage-module--noDogsImage--f2523 {
    width: 100%;
  }
}

.MyAccountSADPage-module--noDogsTitle--2220e {
  font-size: var(--t-body-l);
}

.MyAccountSADPage-module--noDogsImage--f2523 {
  text-align: center;
}
@media (max-width: 64rem) {
  .MyAccountSADPage-module--noDogsImage--f2523 {
    margin-block-start: var(--s-6);
  }
}
@media (max-width: 37.5rem) {
  .MyAccountSADPage-module--noDogsImage--f2523 .MyAccountSADPage-module--image--b790e {
    width: 70%;
    height: auto;
  }
}
.MyBasketPage-module--doglimitwarning--8dad0 {
  height: var(--s-5);
  background-color: var(--c-black);
  color: var(--c-white);
  width: 100%;
  font-family: var(--font-family);
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.MyBasketPage-module--title--bbfeb {
  background-color: var(--c-sunshine-yellow);
  width: 100%;
  margin: var(--s-2);
  border-top-left-radius: var(--s-2);
  border-top-right-radius: var(--s-2);
  padding: var(--s-1);
  padding-inline-start: var(--s-4);
  box-sizing: border-box;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
}

.MyBasketPage-module--basketlist--cbf6e {
  background-color: var(--c-white);
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.FavouritesPage-module--favouritessection--8c362 {
  width: 100%;
}

.FavouritesPage-module--intro--807e5 {
  background-color: var(--c-sunshine-yellow);
  width: 100%;
}

.FavouritesPage-module--introinner--bcbe2 {
  width: calc(100% - var(--s-4));
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: var(--s-2);
  padding-inline-end: var(--s-2);
  padding-block-start: var(--s-2);
  max-width: 56rem;
}
@media screen and (min-width: 37.5rem) {
  .FavouritesPage-module--introinner--bcbe2 {
    padding-block-start: var(--s-4);
  }
}
@media screen and (min-width: 64rem) {
  .FavouritesPage-module--introinner--bcbe2 {
    padding-block-start: var(--s-6);
    padding-block-end: var(--s-6);
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
}

.FavouritesPage-module--accountctas--a3d33 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.FavouritesPage-module--image--aa210 {
  display: none;
}
@media screen and (min-width: 64rem) {
  .FavouritesPage-module--image--aa210 {
    display: flex;
    align-items: flex-end;
    margin-block-end: calc(-1 * var(--s-6));
  }
}

.FavouritesPage-module--subtitle--3ed92 {
  font-size: var(--t-body-l);
}

.FavouritesPage-module--maincontent--2db81 {
  width: 100%;
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: var(--s-1);
  padding-inline-end: var(--s-1);
  padding-block-start: var(--s-2);
  padding-block-end: var(--s-2);
  max-width: 56rem;
}
@media screen and (min-width: 37.5rem) {
  .FavouritesPage-module--maincontent--2db81 {
    padding-block-start: var(--s-4);
    padding-block-end: var(--s-4);
    padding-inline-start: var(--s-2);
    padding-inline-end: var(--s-2);
  }
}
@media screen and (min-width: 64rem) {
  .FavouritesPage-module--maincontent--2db81 {
    padding-block-start: var(--s-6);
    padding-block-end: var(--s-6);
    padding-inline-start: var(--s-2);
    padding-inline-end: var(--s-2);
  }
}

.FavouritesPage-module--favdogslistcontainer--86b94 {
  display: grid;
  gap: var(--s-2);
  margin-block: var(--s-2);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 37.5rem) {
  .FavouritesPage-module--favdogslistcontainer--86b94 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 64rem) {
  .FavouritesPage-module--favdogslistcontainer--86b94 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.FavouritesPage-module--layoutshiftblock--44544 {
  min-height: 215px;
}
@media screen and (min-width: 37.5rem) {
  .FavouritesPage-module--layoutshiftblock--44544 {
    /* 504px */
    min-height: calc(var(--s-1) * 63);
  }
}
@media screen and (min-width: 75rem) {
  .FavouritesPage-module--layoutshiftblock--44544 {
    min-height: 525px;
  }
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.ArticlePage-module--contentarea--0d265 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}

.ArticlePage-module--metawrapper--fda35 {
  margin: 0 auto;
  width: 100%;
  max-width: 56.25rem;
}

.ArticlePage-module--relatedwrapper--52819 {
  width: 90%;
  margin: 0 auto;
  max-width: 56.25rem;
}
@media only screen and (min-width: 37.5rem) {
  .ArticlePage-module--relatedwrapper--52819 {
    width: 100%;
  }
}
.ArticlePage-module--relatedwrapper--52819 > div:first-child {
  width: 100%;
}

.ArticlePage-module--authorGroup--4f74f {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 64rem;
  margin: var(--s-4) auto;
  padding-inline: var(--s-4);
}
@media only screen and (min-width: 64rem) {
  .ArticlePage-module--authorGroup--4f74f {
    padding-inline: var(--s-2);
  }
}
.ArticlePage-module--authorGroup--4f74f .ArticlePage-module--authorGroupContent--0d06a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-2);
  background-color: var(--c-oatmeal-light);
  border-radius: var(--s-border-radius-s);
  flex-wrap: wrap;
  max-width: 100%;
}
.ArticlePage-module--authorGroup--4f74f .ArticlePage-module--detailssectionitem--74c35 {
  margin: 0;
}
.ArticlePage-module--authorGroup--4f74f .ArticlePage-module--detailssectionitem--74c35 .ArticlePage-module--contenttext--32ec4 {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  font-size: var(--t-body-m);
  font-weight: 400;
  color: var(--c-text-primary);
}
.ArticlePage-module--authorGroup--4f74f .ArticlePage-module--detailssectionitem--74c35 .ArticlePage-module--contenttext--32ec4 svg {
  flex-shrink: 0;
  color: var(--c-text-primary);
}
.ArticlePage-module--authorGroup--4f74f .ArticlePage-module--authorGroupLink--df393 {
  color: var(--c-text-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-body-m);
}
.ArticlePage-module--authorGroup--4f74f .ArticlePage-module--authorGroupLink--df393 a {
  line-height: var(--lh-body-m);
  text-decoration-line: underline !important;
  text-decoration-style: dotted !important;
  text-decoration-thickness: 1px !important;
  text-underline-position: under !important;
}
.ArticlePage-module--authorGroup--4f74f .ArticlePage-module--authorGroupLink--df393:hover {
  border-bottom: 1px solid var(--c-text-primary);
}
.ArticlePage-module--authorGroup--4f74f .ArticlePage-module--authorGroupLink--df393:focus {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.AuthorPage-module--contentarea--fc258 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}

.AuthorPage-module--metawrapper--3ab89 {
  margin: 0 auto;
  width: 100%;
  max-width: 56.25rem;
}

.AuthorPage-module--relatedwrapper--36677 {
  width: 90%;
  margin: 0 auto;
  max-width: 56.25rem;
}
@media only screen and (min-width: 37.5rem) {
  .AuthorPage-module--relatedwrapper--36677 {
    width: 100%;
  }
}
.AuthorPage-module--relatedwrapper--36677 > div:first-child {
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.CharityShopKeyDetails-module--charityshopdetailscolumninner--5aa9e {
  position: relative;
  height: 100%;
  max-width: 64rem;
  margin-inline: auto;
}
@media (max-width: 64rem) {
  .CharityShopKeyDetails-module--charityshopdetailscolumninner--5aa9e {
    margin-block-end: var(--s-4);
  }
}

.CharityShopKeyDetails-module--heading--6e5dd {
  width: calc(100% - 32px);
  padding-inline-start: var(--s-4);
}
.CharityShopKeyDetails-module--heading--6e5dd .CharityShopKeyDetails-module--headinglabel--0ab38 {
  font-size: var(--s-3);
  line-height: var(--lh-body-l);
}
@media (min-width: 64rem) {
  .CharityShopKeyDetails-module--heading--6e5dd .CharityShopKeyDetails-module--headinglabel--0ab38 {
    font-size: var(--s-4);
    line-height: var(--lh-body-xl);
  }
}

.CharityShopKeyDetails-module--allcontent--d945b {
  width: 100%;
  margin: var(--s-2) 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: start;
  flex-wrap: wrap;
  padding-block-end: var(--s-5);
  box-sizing: border-box;
}
@media (min-width: 37.5rem) {
  .CharityShopKeyDetails-module--allcontent--d945b {
    justify-content: space-evenly;
  }
}

.CharityShopKeyDetails-module--itemsingle--32d8a {
  background-color: var(--c-white);
  width: 100%;
  border-radius: var(--s-1);
  margin: var(--s-2);
  padding: 0 var(--s-2) var(--s-2) 0;
  box-sizing: border-box;
}
@media (min-width: 37.5rem) {
  .CharityShopKeyDetails-module--itemsingle--32d8a {
    padding: 0;
    /* 264px */
    height: calc(var(--s-1) * 33);
    margin: 0;
    width: 47%;
  }
}
@media (min-width: 64rem) {
  .CharityShopKeyDetails-module--itemsingle--32d8a {
    width: 30%;
  }
}
.CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--s-2) var(--s-1);
  gap: var(--s-1);
  box-sizing: border-box;
}
.CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 .CharityShopKeyDetails-module--itemrow--6c318 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--iconcolumn--1f514 {
  display: flex;
  justify-content: center;
  padding-block-start: var(--s-3);
  box-sizing: border-box;
  width: var(--s-8);
  height: 100%;
}
@media (min-width: 64rem) {
  .CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--iconcolumn--1f514 {
    width: var(--s-5);
    padding-block-start: 0;
  }
}
.CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--contentcolumn--cd589 {
  width: 100%;
  height: 100%;
}
.CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--contentcolumn--cd589 .CharityShopKeyDetails-module--contenttitle--ea291 {
  font-family: var(--font-family);
  font-weight: 500;
  width: 100%;
  padding: 0;
}
@media (min-width: 64rem) {
  .CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--contentcolumn--cd589 .CharityShopKeyDetails-module--contenttitle--ea291 {
    padding-block-start: 0;
  }
}
.CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--contentcolumn--cd589 address {
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-dawn);
  font-style: normal;
  padding: 0;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-s);
}
.CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--contentcolumn--cd589 {
  font-style: normal;
  padding: 0 var(--s-1);
}
.CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--contenttext--9039a {
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-dawn);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xs);
}
@media (min-width: 25.875rem) {
  .CharityShopKeyDetails-module--itemsingle--32d8a .CharityShopKeyDetails-module--itemcontent--64976 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--contenttext--9039a {
    line-height: var(--lh-body-s);
    padding: 0 var(--s-1);
  }
}

.CharityShopKeyDetails-module--itemdouble--85913 {
  background-color: var(--c-white);
  width: 100%;
  border-radius: var(--s-1);
  margin: var(--s-2);
}
@media (min-width: 37.5rem) {
  .CharityShopKeyDetails-module--itemdouble--85913 {
    /* 264px */
    height: calc(var(--s-1) * 33);
    margin: var(--s-2) 0;
    width: 96%;
  }
}
@media (min-width: 64rem) {
  .CharityShopKeyDetails-module--itemdouble--85913 {
    margin: 0;
    width: 30%;
  }
}
.CharityShopKeyDetails-module--itemdouble--85913 {
  display: flex;
  flex-direction: column;
  padding: var(--s-2);
  padding-inline-start: 0;
  box-sizing: border-box;
}
@media (min-width: 64rem) {
  .CharityShopKeyDetails-module--itemdouble--85913 {
    padding: var(--s-2) var(--s-2) 0 0;
  }
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
@media (min-width: 37.5rem) {
  .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 {
    height: 100%;
    flex-wrap: nowrap;
  }
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 {
  position: relative;
  padding: var(--s-1) 0;
  box-sizing: border-box;
  height: 50%;
  width: 100%;
}
@media (min-width: 64rem) {
  .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 {
    padding: 0 var(--s-1);
  }
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--itemtitle--2160c, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--itemtitle--2160c {
  font-family: var(--font-family);
  font-weight: 500;
  margin-inline-start: var(--s-3);
  margin-left: var(--s-8);
  padding-block-start: var(--s-2);
  padding-block-end: var(--s-2);
  box-sizing: border-box;
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contact--d687b, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contact--d687b {
  display: flex;
  height: var(--s-5);
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contact--d687b .CharityShopKeyDetails-module--contenttitle--ea291, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contact--d687b .CharityShopKeyDetails-module--contenttitle--ea291 {
  font-family: var(--font-family);
  font-weight: 500;
  width: 100%;
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contact--d687b .CharityShopKeyDetails-module--icon--ba439, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contact--d687b .CharityShopKeyDetails-module--icon--ba439 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--s-8);
  padding: 0 var(--s-2);
  box-sizing: border-box;
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contact--d687b .CharityShopKeyDetails-module--link--8d786 a, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contact--d687b .CharityShopKeyDetails-module--link--8d786 a {
  color: var(--c-dawn);
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contact--d687b .CharityShopKeyDetails-module--link--8d786, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contact--d687b .CharityShopKeyDetails-module--link--8d786 {
  box-sizing: border-box;
  width: 100%;
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contactemail--3f404, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contactemail--3f404 {
  display: flex;
  height: var(--s-5);
  margin-block-start: var(--s-2);
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contactemail--3f404 .CharityShopKeyDetails-module--icon--ba439, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contactemail--3f404 .CharityShopKeyDetails-module--icon--ba439 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--s-8);
  padding: 0 var(--s-2);
  box-sizing: border-box;
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contactemail--3f404 .CharityShopKeyDetails-module--link--8d786 a, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contactemail--3f404 .CharityShopKeyDetails-module--link--8d786 a {
  color: var(--c-dawn);
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contactemail--3f404 .CharityShopKeyDetails-module--link--8d786, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contactemail--3f404 .CharityShopKeyDetails-module--link--8d786 {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  word-break: break-word;
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contacttext--2a1b4, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contacttext--2a1b4 {
  padding: 0;
  margin-inline-start: var(--s-8);
}
@media (min-width: 37.5rem) {
  .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contacttext--2a1b4, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contacttext--2a1b4 {
    padding: 0 var(--s-1);
    margin-inline-start: 0;
  }
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--contacttext--2a1b4 p, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--contacttext--2a1b4 p {
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-dawn);
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--socialmedialinks--ccbde, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--socialmedialinks--ccbde {
  width: 100%;
  box-sizing: border-box;
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumn--1b631 .CharityShopKeyDetails-module--socialmedialinks--ccbde .CharityShopKeyDetails-module--socmedicons--b3828, .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 .CharityShopKeyDetails-module--socialmedialinks--ccbde .CharityShopKeyDetails-module--socmedicons--b3828 {
  margin-block-start: calc(var(--s-2) * -1);
  margin-inline-start: var(--s-8);
  width: 100%;
  justify-content: flex-start;
}
.CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 {
  display: none;
}
@media (min-width: 37.5rem) {
  .CharityShopKeyDetails-module--itemdouble--85913 .CharityShopKeyDetails-module--itemrow--6c318 .CharityShopKeyDetails-module--itemcolumnblank--314a5 {
    display: flex;
  }
}

.CharityShopKeyDetails-module--googlemaps--4ba79 {
  font-family: var(--font-family);
  color: var(--c-midnight);
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  /* 8px * 2.25 = 18px*/
  line-height: calc(var(--s-1) * 2.25);
  cursor: pointer;
}
.CharityShopKeyDetails-module--googlemaps--4ba79:hover {
  text-decoration-style: solid;
  background-color: var(--c-midnight-16pc-opacity);
}
.CharityShopKeyDetails-module--googlemaps--4ba79:active {
  text-decoration-style: dotted;
  background-color: var(--c-midnight-16pc-opacity);
}
.CharityShopKeyDetails-module--googlemaps--4ba79:visited {
  text-decoration-style: solid;
}
.CharityShopKeyDetails-module--googlemaps--4ba79 {
  color: var(--c-dawn);
  font-weight: 600;
}

.CharityShopKeyDetails-module--bordersection--70a80 {
  position: relative;
  display: flex;
  width: 100%;
  background-color: var(--c-sandy-fur);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
}
.CharityShopKeyDetails-module--bordersection--70a80 .CharityShopKeyDetails-module--borderbottom--452ae {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  z-index: var(--z-app-shell);
  pointer-events: none;
}
@media (min-width: 37.5rem) {
  .CharityShopKeyDetails-module--bordersection--70a80 .CharityShopKeyDetails-module--borderbottom--452ae {
    margin-block-start: calc(var(--s-6) * -1);
  }
}
.CharityShopKeyDetails-module--bordersection--70a80 .CharityShopKeyDetails-module--borderbottom--452ae svg {
  width: 100%;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.RehomingCentreKeyDetails-module--rehomingcentredetailscolumninner--f47f5 {
  position: relative;
  height: 100%;
  width: 100%;
}
@media (max-width: 64rem) {
  .RehomingCentreKeyDetails-module--rehomingcentredetailscolumninner--f47f5 {
    margin-block-end: var(--s-4);
  }
}

.RehomingCentreKeyDetails-module--titlewrapper--71d5f {
  width: 100%;
  margin-inline-start: var(--s-2);
}

.RehomingCentreKeyDetails-module--title--d3862 {
  font-size: var(--t-heading-s);
  line-height: var(--lh-heading-s);
}
@media (max-width: 64rem) {
  .RehomingCentreKeyDetails-module--title--d3862 {
    font-size: var(--t-heading-m);
    line-height: var(--lh-heading-m);
  }
}

.RehomingCentreKeyDetails-module--showmorebutton--14a92 {
  position: absolute;
  z-index: 3;
  inset-block-end: calc(var(--s-2) * -1);
  padding: var(--s-2);
  box-sizing: border-box;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
}
@media (min-width: 37.5rem) {
  .RehomingCentreKeyDetails-module--showmorebutton--14a92 {
    padding-block-start: 0;
  }
}

.RehomingCentreKeyDetails-module--bordersection--5ffb3 {
  position: relative;
  display: flex;
  width: 100%;
  background-color: var(--c-sunshine-yellow);
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
}
.RehomingCentreKeyDetails-module--bordersection--5ffb3 .RehomingCentreKeyDetails-module--borderbottom--dea64 {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  height: 100%;
  min-width: 100%;
  z-index: var(--z-app-shell);
  pointer-events: none;
  margin-block-end: -2px;
}
@media (min-width: 37.5rem) {
  .RehomingCentreKeyDetails-module--bordersection--5ffb3 .RehomingCentreKeyDetails-module--borderbottom--dea64 {
    margin-block-start: calc(var(--s-6) * -1);
  }
}
.RehomingCentreKeyDetails-module--bordersection--5ffb3 .RehomingCentreKeyDetails-module--borderbottom--dea64 svg {
  width: 100%;
}

.RehomingCentreKeyDetails-module--details--a4bcb {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--s-2);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 37.5rem) {
  .RehomingCentreKeyDetails-module--details--a4bcb {
    grid-template-columns: repeat(2, 50%);
  }
}
@media (min-width: 64rem) {
  .RehomingCentreKeyDetails-module--details--a4bcb {
    grid-template-columns: repeat(4, 16rem);
  }
}

.RehomingCentreKeyDetails-module--detailssection--129ff {
  width: 100%;
  position: relative;
  padding: var(--s-2);
  background-color: var(--c-white);
  border-radius: var(--s-2);
  display: flex;
  flex-direction: column;
}

.RehomingCentreKeyDetails-module--centreaddress--5ec2f {
  font-family: var(--font-family);
  color: var(--c-dawn);
  font-style: normal;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  font-weight: var(--fw-normal);
}
.RehomingCentreKeyDetails-module--centreaddress--5ec2f a {
  font-weight: var(--fw-bold);
}

.RehomingCentreKeyDetails-module--detailssectionitem--c84d2 {
  width: 100%;
  display: grid;
  grid-template-columns: var(--s-4) 1fr;
  grid-template-rows: auto;
}
.RehomingCentreKeyDetails-module--detailssectionitem--c84d2:last-child {
  margin-block-end: 0;
}

.RehomingCentreKeyDetails-module--contenttitle--e950b {
  font-family: var(--font-family);
  font-size: var(--t-heading-xs);
  line-height: var(--lh-body-xs);
}

.RehomingCentreKeyDetails-module--contenttext--03b5d {
  font-family: var(--font-family);
  color: var(--c-dawn);
  font-style: normal;
  font-size: var(--t-body-m);
  line-height: var(--lh-body-m);
  font-weight: var(--fw-normal);
}

.RehomingCentreKeyDetails-module--followus--777ad {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.RehomingCentreKeyDetails-module--itemtitle--ad9e0 {
  width: fit-content;
}

.RehomingCentreKeyDetails-module--socmedicons--efbff {
  padding: var(--s-1) 0;
  justify-content: flex-start;
  column-gap: var(--s-0-5);
  width: fit-content;
}
.FormStepPage-module--container--4a4cf {
  position: relative;
  min-height: calc(var(--s-1) * 75);
  /* 600px */
  width: 100%;
  background: var(--c-oatmeal-light);
  overflow: hidden;
}
.FormStepPage-module--container--4a4cf legend {
  opacity: 0;
}

.FormStepPage-module--formfield--ae940 {
  margin-block-end: var(--s-2);
  border: 1px solid black;
}

.FormStepPage-module--loadingcontainer--63092 {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.FormStepPage-module--errormodal--1c30c {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  /* 448px */
  max-width: calc(var(--s-1) * 56);
  height: 100%;
  /* 248px */
  max-height: calc(var(--s-1) * 31);
  border-radius: var(--s-0-5);
  background-color: var(--c-sandy-fur);
  padding: var(--s-4);
}

.FormStepPage-module--errortitle--a91e9 {
  font-size: var(--t-heading-s);
  font-family: var(--font-family-heading);
  font-weight: 600;
  color: var(--c-black);
  text-align: center;
}

.FormStepPage-module--errormessage--ebe90 {
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--c-black);
  text-align: center;
}

.FormStepPage-module--closebutton--d6a71 {
  border: none;
  background: none;
  padding: 0;
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
}
/*!
 * Bootstrap Reboot v4.5.2 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: var(--fw-bold);
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-block-start: 0.75rem;
  padding-block-end: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=radio],
input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.OurStoryPage-module--date--49173 {
  display: flex;
  justify-content: center;
  width: 100%;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.OurStoryPage-module--datetext--e6095 {
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--c-dawn);
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xs);
  /** Needs to match the width of our IntroWithImage image */
  width: 90%;
  padding: var(--s-1) 0 0;
}
@media (min-width: 25.875rem) {
  .OurStoryPage-module--datetext--e6095 {
    line-height: var(--lh-body-s);
  }
}
@media (min-width: 37.5rem) {
  .OurStoryPage-module--datetext--e6095 {
    padding: 0;
  }
}

.OurStoryPage-module--contentarea--21d6d {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--c-white);
}

.OurStoryPage-module--sharewrapper--d50ea {
  width: 100%;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
  padding: 0 var(--s-2);
  padding-block-start: var(--s-1);
  box-sizing: border-box;
  margin-block-end: var(--s-2);
  margin-inline-start: auto;
  margin-inline-end: auto;
}
@media only screen and (min-width: 37.5rem) {
  .OurStoryPage-module--sharewrapper--d50ea {
    padding: var(--s-1) 0 0 0;
    width: 75%;
  }
}
@media only screen and (min-width: 64rem) {
  .OurStoryPage-module--sharewrapper--d50ea {
    width: 65%;
  }
}

.OurStoryPage-module--metawrapper--55f2f {
  margin: 0 auto;
  width: 100%;
  /* 744px */
  max-width: calc(var(--s-1) * 93);
}

.OurStoryPage-module--relatedwrapper--f8e8b {
  width: 90%;
  margin: 0 auto;
}
@media only screen and (min-width: 37.5rem) {
  .OurStoryPage-module--relatedwrapper--f8e8b {
    width: 100%;
  }
}
.OurStoryPage-module--relatedwrapper--f8e8b > div:first-child {
  width: 100%;
}

.OurStoryPage-module--authorGroup--eb2ac {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 64rem;
  margin: var(--s-4) auto;
  padding-inline: var(--s-4);
}
@media only screen and (min-width: 64rem) {
  .OurStoryPage-module--authorGroup--eb2ac {
    padding-inline: var(--s-2);
  }
}
.OurStoryPage-module--authorGroup--eb2ac .OurStoryPage-module--authorGroupContent--b7306 {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-2);
  background-color: var(--c-oatmeal-light);
  border-radius: var(--s-border-radius-s);
  flex-wrap: wrap;
  max-width: 100%;
}
.OurStoryPage-module--authorGroup--eb2ac .OurStoryPage-module--detailssectionitem--1f36b {
  margin: 0;
}
.OurStoryPage-module--authorGroup--eb2ac .OurStoryPage-module--detailssectionitem--1f36b .OurStoryPage-module--contenttext--d3bed {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  font-size: var(--t-body-m);
  font-weight: 400;
  color: var(--c-text-primary);
}
.OurStoryPage-module--authorGroup--eb2ac .OurStoryPage-module--detailssectionitem--1f36b .OurStoryPage-module--contenttext--d3bed svg {
  flex-shrink: 0;
  color: var(--c-text-primary);
}
.OurStoryPage-module--authorGroup--eb2ac .OurStoryPage-module--authorGroupLink--74bd1 {
  color: var(--c-text-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-body-m);
}
.OurStoryPage-module--authorGroup--eb2ac .OurStoryPage-module--authorGroupLink--74bd1 a {
  line-height: var(--lh-body-m);
  text-decoration-line: underline !important;
  text-decoration-style: dotted !important;
  text-decoration-thickness: 1px !important;
  text-underline-position: under !important;
}
.OurStoryPage-module--authorGroup--eb2ac .OurStoryPage-module--authorGroupLink--74bd1:hover {
  border-bottom: 1px solid var(--c-text-primary);
}
.OurStoryPage-module--authorGroup--eb2ac .OurStoryPage-module--authorGroupLink--74bd1:focus {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
body {
  --s-cmp-checkbox: 0;
  --s-cmp-radiogroup-gap: 0;
  --c-cmp-radio-icon: var(--c-black);
  /* 48px */
  --s-cmp-dropmenu-item-height: calc(var(--s-1) * 6);
  --s-cmp-dropmenu-item-border-radius: 0;
  --c-cmp-dropmenu-item: var(--c-midnight);
  --c-cmp-dropmenu-item-highlight: var(--c-midnight);
  --c-cmp-dropmenu-item-highlight-bg: var(--c-brand-primary);
  --s-cmp-dropmenu-border-radius: var(--s-border-radius-s);
  --s-cmp-padding: 0;
  --sh-box-l: none;
  --s-cmp-tooltip-padding: var(--s-1) 0;
}

.FormBuilder-module--form--ccb7a div[role=alert] {
  font-weight: var(--fw-bold);
  color: var(--c-negative);
  margin-block-start: var(--s-1);
}

.FormBuilder-module--descriptionContainer--f2088 {
  margin-block-end: var(--s-4);
}

.FormBuilder-module--errorMessage--ab907 {
  font-weight: var(--fw-bold);
  color: var(--c-negative);
  text-transform: uppercase;
  margin-block-end: var(--s-2);
}

.FormBuilder-module--fieldSpacing--e7511 {
  padding: var(--s-2) 0;
}

.FormBuilder-module--labelWrapper--98694 {
  display: flex;
  justify-content: space-between;
}

.FormBuilder-module--required--e70d1 {
  color: var(--c-negative);
}

.FormBuilder-module--backbutton--a7795 {
  /* 120px */
  max-width: calc(var(--s-1) * 15);
  margin: 0 var(--s-1);
}

.FormBuilder-module--nextbutton--32de7 {
  max-width: 375px;
  margin: 0 var(--s-1);
}

.FormBuilder-module--buttonText--5755d {
  padding-inline-end: var(--s-1);
}

.FormBuilder-module--buttonwrapper--a3023 {
  display: flex;
  justify-content: space-evenly;
  padding-block-start: var(--s-4);
  margin: 0 var(--s-1);
  border-block-start: 2px solid var(--c-black);
}

.FormBuilder-module--quizButtonWrapper--0f383 {
  background-color: var(--c-oatmeal);
  padding-block: var(--s-3);
  padding-inline: var(--s-3);
  display: inline-block;
  border-radius: 16px;
  max-width: 423px;
  width: 100%;
  margin-block-start: 50px;
  border: none;
}
.FormBuilder-module--quizButtonWrapper--0f383 button {
  margin: 0;
}

.FormBuilder-module--submissionblockedwarningmodal--ac30c {
  align-items: center;
  margin-block-end: var(--s-2);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /* 200px */
  min-height: calc(var(--s-1) * 25);
  text-align: center;
}

.FormBuilder-module--modaltitle--0180e {
  margin-block-end: var(--s-2);
}

.FormBuilder-module--submissionblockedwarningmodalcta--7f0d8 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.FormBuilder-module--conditionalbackground--e1aee {
  padding-inline-start: 12px;
  position: relative;
  margin-inline-start: var(--s-1);
}
.FormBuilder-module--conditionalbackground--e1aee::before {
  content: "";
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-start: 0;
  inset-block-end: var(--s-2);
  width: 2px;
  background-color: var(--c-oatmeal);
}

.FormBuilder-module--conditionalbackground--e1aee + .FormBuilder-module--conditionalbackground--e1aee::before {
  top: -16px;
}

.FormBuilder-module--whitebg--87bf4 {
  background-color: var(--c-white);
  margin-inline-start: -100%;
  margin-inline-end: -100%;
  padding-inline-start: 100%;
  padding-inline-end: 100%;
  padding-block-start: var(--s-4);
  margin-block-start: var(--s-2);
}
.FormBuilder-module--whitebg--87bf4:first-child {
  padding-block-start: var(--s-2);
  margin-block-start: 0;
}

.FormBuilder-module--beigebg--8005b {
  padding-block-start: var(--s-4);
}
.FormBuilder-module--beigebg--8005b:first-child {
  padding-block-start: var(--s-2);
}

.FormBuilder-module--whitebg--87bf4 + .FormBuilder-module--whitebg--87bf4,
.FormBuilder-module--beigebg--8005b + .FormBuilder-module--beigebg--8005b {
  padding-block-start: var(--s-2);
  margin-block-start: 0;
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.QuizHeader-module--surveyHeader--da542 {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  z-index: 100;
  width: 100%;
  max-width: 90rem;
}
@media (min-width: 64rem) {
  .QuizHeader-module--surveyHeader--da542 {
    padding-inline: var(--s-4);
  }
}

.QuizHeader-module--surveySections--e8526 {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  border-block-end: 2px solid var(--c-white);
  z-index: 100;
  width: 100%;
  max-width: 90rem;
  margin-block-end: var(--s-1);
}
@media (min-width: 64rem) {
  .QuizHeader-module--surveySections--e8526 {
    border-block-end: none;
    flex-direction: row;
  }
}

.QuizHeader-module--surveyHeaderSegment--5a602 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-inline-end: 2px solid var(--c-white);
  padding: var(--s-1) var(--s-2);
  width: 100%;
  background-color: var(--c-sunshine-yellow);
}
.QuizHeader-module--surveyHeaderSegment--5a602:last-child {
  border-inline-end: none;
}
.QuizHeader-module--surveyHeaderSegment--5a602:first-child {
  border-inline-end: 2px solid var(--c-white);
}
.QuizHeader-module--surveyHeaderSegment--5a602[data-is-open=false] {
  display: none;
}
@media (min-width: 64rem) {
  .QuizHeader-module--surveyHeaderSegment--5a602[data-is-open=false] {
    display: flex;
  }
}
@media (min-width: 64rem) {
  .QuizHeader-module--surveyHeaderSegment--5a602 {
    margin: var(--s-1);
    border-radius: var(--s-1);
    flex-direction: column;
    align-items: flex-start;
    border-inline-end: none;
    justify-content: space-evenly;
  }
  .QuizHeader-module--surveyHeaderSegment--5a602:first-child {
    border-inline-end: none;
  }
}

.QuizHeader-module--surveyHeaderSegmentInactive--d6c22 {
  background-color: var(--c-sunshine-yellow-off-colour);
}

.QuizHeader-module--surveyHeaderSegmentTitle--6498b {
  display: flex;
  height: 100%;
  font-family: var(--font-family-heading);
  align-items: center;
  line-height: var(--lh-body-l);
  margin-inline-start: var(--s-2);
}
@media (min-width: 64rem) {
  .QuizHeader-module--surveyHeaderSegmentTitle--6498b {
    margin-inline-start: 0;
  }
}

.QuizHeader-module--surveyHeaderSegmentProgress--038c2 {
  display: flex;
  height: 100%;
  font-family: var(--font-family);
  margin-inline-start: var(--s-2);
  align-items: center;
}
@media (min-width: 64rem) {
  .QuizHeader-module--surveyHeaderSegmentProgress--038c2 {
    margin-inline-start: 0;
  }
}

.QuizHeader-module--surveyHeaderSegmentIcon--f0e87 {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-inline-start: auto;
  margin-inline-end: var(--s-2);
  align-items: center;
}
@media (min-width: 64rem) {
  .QuizHeader-module--surveyHeaderSegmentIcon--f0e87 {
    display: none;
  }
}

.QuizHeader-module--progressContainer--558f4 {
  position: relative;
  height: var(--s-10);
  width: 100%;
  background-color: var(--c-white);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-evenly;
  padding-inline: var(--s-4);
}
@media (min-width: 64rem) {
  .QuizHeader-module--progressContainer--558f4 {
    padding-inline: 0;
  }
}

.QuizHeader-module--sectionProgressBar--367de {
  position: relative;
  height: var(--s-10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  margin-block-end: var(--s-2);
  margin-inline: var(--s-0-5);
}
.QuizHeader-module--sectionProgressBar--367de:first-child {
  margin-inline-start: 0;
}
.QuizHeader-module--sectionProgressBar--367de:last-child {
  margin-inline-end: 0;
}
@media (min-width: 64rem) {
  .QuizHeader-module--sectionProgressBar--367de {
    margin-inline: var(--s-1);
  }
  .QuizHeader-module--sectionProgressBar--367de:first-child {
    margin-inline-start: var(--s-1);
  }
  .QuizHeader-module--sectionProgressBar--367de:last-child {
    margin-inline-end: var(--s-1);
  }
}

.QuizHeader-module--progressBar--136f0 {
  position: absolute;
  width: 100%;
  height: var(--s-1);
  background-color: var(--c-mist);
  border-radius: var(--s-1);
}

.QuizHeader-module--progressStatus--aa2ba {
  background-color: var(--c-sunshine-yellow);
  width: 20%;
  transition: width 2s;
}

.QuizHeader-module--lottieAnimation--a46ce {
  position: absolute;
  height: var(--s-8);
  width: max(25%, var(--s-7));
  background-color: transparent;
  margin-block-end: var(--s-1);
  transition: margin-inline-start 1s;
  transition-delay: 1.5s;
  margin-block-start: var(--s-0-5);
  margin-inline-start: calc(var(--s-3) * -1);
}

.QuizHeader-module--lottieAnimationMulti--c3920 {
  border: 1px solid red;
}

.QuizHeader-module--lottieAnimationSitting--2347a {
  margin-inline-start: calc(100% - var(--s-4));
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
@keyframes SADProfilePage-module--slideUp--8254f {
  0% {
    inset-block-end: -80;
  }
  100% {
    inset-block-end: 0;
  }
}
.SADProfilePage-module--addedtobasketbanner--dfe88 {
  position: fixed;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: var(--s-10);
  background-color: var(--c-sunshine-yellow);
  z-index: 12;
  box-shadow: var(--sh-box-heavy);
  animation: SADProfilePage-module--slideUp--8254f ease-in;
  animation-duration: 0.4s;
  animation-delay: 0s;
}

.SADProfilePage-module--addedtobasketbannertitle--65372 {
  color: var(--c-black);
  font-family: var(--font-family-heading);
  font-size: var(--t-body-l);
}

.SADProfilePage-module--addedtobasketbannerlink--a6451 {
  color: var(--c-black);
  font-family: var(--font-family);
}

.SADProfilePage-module--dogdetails--6eae6 {
  width: 100%;
  max-width: 64rem;
}

.SADProfilePage-module--dogdetailstext--c8293 {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 64rem) {
  .SADProfilePage-module--dogdetailstext--c8293 {
    gap: var(--s-8);
    grid-template-columns: 1fr 1fr;
  }
}

.SADProfilePage-module--textsection--85031 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--s-2);
  padding-block-start: var(--s-4);
  box-sizing: border-box;
  text-align: left;
}

.SADProfilePage-module--continuetobasket--3ce23 {
  display: flex;
  justify-content: center;
}

.SADProfilePage-module--quotesection--62f19 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: 0;
  padding: var(--s-4) 0;
  box-sizing: border-box;
  /* 304px */
  min-height: calc(var(--s-1) * 38);
  background-color: var(--c-sandy-fur);
}

.SADProfilePage-module--quotessectioninner--e88bc {
  /* 744px */
}

.SADProfilePage-module--quote--57c4c {
  position: relative;
}

.SADProfilePage-module--quotemarks--29b0d {
  float: left;
  height: var(--s-4);
  /* 48px */
  width: calc(var(--s-1) * 6);
  padding-inline-end: 28px;
}

.SADProfilePage-module--quotetext--67813 {
  padding-block-start: 22px;
}

.SADProfilePage-module--quotee--287e6 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--t-body-l);
  line-height: var(--lh-body-l);
  padding: 0;
  margin: 0;
}

.SADProfilePage-module--quoteerole--253f7 {
  font-family: var(--font-family);
  font-weight: 500;
  margin: 0;
}

.SADProfilePage-module--quotesbordersection--1a100 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
  inset-block-end: 0;
  z-index: 3;
}

.SADProfilePage-module--border--400ac {
  position: relative;
  min-width: 100%;
  height: 100%;
  margin-block-end: -4px;
  z-index: var(--z-app-shell);
}

.SADProfilePage-module--likessection--64364 {
  position: relative;
  width: 100%;
  padding-block-start: var(--s-8);
  box-sizing: border-box;
  background-color: var(--c-sunshine-yellow);
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 46.875rem) {
  .SADProfilePage-module--likessection--64364 {
    grid-template-columns: 1fr 1fr;
  }
}

.SADProfilePage-module--likescontent--ef328 {
  display: grid;
  grid-template-columns: var(--s-10) auto;
}
.SADProfilePage-module--likescontent--ef328 p {
  font-weight: 600;
  text-align: start;
}
@media screen and (min-width: 37.5rem) {
  .SADProfilePage-module--likescontent--ef328 {
    padding: 0;
  }
}

.SADProfilePage-module--likestext--446e3 {
  display: flex;
  flex-direction: column;
  padding-inline-start: var(--s-2);
  padding-block-start: var(--s-2);
  width: 100%;
}
.SADProfilePage-module--likesicon--a4246 {
  /* 120px */
  height: calc(var(--s-1) * 15);
}

.SADProfilePage-module--likesbordersectiontop--bb195 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
  inset-block-end: 0;
  background-color: var(--c-sandy-fur);
}
.SADProfilePage-module--likesbordersectiontop--bb195.SADProfilePage-module--noquote--a404c {
  background-color: var(--c-white);
}

.SADProfilePage-module--likesbordersectionbottom--91bbc {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: auto;
  max-height: calc(var(--s-1) * 75);
  /* 600px */
  inset-block-end: 0;
  background-color: var(--c-sunshine-yellow);
}

.SADProfilePage-module--sponsororsocial--89323 {
  display: flex;
  justify-content: space-between;
}

.SADProfilePage-module--socialmediawrapper--684ac {
  width: 100%;
}
.SADProfilePage-module--socialmediawrapper--684ac .SADProfilePage-module--sharetolabel--6f5c2 {
  font-family: var(--font-family);
  text-transform: uppercase;
  text-align: left;
  font-size: var(--t-body-s);
  line-height: var(--lh-body-xxs);
}
@media (min-width: 25.875rem) {
  .SADProfilePage-module--socialmediawrapper--684ac .SADProfilePage-module--sharetolabel--6f5c2 {
    line-height: var(--lh-body-s);
  }
}
.SADProfilePage-module--socialmediawrapper--684ac .SADProfilePage-module--sharetolabel--6f5c2 {
  color: var(--c-black);
  font-weight: 600;
}
.SADProfilePage-module--socialmediawrapper--684ac .SADProfilePage-module--sharetoicons--807c1 {
  justify-content: flex-start;
  width: 100%;
}
.SADProfilePage-module--socialmediawrapper--684ac .SADProfilePage-module--sharetoicons--807c1 a:first-child {
  margin-left: 0;
}
.SADProfilePage-module--socialmediawrapper--684ac .SADProfilePage-module--sharetoicons--807c1 a {
  margin-inline-start: var(--s-1);
  margin-inline-end: var(--s-1);
}
/* 
* THIS FILE SHOULD HAVE NO STYLES AS IT IS IMPORTED BY OTHER FILES
* IMPORT `@import` this file to use the breakpoints
*/
/* Please use these like this with min-width and NOT max-width unless absolutely necessary
* e.g. @media (min-width: $view-breakpoint-6)
*/
/*
    Designs are based on 0, 600, 900, 1280, 1920. Best practice is to overshoot common screen sizes so as to take into account the massive variety possible, so this is how the breakpoints map:

    0 -> DEFAULT
    600 -> 375 + (min-width: $view-breakpoint-1) - 650 + (min-width: $view-breakpoint-2). This covers the larger mobile sizes and above
    900 -> 768 + (min-width: $view-breakpoint-3) - 992 + (min-width: $view-breakpoint-4). This covers tablets to small desktops. The 992 breakpoint covers the crucial 1024 screen size.
    1280 -> 1200 + ($view-breakpoint-6).
*/
.TopicPage-module--sectionwrapper--ae179 {
  max-width: 56rem;
  margin-inline: auto;
  padding-block-start: var(--s-4);
}

.TopicPage-module--allFromTopicsTitle--2ee68 {
  padding-inline: var(--s-2);
}