.image-intro {
@include grid-row; margin-bottom: 2.5rem; .intro-image { @include grid-column(10); padding-right: map-get($grid-column-gutter, small); @include breakpoint(small only) { @include grid-column-position(center); } @include breakpoint(tablet) { @include grid-column(6); } @include breakpoint(medium) { padding-right: map-get($grid-column-gutter, medium); } img { border-radius: 16px; margin-bottom: 1rem; } padding-right: map-get($grid-column-gutter, small); } .intro-content { @include grid-column-gutter; font-size: 18px; @include breakpoint(tablet) { font-size: 20px; } h1, h2, h3, h4, h5, h6 { color: $ace-blue; } ol, ul { list-style-position: inside; padding-right: 1.5em; li { text-indent: -1.5em; transform: translate(1.5em); } } }
}
.acc-list {
@include accordion-container; margin-top: 1rem; &:first-child { margin-top: -9px; } .acc-item { @include accordion-item; margin-bottom: rem-calc(16); .acc-title { @include accordion-title; color: $ace-navy; font-weight: bold; font-size: rem-calc(16); line-height: $header-lineheight; padding: rem-calc(10); padding-left: rem-calc(36); &:before { content: ''; display: block; top: 9px; right: auto; bottom: auto; left: 0; margin: 0; width: rem-calc(20); height: rem-calc(20); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%2C.cls-3%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bstroke%3A%23cad400%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A3.38px%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22clip-path%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2219%22%20height%3D%2219%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3Eaccordion-plus%3C%2Ftitle%3E%3Cg%20class%3D%22cls-2%22%3E%3Cline%20class%3D%22cls-3%22%20x1%3D%2210%22%20y1%3D%222.2%22%20x2%3D%2210%22%20y2%3D%2217.8%22%2F%3E%3Cline%20class%3D%22cls-3%22%20x1%3D%222.2%22%20y1%3D%2210%22%20x2%3D%2217.8%22%20y2%3D%2210%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: center center; background-repeat: no-repeat; } } .acc-content { @include accordion-content; padding: rem-calc(10); padding-left: rem-calc(36); h1, h2, h3, h4, h5, h6 { color: $ace-blue; } ul, ol { margin-bottom: 1rem; li { p:last-child { margin-bottom: 1rem; } } } p:last-child { margin-bottom: 0; } h1 { font-size: rem-calc(24); } h2 { font-size: rem-calc(20); } h3 { font-size: rem-calc(18); } h4 { font-style: rem-calc(18); } @include breakpoint(medium) { h1 { font-size: rem-calc(26); } h2 { font-size: rem-calc(22); } h3 { font-size: rem-calc(20); } h4 { font-style: rem-calc(18); } } @include breakpoint(large) { h1 { font-size: rem-calc(30); } h2 { font-size: rem-calc(26); } h3 { font-size: rem-calc(22); } h4 { font-style: rem-calc(20); } } } } .is-active > .acc-title:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%2C.cls-3%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bstroke%3A%23cad400%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A3.38px%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22clip-path%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%220.56%22%20y%3D%228.31%22%20width%3D%2218.88%22%20height%3D%223.38%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3Eaccordion-minus%3C%2Ftitle%3E%3Cg%20class%3D%22cls-2%22%3E%3Cline%20class%3D%22cls-3%22%20x1%3D%222.25%22%20y1%3D%2210%22%20x2%3D%2217.75%22%20y2%3D%2210%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
}