/*!***********************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-4.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-4.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-4.use[3]!./styles/entry/bereavementguide.scss ***!
\***********************************************************************************************************************************************************************************************************************************************/
/* Layout */
/* Colours */
/* Autogen vars via build:palettes */
/* 1. Screen Sizes */
/* Topics */
/* Cards */
/*
xs 320px small-mobile
sm 576px mobile
md 768px small-tablet
lg 992px tablet
xl 1200px small-desktop
max 1400px desktop
*/
/* stylelint-disable function-no-unknown */
.block {
position: relative;
}
.block-heading {
font-size: var(--font-size-l);
font-weight: var(--font-weight-bold);
font-family: var(--header-font);
color: #000000;
text-transform: var(--text-transform-heading);
margin-bottom: 25px;
margin-top: 0;
padding-top: 0;
cursor: default;
}
.block-heading.heading-double-underline {
display: inline-block;
text-align: center;
font-size: var(--font-size-m);
border-bottom: 4px double #9DA0A4;
margin: auto;
padding-bottom: 0;
margin-bottom: 10px;
}
.block-heading {
line-height: 120%;
width: fit-content;
position: relative;
}
@media (min-width: 768px) {
.block-heading {
font-size: var(--font-size-xl);
}
}
.block-heading::after {
content: "";
height: 4px;
background: var(--accent-colour);
width: 100%;
display: block;
position: absolute;
}
.block-heading--sub {
text-transform: capitalize;
}
/* html-documentation
Accordion
Accordion toggle element 1
Accordion copy - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Accordion toggle element 2
Accordion copy - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Accordion toggle element 3
Accordion copy - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
*/
.accordion {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.accordion--collapsed {
max-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
.accordion--show {
display: block;
max-height: 600px !important;
transition: max-height 0.2s ease;
}
.accordion[data-accordion-toggle=true] .collapse-icon {
display: block !important;
}
.accordion[data-accordion-toggle=true] .show-icon {
display: none !important;
}
.accordion[data-accordion-toggle=false] .collapse-icon {
display: none !important;
}
.accordion[data-accordion-toggle=false] .show-icon {
display: block !important;
}
.bereavement {
margin: auto 10px;
}
@media (min-width: 576px) {
.bereavement {
margin: auto 10px;
}
}
@media (min-width: 1200px) {
.bereavement {
margin: auto 150px;
}
}
.bereavement .block-heading {
text-transform: capitalize;
}
.bereavement .ad-placement {
/* width: 100%; 355px */
height: 90px;
margin: 25px 0;
}
@media (min-width: 576px) {
.bereavement .ad-placement {
/* width: 100%;742px */
height: 130px;
margin: 50px 0;
}
}
@media (min-width: 1200px) {
.bereavement .ad-placement {
width: 970px;
height: 250px;
margin: 50px 0;
}
}
.bereavement__title {
color: var(--global-black, #000000);
font-family: var(--global-font);
font-size: var(--font-size-s);
font-weight: var(--font-weight-semibold);
line-height: var(--standard-line-height);
}
.bereavement__intro-text {
color: var(--global-black, #000000);
font-family: var(--heading-font);
font-size: var(--font-size-s);
font-weight: var(--font-weight-semibold);
line-height: var(--standard-line-height);
}
.bereavement__guide-grid {
display: grid;
grid-template-columns: 1fr;
gap: 25px;
margin: 50px 0;
}
@media (min-width: 576px) {
.bereavement__guide-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.bereavement__guide-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.bereavement__guide-grid__container img {
width: 100%;
}
.bereavement__guide-grid__container--button {
background: var(--accent-colour);
border-radius: 100px;
border: 1px solid #FFFFFF;
color: #000000;
font-family: var(--global-font);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-align: center;
line-height: var(--standard-line-height);
height: 24px;
padding: 2px 15px;
margin: 5px 0;
}
.bereavement__guide-grid__text-content, .bereavement__guide-grid__text-content-row-two {
min-height: 0;
margin-bottom: 10px;
}
@media (min-width: 576px) {
.bereavement__guide-grid__text-content, .bereavement__guide-grid__text-content-row-two {
min-height: 98px;
}
}
@media (min-width: 1200px) {
.bereavement__guide-grid__text-content, .bereavement__guide-grid__text-content-row-two {
min-height: 130px;
}
}
.bereavement__guide-grid__text-content--title, .bereavement__guide-grid__text-content-row-two--title {
color: #000000;
font-family: var(--global-font);
font-size: var(--font-size-s);
font-weight: var(--font-weight-semibold);
line-height: var(--standard-line-height);
margin: 5px 0;
}
.bereavement__guide-grid__text-content--text, .bereavement__guide-grid__text-content-row-two--text {
color: var(--global-black, #000000);
font-family: var(--body-font);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-regular);
line-height: var(--standard-line-height);
margin: 5px 0;
}
.bereavement__guide-grid__text-content-row-two {
min-height: 0;
margin-bottom: 10px;
}
@media (min-width: 576px) {
.bereavement__guide-grid__text-content-row-two {
min-height: 80px;
}
}
@media (min-width: 1200px) {
.bereavement__guide-grid__text-content-row-two {
min-height: 100px;
}
}
.bereavement__support--paragraph {
color: #333333;
font-family: var(--body-font);
font-size: var(--font-size-s);
font-weight: var(--font-weight-regular);
line-height: var(--standard-line-height);
margin: 15px 0;
}
.bereavement__support--heading {
color: #000000;
font-family: var(--global-font);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
line-height: var(--standard-line-height);
/* 36.4px */
}
.bereavement__support--grid-container {
display: grid;
grid-template-columns: 1fr;
margin: 15px 0;
gap: 15px;
}
@media (min-width: 576px) {
.bereavement__support--grid-container {
grid-template-columns: 1fr;
}
}
@media (min-width: 1200px) {
.bereavement__support--grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
.bereavement__support--grid-container__title {
color: #333333;
font-family: var(--heading-font);
font-size: var(--font-size-s);
font-weight: var(--font-weight-bold);
line-height: var(--standard-line-height);
}
.bereavement__support--grid-container__text {
color: #333333;
font-family: var(--body-font);
font-size: var(--font-size-s);
font-weight: var(--font-weight-regular);
line-height: var(--standard-line-height);
margin: 5px 0;
}
.bereavement__support--grid-container a {
font-weight: var(--font-weight-bold);
border-bottom: 1px solid var(--accent-colour);
text-decoration: none;
}
.bereavement__support--grid-container__lines {
border-bottom: 0;
}
@media (min-width: 1200px) {
.bereavement__support--grid-container__lines {
grid-column: span 3;
margin: 15px 0;
border-bottom: 1px solid #000000;
}
}
.bereavement__support--grid-container__last-lines {
grid-column: span 1;
margin: 15px 0;
border-bottom: 1px solid #000000;
}
@media (min-width: 1200px) {
.bereavement__support--grid-container__last-lines {
grid-column: span 3;
}
}
.bereavement__details > .block-heading {
font-size: var(--font-size-s);
font-family: var(--body-font);
font-weight: var(--font-weight-bold);
text-transform: capitalize;
}
.bereavement__details > .block-heading::after {
height: 1px;
}
.bereavement__details--heading {
color: #333333;
font-family: var(--global-font);
font-size: var(--font-size-xxl);
font-weight: var(--font-weight-bold);
line-height: var(--standard-line-height);
}
.bereavement__details--grid {
display: grid;
grid-template-columns: 1fr;
gap: 25px;
margin: 35px 0;
}
@media (min-width: 576px) {
.bereavement__details--grid {
grid-template-columns: 1;
}
}
@media (min-width: 1200px) {
.bereavement__details--grid {
grid-template-columns: 635px 285px;
gap: 50px;
}
}
.bereavement__details--grid__section--sub-heading {
color: var(--global-slate, #333333);
font-family: var(--body-font);
font-size: var(--font-size-s);
font-weight: var(--font-weight-bold);
line-height: var(--standard-line-height);
/* 22.4px */
margin-top: 35px;
margin-bottom: 15px;
}
.bereavement__details--grid__section--first-paragraph {
font-family: var(--body-font);
font-size: var(--font-size-s);
font-style: normal;
font-weight: var(--font-weight-regular);
line-height: var(--standard-line-height);
margin: 15px 0;
}
.bereavement__details--grid__section--description {
display: flex;
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
}
.bereavement__details--grid__section--description h3 {
font-family: var(--global-font);
font-size: var(--font-size-l);
font-weight: var(--font-weight-bold);
border-bottom: 1px solid var(--accent-colour);
margin-top: 0;
margin-bottom: 0;
}
@media (min-width: 576px) {
.bereavement__details--grid__section--description span {
margin: 0 auto;
}
}
.bereavement__details--grid__section--content {
overflow: hidden;
}
.bereavement__details--grid__section--content p {
font-family: var(--body-font);
font-size: var(--font-size-s);
font-weight: var(--font-weight-regular);
line-height: var(--standard-line-height);
/* 22.4px */
margin: 20px 0;
}
.bereavement__details--grid__section--content ul {
margin-bottom: 25px;
}
.bereavement__details--grid__section--content li {
font-family: var(--body-font);
font-size: var(--font-size-s);
font-weight: var(--font-weight-regular);
line-height: var(--standard-line-height);
/* 22.4px */
margin: 10px 0;
}
@media (max-width: 767px) {
.bereavement__details--grid__section--content li {
margin: 10px;
}
}
.bereavement__details--grid__section--content a {
text-decoration: underline;
}
.bereavement__details--grid__section--advice {
border-left: 5px solid #1B1B53;
padding: 15px;
margin-bottom: 15px;
}
.bereavement__details--grid__nav-options {
text-align: left;
}
.bereavement__details--grid__nav-options--heading {
display: inline-block;
font-family: var(--global-font);
font-size: var(--font-size-m);
font-weight: var(--font-weight-bold);
line-height: 120%;
border-bottom: 3px solid var(--accent-colour);
width: fit-content;
}
@media (min-width: 576px) {
.bereavement__details--grid__nav-options--heading {
width: auto;
}
}
.bereavement__details--grid__nav-options ul {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 10px;
margin-left: -20px;
}
.bereavement__details--grid__nav-options li a {
text-decoration: underline;
-webkit-text-decoration-color: #000000;
text-decoration-color: #000000;
font-family: var(--body-font);
font-size: var(--font-size-s);
font-weight: var(--font-weight-regular);
line-height: var(--standard-line-height);
/* 22.4px */
display: inline-flex;
}
.bereavement__details--grid__nav-options a {
display: table;
font-family: var(--global-font);
font-size: var(--font-size-m);
font-weight: var(--font-weight-semibold);
line-height: var(--standard-line-height);
/* 23.4px */
text-decoration: underline;
-webkit-text-decoration-color: var(--accent-colour);
text-decoration-color: var(--accent-colour);
margin: 5px 0;
}
.bereavement__details--grid__bottom-navigation {
display: flex;
justify-content: space-between;
font-family: var(--heading-font);
}
.bereavement__details--grid__bottom-navigation > div:nth-child(2) {
text-align: right;
}
.bereavement__details--grid__bottom-navigation a {
font-size: var(--font-size-m);
font-weight: var(--font-weight-bold);
line-height: 22px;
border-bottom: 1px solid var(--accent-colour);
text-decoration: none;
}
.bereavement__details--grid__bottom-navigation p {
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-regular);
line-height: 16.8px;
margin-top: 5px;
text-decoration: none;
}