#sizes { --sz1-gutter: calc(8% + 20px); padding: 80px var(--sz1-gutter); background: #f4f4f4; color: #30353A; }
#sizes p { margin: 0; }
#sizes .sz1__grid { display: grid; gap: 32px; }
#sizes .sz1__copy { display: grid; gap: 16px; align-content: start; }
#sizes .sz1__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #30353A; }
#sizes .sz1__h { margin: 0; padding: 0; max-width: 22ch; font-weight: 700; font-size: 32px; line-height: 1.25; color: #30353A; text-transform: none; letter-spacing: 0; }
#sizes .sz1__body { max-width: 62ch; font-size: 17px; line-height: 1.6; }
#sizes .sz1__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
#sizes .sz1__card { display: grid; gap: 8px; align-content: start; justify-items: start; margin: 0; padding: 24px; border-radius: 4px; background: #fff; }
#sizes .sz1__tag { padding: 4px 10px; border: 1px solid #30353A; border-radius: 500px; font-family: 'Inter', Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #30353A; }
#sizes .sz1__tag--main { border-color: #D8B98A; background: #D8B98A; }
#sizes .sz1__figure { font-family: 'Inter', Arial, sans-serif; font-size: 36px; font-weight: 800; line-height: 1.1; color: #30353A; }
#sizes .sz1__line { font-size: 16px; line-height: 1.5; }

#colours { --cl1-gutter: calc(8% + 20px); padding: 80px var(--cl1-gutter); background: #fff; color: #30353A; }
#colours p { margin: 0; }
#colours .cl1__head { display: grid; gap: 16px; margin-bottom: 40px; }
#colours .cl1__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #30353A; }
#colours .cl1__h { margin: 0; padding: 0; font-weight: 700; font-size: 32px; line-height: 1.25; color: #30353A; text-transform: none; letter-spacing: 0; }
#colours .cl1__body { max-width: 62ch; font-size: 17px; line-height: 1.6; }
#colours .cl1__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; align-items: start; }
#colours .cl1__item { display: grid; gap: 8px; align-content: start; margin: 0; padding: 0; }
#colours .cl1__chip { display: block; aspect-ratio: 4 / 3; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(48, 53, 58, 0.18); }
#colours .cl1__name { font-size: 14px; font-weight: 600; line-height: 1.3; }
#colours .cl1__foot { display: grid; gap: 8px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #dce0e4; }
#colours .cl1__more { font-size: 17px; line-height: 1.6; }
#colours .cl1__fine { font-size: 14px; line-height: 1.5; font-style: italic; color: #555b61; }
#colours .cl1__quote { margin: 16px 0 0; padding: 0 0 0 16px; border-left: 4px solid #D8B98A; }
#colours .cl1__quote blockquote { margin: 0; padding: 0; border: 0; }
#colours .cl1__quote blockquote p { font-size: 18px; line-height: 1.5; font-style: italic; }
#colours .cl1__quote figcaption { margin-top: 6px; font-size: 14px; font-weight: 700; }


@media only screen and (min-width: 768px) {
  #colours .cl1__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media only screen and (min-width: 1200px) {
  #colours .cl1__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
@media only screen and (min-width: 992px) {
  #sizes .sz1__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
}
@media only screen and (max-width: 980px) {
  #sizes { --sz1-gutter: 40px; padding-block: 60px; }
  #colours { --cl1-gutter: 40px; padding-block: 60px; }
  #sizes .sz1__h, #colours .cl1__h { font-size: 26px; line-height: 35px; }
}
@media only screen and (max-width: 767px) {
  #sizes .sz1__cards { grid-template-columns: minmax(0, 1fr); }
}
@media only screen and (max-width: 479px) {
  #sizes { --sz1-gutter: 24px; }
  #colours { --cl1-gutter: 24px; }
  #sizes .sz1__card { padding: 20px 16px; }
  #sizes .sz1__figure { font-size: 30px; }
  #colours .cl1__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
}


#hero + #why-us { padding-top: 50px; }
#colours + #repair { padding-top: 40px; }
#repair + #reviews { padding-top: 40px; }
@media only screen and (max-width: 980px) {
  #hero + #why-us { padding-top: 20px; }
  #colours + #repair { padding-top: 30px; }
  #repair + #reviews { padding-top: 50px; }
}