@charset "UTF-8";
*,
::before,
::after {
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  overflow-wrap: break-word;
}

.visually-hidden:not(:focus-visible) {
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  clip-path: inset(100%) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

[hidden] {
  display: none !important;
}

:disabled,
.disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.8;
  filter: grayscale(0.4);
}

button {
  appearance: none;
  background: none;
  padding: 0;
  border: none;
  margin: 0;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

img,
video {
  display: block;
  max-inline-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

iframe {
  border: 0;
}

slot-fb {
  display: contents !important;
}

:root {
  --total-fixed-to-top: calc(var(--header-size) + var(--anchor-links-height, 0px));
}

body {
  color: var(--dark-gray);
  display: flex;
  flex-direction: column;
}
body > * {
  flex-grow: 0;
  flex-shrink: 0;
}
body > footer {
  contain: content;
  margin-block-start: auto;
}
body:is(.is-page-editor, .is-template-editor) #header, body:is(.is-page-editor, .is-template-editor) > footer {
  block-size: 100%;
  position: relative;
}
body:is(.is-page-editor, .is-template-editor) #header .sf-zone-empty__wrapper, body:is(.is-page-editor, .is-template-editor) > footer .sf-zone-empty__wrapper {
  display: none !important;
}
body:is(.is-page-editor) #header, body:is(.is-page-editor) > footer {
  pointer-events: none;
}

body main > section {
  padding-inline: var(--page-margin);
}

.embed-code iframe {
  inline-size: 100%;
  min-block-size: 100%;
}

body:not(.is-editor) .invisible-slot {
  display: contents;
}
body.is-editor .embla__viewport {
  overflow: auto;
}
body.is-editor .image-cards-carousel [data-sfcontainer=ImageCards] [data-sfname=SitefinityContentList] {
  display: flex;
  gap: var(--gap);
  inline-size: 30rem;
}

.layout-section {
  background-color: var(--sf-backgrоund-color);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.layout-section:not(.layout-section .layout-section) {
  gap: 1rem;
}
.layout-section.layout-section .layout-section {
  gap: inherit;
}
.layout-section__background-video {
  grid-row: 1/-1;
  grid-column: 1/-1;
}
.layout-section__item {
  display: flex;
  flex-direction: column;
  gap: inherit;
  grid-column: auto/span var(--column-span);
  --column-span: 12;
}
.layout-section__item:empty {
  display: none;
}
@media (min-width: 768px) {
  .layout-section__item--1 {
    --column-span: 1;
  }
  .layout-section__item--2 {
    --column-span: 2;
  }
  .layout-section__item--3 {
    --column-span: 3;
  }
  .layout-section__item--4 {
    --column-span: 4;
  }
  .layout-section__item--5 {
    --column-span: 5;
  }
  .layout-section__item--6 {
    --column-span: 6;
  }
  .layout-section__item--7 {
    --column-span: 7;
  }
  .layout-section__item--8 {
    --column-span: 8;
  }
  .layout-section__item--9 {
    --column-span: 9;
  }
  .layout-section__item--10 {
    --column-span: 10;
  }
  .layout-section__item--11 {
    --column-span: 11;
  }
  .layout-section__item--12 {
    --column-span: 12;
  }
}

.pt-0 {
  padding-block-start: var(--spacing-0);
}

.pt-1 {
  padding-block-start: var(--spacing-1);
}

.pt-2 {
  padding-block-start: var(--spacing-2);
}

.pt-3 {
  padding-block-start: var(--spacing-3);
}

.pt-4 {
  padding-block-start: var(--spacing-4);
}

.pt-5 {
  padding-block-start: var(--spacing-5);
}

.pt-auto {
  padding-block-start: var(--spacing-auto);
}

.pb-0 {
  padding-block-end: var(--spacing-0);
}

.pb-1 {
  padding-block-end: var(--spacing-1);
}

.pb-2 {
  padding-block-end: var(--spacing-2);
}

.pb-3 {
  padding-block-end: var(--spacing-3);
}

.pb-4 {
  padding-block-end: var(--spacing-4);
}

.pb-5 {
  padding-block-end: var(--spacing-5);
}

.pb-auto {
  padding-block-end: var(--spacing-auto);
}

.ps-0 {
  padding-inline-start: var(--spacing-0);
}

.ps-1 {
  padding-inline-start: var(--spacing-1);
}

.ps-2 {
  padding-inline-start: var(--spacing-2);
}

.ps-3 {
  padding-inline-start: var(--spacing-3);
}

.ps-4 {
  padding-inline-start: var(--spacing-4);
}

.ps-5 {
  padding-inline-start: var(--spacing-5);
}

.ps-auto {
  padding-inline-start: var(--spacing-auto);
}

.pe-0 {
  padding-inline-end: var(--spacing-0);
}

.pe-1 {
  padding-inline-end: var(--spacing-1);
}

.pe-2 {
  padding-inline-end: var(--spacing-2);
}

.pe-3 {
  padding-inline-end: var(--spacing-3);
}

.pe-4 {
  padding-inline-end: var(--spacing-4);
}

.pe-5 {
  padding-inline-end: var(--spacing-5);
}

.pe-auto {
  padding-inline-end: var(--spacing-auto);
}

.mt-0 {
  margin-block-start: var(--spacing-0);
}

.mt-1 {
  margin-block-start: var(--spacing-1);
}

.mt-2 {
  margin-block-start: var(--spacing-2);
}

.mt-3 {
  margin-block-start: var(--spacing-3);
}

.mt-4 {
  margin-block-start: var(--spacing-4);
}

.mt-5 {
  margin-block-start: var(--spacing-5);
}

.mt-auto {
  margin-block-start: var(--spacing-auto);
}

.mb-0 {
  margin-block-end: var(--spacing-0);
}

.mb-1 {
  margin-block-end: var(--spacing-1);
}

.mb-2 {
  margin-block-end: var(--spacing-2);
}

.mb-3 {
  margin-block-end: var(--spacing-3);
}

.mb-4 {
  margin-block-end: var(--spacing-4);
}

.mb-5 {
  margin-block-end: var(--spacing-5);
}

.mb-auto {
  margin-block-end: var(--spacing-auto);
}

.ms-0 {
  margin-inline-start: var(--spacing-0);
}

.ms-1 {
  margin-inline-start: var(--spacing-1);
}

.ms-2 {
  margin-inline-start: var(--spacing-2);
}

.ms-3 {
  margin-inline-start: var(--spacing-3);
}

.ms-4 {
  margin-inline-start: var(--spacing-4);
}

.ms-5 {
  margin-inline-start: var(--spacing-5);
}

.ms-auto {
  margin-inline-start: var(--spacing-auto);
}

.me-0 {
  margin-inline-end: var(--spacing-0);
}

.me-1 {
  margin-inline-end: var(--spacing-1);
}

.me-2 {
  margin-inline-end: var(--spacing-2);
}

.me-3 {
  margin-inline-end: var(--spacing-3);
}

.me-4 {
  margin-inline-end: var(--spacing-4);
}

.me-5 {
  margin-inline-end: var(--spacing-5);
}

.me-auto {
  margin-inline-end: var(--spacing-auto);
}

:root {
  --lato:
  	"Lato", "Open Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
  	"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --merriweather: "Merriweather", ui-serif, serif, var(--lato);
  --sans: var(--lato);
  --serif: var(--merriweather);
  font-family: var(--sans);
  color: #111;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6 .h6 {
  font-weight: 700;
  line-height: 1.2;
}

h1,
.h1 {
  font-size: clamp(
		32px,
		1.61vw + 25.95px,
		48px
	);
}

h2,
.h2 {
  font-size: clamp(
		24px,
		1.21vw + 19.46px,
		36px
	);
}

h3,
.h3 {
  font-size: clamp(
		19px,
		0.71vw + 16.35px,
		26px
	);
}

h4,
.h4 {
  font-size: clamp(
		16px,
		0.4vw + 14.49px,
		20px
	);
}

h5,
.h5 {
  font-size: 13px;
}

h6,
.h6 {
  font-size: 11px;
}

body,
.font-normal {
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
}

.font-small {
  font-size: clamp(
		12px,
		0.2vw + 11.24px,
		14px
	);
  line-height: clamp(
		20px,
		0.2vw + 19.24px,
		22px
	);
}

.font-large {
  font-size: clamp(
		18px,
		0.2vw + 17.24px,
		20px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6 .h6,
p, li, blockquote {
  overflow-wrap: break-word;
}

p, li, blockquote {
  text-wrap: pretty;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6 .h6,
p, li, blockquote {
  margin-inline: var(--text-align-margin-inline);
}

.text-start {
  text-align: start !important;
  --text-align-margin-inline: 0 auto !important;
}

.text-center {
  text-align: center !important;
  --text-align-margin-inline: auto !important;
}

.text-end {
  text-align: end !important;
  --text-align-margin-inline: auto 0 !important;
}

a {
  color: var(--teal);
  text-decoration: none;
}
a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

main .rich-text-content {
  margin-inline: auto;
  max-width: 51.75rem;
}
main .rich-text-content img {
  inline-size: auto;
}
main .rich-text-content h1, main .rich-text-content .h1, main .rich-text-content h2, main .rich-text-content .h2, main .rich-text-content h3, main .rich-text-content .h3, main .rich-text-content h4, main .rich-text-content .h4, main .rich-text-content h5, main .rich-text-content .h5, main .rich-text-content h6 .h6 {
  text-transform: capitalize;
}
main .rich-text-content h1 {
  font-size: clamp(
		20px,
		1.02vw + 16.18px,
		24px
	);
  line-height: clamp(
		28px,
		1.02vw + 24.18px,
		32px
	);
}
main .rich-text-content h2 {
  font-size: clamp(
		18px,
		0.51vw + 16.09px,
		20px
	);
  line-height: clamp(
		22px,
		0.51vw + 20.09px,
		24px
	);
}
main .rich-text-content h3 {
  font-size: clamp(
		16px,
		0.51vw + 14.09px,
		18px
	);
  line-height: clamp(
		22px,
		0.51vw + 20.09px,
		24px
	);
}
main .rich-text-content h4 {
  font-size: clamp(
		14px,
		0.51vw + 12.09px,
		16px
	);
  line-height: clamp(
		20px,
		1.02vw + 16.18px,
		24px
	);
}

sup {
  vertical-align: top;
}

.button, .consent-dialog__button,
.btn {
  inline-size: fit-content;
  block-size: fit-content;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-inline: 1rem;
  padding-block: 0.625rem;
  border-radius: 0.375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  border: thin solid var(--clopay-primary);
  color: var(--clopay-primary);
  background-color: white;
}
.button:is(:hover, :focus-visible), .consent-dialog__button:is(:hover, :focus-visible),
.btn:is(:hover, :focus-visible) {
  background-color: var(--clopay-primary);
  color: white;
  text-decoration: none;
}
.button--primary, .consent-dialog__button:is(.btn-primary), .button-primary,
.btn--primary,
.btn-primary {
  background-color: var(--clopay-primary);
  color: white;
}
.button--primary:is(:hover, :focus-visible), .button-primary:is(:hover, :focus-visible),
.btn--primary:is(:hover, :focus-visible),
.btn-primary:is(:hover, :focus-visible) {
  background-color: var(--clopay-primary-alt);
  border-color: var(--clopay-primary-alt);
}
.button--secondary, .consent-dialog__button:is(.btn-secondary), .button-secondary,
.btn--secondary,
.btn-secondary {
  background-color: var(--clopay-secondary);
  border-color: var(--clopay-secondary);
  color: var(--dark-gray);
}
.button--secondary:is(:hover, :focus-visible), .button-secondary:is(:hover, :focus-visible),
.btn--secondary:is(:hover, :focus-visible),
.btn-secondary:is(:hover, :focus-visible) {
  background-color: var(--clopay-secondary-alt);
  border-color: var(--clopay-secondary-alt);
  color: var(--dark-gray);
}

.btn {
  display: inline-flex !important;
}

.tooltip--wrapper {
  align-items: center;
  column-gap: 0.25rem;
  display: inline-flex;
  inline-size: 100%;
  position: relative;
}
.tooltip--info {
  background-color: white;
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 1rem hsla(0, 0%, 0%, 0.25);
  inline-size: fit-content;
  max-block-size: 50vh;
  overflow: auto;
  padding-inline: clamp(
		8px,
		1.02vw + 4.18px,
		12px
	);
  padding-block: clamp(
		6px,
		1.02vw + 2.18px,
		10px
	);
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 10;
}

input:where([type=email], [type=number], [type=tel], [type=text], [type=url], [type=date], [type=month], [type=time], [type=week], [type=password], [type=search]) {
  background-color: white;
  border: thin solid var(--border-gray);
  border-radius: 0.375rem;
  color: black;
  font-size: inherit;
  line-height: inherit;
  padding-inline: 0.875em;
  padding-block: 0.625em;
}
input:where([type=email], [type=number], [type=tel], [type=text], [type=url], [type=date], [type=month], [type=time], [type=week], [type=password], [type=search])::placeholder {
  color: var(--gray);
}
input + .invalid-feedback {
  color: var(--red);
  font-size: clamp(
		12px,
		0.2vw + 11.24px,
		14px
	);
  line-height: clamp(
		20px,
		0.2vw + 19.24px,
		22px
	);
}

form .fields-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
}
form .fields-container > .row {
  display: grid;
  grid-template-columns: subgrid;
  gap: inherit;
}
form .fields-container > .row > .col-md-4 {
  grid-column: span 4;
}
form .fields-container > .row > .col-md-6 {
  grid-column: span 6;
}
form .fields-container > .row > .col-md-8 {
  grid-column: span 8;
}
form .fields-container > * {
  grid-column: span 12;
}
form .fields-container fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
form .fields-container fieldset:is(.dual-col) {
  display: grid;
  gap: 0.25em;
  grid-template-columns: repeat(2, 1fr);
}
form .fields-container fieldset .invalid-feedback {
  color: var(--red);
}
form .fields-container label {
  position: relative;
  display: flex;
  flex-direction: column;
}
form .fields-container label > span:first-child {
  pointer-events: none;
  display: block;
  line-height: 1.5;
  transition: transform 0.2s ease-in-out, padding 0.2s ease-in-out, color 0.2s ease-in-out;
}
form .fields-container label > span:first-child:is(:has(+ :is(input, textarea):placeholder-shown:not(:focus, .unique-placeholder)), :has(+ select:not(:focus) > option:checked:empty)) {
  transform: translateY(calc(100% + 0.625em));
  padding-inline: 0.875em;
  color: var(--gray);
}
form .fields-container label > span:first-child + :is(input, textarea):not(.unique-placeholder)::placeholder {
  opacity: 0;
}
form .fields-container :is(input, textarea, select) {
  border: none;
  border-radius: 0.25rem;
  background-color: #eff2f4;
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
  line-height: 1.5;
  padding-inline: 0.875em;
  padding-block: 0.625em;
}
form .fields-container :is(input, textarea, select).is-invalid {
  background-color: color-mix(in srgb, var(--red) 40%, transparent);
}
form .fields-container :is(input:where([type=email], [type=number], [type=tel], [type=text], [type=url], [type=date], [type=month], [type=time], [type=week], [type=password], [type=search]), textarea, select) {
  appearance: none;
  inline-size: 100%;
}
form .fields-container textarea {
  resize: vertical;
  min-block-size: 8.75rem;
  field-sizing: content;
}
form .fields-container select {
  padding-inline-end: 2em;
}
form .fields-container select + app-icon {
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
  pointer-events: none;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 1.5em;
  inset-block-end: 0;
  block-size: unset;
  margin-block-end: auto;
  inline-size: 2em;
}
form .fields-container button[type=submit] {
  margin-block-start: 1.5rem;
}
@media (max-width: 767.98px) {
  form .fields-container > .row > .col-md-4, form .fields-container > .row > .col-md-6, form .fields-container > .row > .col-md-8 {
    grid-column: span 12;
  }
  form .fields-container button[type=submit] {
    inline-size: 100%;
  }
}
@media (min-width: 768px) {
  form .fields-container button[type=submit] {
    margin-block-start: 1.5rem;
    margin-inline-start: auto;
    padding-inline: 2.25rem;
  }
}

@media (min-width: 768px) {
  [data-sf-role=checkboxes-field-container] div:has(.form-check) {
    column-count: 2;
    column-gap: 1em;
  }
}
[data-sf-role=checkboxes-field-container] .form-check {
  margin-block-end: 0.5rem;
}
[data-sf-role=checkboxes-field-container] .form-check > label {
  display: inline;
}

[data-sf-role=form-container] button[type=submit] {
  background-color: var(--clopay-primary);
  border: thin solid var(--clopay-primary);
  border-radius: 0.375rem;
  color: white;
  font-size: inherit;
  line-height: inherit;
  padding-block: 0.625rem;
  padding-inline: 1.5rem;
}
[data-sf-role=form-container] button[type=submit]:is(:hover, :focus-visible) {
  background-color: var(--clopay-primary-alt);
  border-color: var(--clopay-primary-alt);
}
[data-sf-role=form-container] > .valid-feedback, [data-sf-role=form-container] > .invalid-feedback {
  display: none;
  margin-block: 1.5rem;
}
[data-sf-role=form-container] > .valid-feedback.d-block, [data-sf-role=form-container] > .invalid-feedback.d-block {
  display: block;
}
[data-sf-role=form-container] .d-none {
  display: none !important;
}

select {
  background-color: white;
  border: thin solid rgba(0, 0, 0, 0.4);
  border-radius: 0.25rem;
  color: black;
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
  padding-inline: 0.875em;
  padding-block: 0.625em;
}

label:has(> select):has(> app-icon) {
  position: relative;
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
  --icon-reserve: calc(36 / 16 * 1em);
}
label:has(> select):has(> app-icon) > select {
  font: inherit;
  appearance: none;
  padding-inline-end: var(--icon-reserve);
}
label:has(> select):has(> app-icon) > app-icon {
  font: inherit;
  pointer-events: none;
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  block-size: 100%;
  inline-size: var(--icon-reserve);
}

/**
 * README:
 * Because the native <select> and <option> tags cannot be styled, we
 * create a 'fake' dropdown element that is positioned over the native
 * element. Furthermore, in an effort to maintain WCAG compliance,
 * when the user focus' into the element (i.e. via keyboard navigation), 
 * the custom dropdown element is hidden, and the native select is
 * displayed.
 */
app-dropdown-list,
.app-dropdown-list {
  align-items: center;
  display: flex;
  position: relative;
}

select:focus {
  outline: medium auto Highlight;
  outline: medium auto -webkit-focus-ring-color;
}

.dropdown-list {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: none;
}
.dropdown-list.show {
  z-index: 1;
}

.dropdown-select {
  background-color: white;
  border: thin solid rgba(0, 0, 0, 0.4);
  border-radius: 0.25rem;
  color: black;
  display: inline-flex;
  inline-size: 100%;
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
  line-height: 1.5;
  min-inline-size: 7.5rem;
  padding-inline: 0.875em;
  padding-block: 0.625em;
  position: relative;
  text-align: start;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-select:hover {
  color: currentColor;
}
.dropdown-select:disabled, .dropdown-select:disabled + .svg-icon {
  opacity: 0.5;
}
.dropdown-select + .svg-icon,
.dropdown-select .svg-icon {
  align-items: center;
  display: flex;
  padding-inline: 0.5rem;
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
}
.dropdown-select + .svg-icon svg,
.dropdown-select .svg-icon svg {
  fill: currentColor;
  font-size: 0.8125em;
  transform: rotate(0);
  transition: transform ease-in-out 0.125s;
}

.dropdownmenu {
  background-color: white;
  border: thin solid rgba(0, 0, 0, 0.4);
  display: none;
  max-height: 40vh;
  max-width: 100%;
  min-width: 100%;
  overflow-y: auto;
  position: absolute;
  top: 100%;
}
.dropdownmenu.show {
  display: block;
}
.dropdownmenu .dropdown-item {
  color: black;
  display: block;
  cursor: default;
  overflow: hidden;
  padding-inline: 0.875em;
  padding-block: 0.625em;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdownmenu .dropdown-item.hidden {
  display: none;
}
.dropdownmenu .dropdown-item:hover, .dropdownmenu .dropdown-item:focus {
  background-color: var(--clopay-primary-alt);
  color: white;
}

.dropdown-text {
  color: currentColor;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Styles for mouse/stylus users only */
@media (hover: hover) {
  app-dropdown-list {
    /* Show native select if keyboard controls */
  }
  app-dropdown-list .dropdown-list {
    display: block;
  }
  app-dropdown-list select:focus ~ .dropdown-list {
    display: none;
  }
}
:root {
  --table-bg: white;
  --table-color: inherit;
  --table-border: thin solid var(--border-gray);
  --table-border-radius: 0.25rem;
  --table-box-shadow: 0 0.25rem 1rem hsl(0 0% 0% / 10%);
  --table-cell-padding-x: 1rem;
  --table-cell-padding-y: 0.5rem;
  --table-striped-bg: var(--light-gray);
  --table-striped-color: inherit;
  --table-header-bg: var(--clopay-primary);
  --table-header-border: thin solid var(--clopay-primary-alt);
  --table-header-color: white;
  --table-header-font-weight: 600;
}
@media (max-width: 991.98px) {
  :root {
    --table-rowgroup-height: 5.5625rem;
    --table-cell-padding-x: 1rem;
    --table-cell-padding-y: 0.75rem;
  }
}

.table {
  background-color: var(--table-bg);
  border: var(--table-border);
  border-collapse: collapse;
  border-radius: var(--table-border-radius);
  box-shadow: var(--table-box-shadow);
  color: var(--table-color);
}
.table th,
.table td {
  border-width: thin;
  padding-block: var(--table-cell-padding-y);
  padding-inline: var(--table-cell-padding-x);
}
.table th {
  color: var(--table-header-color);
  font-weight: var(--table-header-font-weight);
  text-align: start;
}
.table th:is([scope=col]) {
  background-color: var(--table-header-bg);
}
.table th:is([scope=colgroup]) {
  background-color: var(--divider-gray);
  color: var(--table-color);
}
.table th:is([scope=row]) * {
  font-weight: inherit;
}
.table td,
.table th[scope=row] {
  font-size: 0.875em;
}
.table td *,
.table th[scope=row] * {
  justify-content: center;
}
.table:is(.comparison) thead {
  --table-cell-padding-y: 1.5rem;
  border-bottom: var(--table-header-border);
}
.table:is(.comparison) td {
  text-align: center;
}
.table:is(.comparison) td ol,
.table:is(.comparison) td ul {
  text-align: start;
}
.table:is(.scrollable) {
  box-shadow: none;
  width: 100%;
}
.table-scroll-wrapper {
  box-shadow: var(--table-box-shadow);
  overflow: auto;
}
.table:is(.sticky) {
  border-collapse: separate;
  border-spacing: 0;
  border-width: 0;
  box-shadow: none;
  table-layout: fixed;
  white-space: nowrap;
}
.table:is(.sticky) thead th {
  border-bottom-width: thick;
}
.table:is(.sticky) thead th:is(:first-child) {
  position: sticky;
  left: 0;
}
.table:is(.sticky) tbody th {
  position: sticky;
  left: 0;
}
.table-sticky-wrapper {
  box-shadow: var(--table-box-shadow);
  overflow: auto;
  width: 100%;
}
.table:is(.striped) tbody tr:is(:nth-of-type(2n)) {
  background-color: var(--table-striped-bg);
  color: var(--table-striped-color);
}

:root {
  --header-size: 6.375rem;
}
@media (min-width: 1200px) {
  :root {
    --header-size: 7.125rem;
  }
}

body.is-editor app-menu > [slot=menu] > .invisible-slot.-sf-empty {
  inline-size: 9.25rem;
}

#header {
  position: sticky;
  inset-block-start: 0;
  isolation: isolate;
  z-index: 10;
  block-size: var(--header-size);
}

app-menu a {
  text-decoration: none;
}
app-menu a:hover, app-menu a:focus-visible {
  text-decoration: underline;
}
app-menu ul,
app-menu ol {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 1em;
  --gap: 0.75rem;
}
app-menu ul li,
app-menu ol li {
  max-inline-size: none;
  margin: 0;
  padding: 0;
}
app-menu ul li:not(:last-child),
app-menu ol li:not(:last-child) {
  margin-block-end: var(--gap);
}
app-menu ul li li:first-child,
app-menu ol li li:first-child {
  margin-block-start: var(--gap);
}
app-menu ul li::before,
app-menu ol li::before {
  display: none;
}
app-menu > [slot=search] {
  display: flow-root;
  align-self: center;
}
app-menu > [slot=utilities], app-menu > [slot=menu] {
  display: flex;
}
app-menu > [slot=utilities] {
  flex-wrap: wrap;
}
app-menu > [slot=utilities] .logo {
  opacity: 0.75;
  transition: opacity 0.15s ease-in-out;
}
app-menu > [slot=utilities] .logo img {
  block-size: 1rem;
  inline-size: auto;
}
app-menu > [slot=utilities] .logo:is(:hover, :focus-visible) {
  opacity: 1;
}
app-menu > [slot=menu] a.level-1,
app-menu > [slot=menu] app-details.level-1 ul {
  padding: 1rem;
}
app-menu > [slot=menu] a.level-1 {
  font-size: 0.875rem;
  line-height: 1;
}
app-menu > [slot=menu] a.level-1,
app-menu > [slot=menu] app-details.level-1::part(summary) {
  block-size: 100%;
  display: flex;
  align-items: center;
}
app-menu > [slot=menu] app-details > [slot=toggle-icon] svg {
  transition: transform 0.15s ease-in-out;
}
app-menu > [slot=menu] app-details[open] > [slot=toggle-icon] svg {
  transform: scaleY(-1);
}
app-menu > [slot=menu] li {
  break-inside: avoid;
}
@media (max-width: 1199.98px) {
  app-menu > [slot=logo] {
    margin-block: auto;
  }
  app-menu > [slot=logo] img, app-menu > [slot=logo]:is(img) {
    inline-size: 12.5rem;
  }
  app-menu > [slot=utilities] {
    margin-block: 0.625rem;
    justify-content: space-around;
    margin-inline: 1rem;
    gap: 0.75rem;
  }
  app-menu > [slot=utilities] .logo img {
    block-size: 0.875rem;
  }
  app-menu > [slot=call] {
    inline-size: 2.8125rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  app-menu > [slot=call] > app-icon svg {
    inline-size: 1.1875rem;
  }
  app-menu > [slot=menu] {
    margin-block-start: 6.375rem;
    margin-block-end: 2.125rem;
    flex-direction: column;
    gap: 3rem;
    color: black;
  }
  app-menu > [slot=menu] a {
    color: inherit;
  }
  app-menu > [slot=menu] a.level-1,
  app-menu > [slot=menu] app-details.level-1 ul {
    padding-inline: var(--page-margin);
    font-size: 1.25rem;
    font-weight: 600;
    --gap: 1.75rem;
  }
  app-menu > [slot=menu] a.level-1 {
    block-size: auto;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
  }
  app-menu > [slot=menu] app-details::part(toggle) {
    inline-size: 2.8125rem;
    align-self: stretch;
    justify-content: center;
    margin-inline-end: var(--page-margin);
  }
  app-menu > [slot=menu] app-details > [slot=toggle-icon] svg {
    inline-size: 1.5rem;
  }
}
@media (min-width: 1200px) {
  app-menu > [slot=logo] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  app-menu > [slot=logo] img, app-menu > [slot=logo]:is(img) {
    inline-size: 12.5rem;
  }
  app-menu > [slot=utilities] {
    display: flex;
    gap: 1.5rem;
  }
  app-menu > [slot=menu] a.level-1 {
    color: var(--clopay-primary);
    border-block: 0.25rem solid transparent;
    transition: color 0.15s ease-in-out, border-block-end-color 0.15s ease-in-out;
  }
  app-menu > [slot=menu] app-details.level-1[open=""] a.level-1,
  app-menu > [slot=menu] a.level-1:is(:hover, :focus-visible) {
    text-decoration: none;
    border-block-end-color: currentColor;
  }
  app-menu > [slot=menu] app-details.level-1::part(summary) {
    gap: 0;
  }
  app-menu > [slot=menu] app-details.level-1 > [slot=summary] {
    padding-inline-end: 0;
  }
  app-menu > [slot=menu] app-details.level-1::part(toggle) {
    padding: 0.75rem;
    padding-inline-end: 1rem;
    justify-content: center;
  }
  app-menu > [slot=menu] app-details.level-1 > [slot=toggle-icon] svg {
    inline-size: 0.875rem;
  }
  app-menu > [slot=menu] app-details.level-1::part(content) {
    position: absolute;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  }
  app-menu > [slot=menu] app-details.level-1 a {
    text-decoration: none;
  }
  app-menu > [slot=menu] app-details.level-1 .multicolumn {
    column-count: var(--suggested-columns);
    column-gap: 2em;
  }
  app-menu > [slot=menu] app-details.level-1 .suggested-break {
    break-after: column;
  }
  @supports (break-after: column) {
    app-menu > [slot=menu] app-details.level-1 .suggested-break:is(li) {
      margin-block-end: 0;
    }
  }
  app-menu .button, app-menu .consent-dialog__button {
    align-self: center;
    margin-block: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
  }
}

ol.breadcrumb {
  margin: 0;
  padding-inline: var(--page-margin);
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch;
  color: var(--gray);
}
ol.breadcrumb li {
  display: flex;
  gap: inherit;
}
ol.breadcrumb li a {
  color: inherit;
}
ol.breadcrumb li:not(:first-child)::before {
  content: "/";
}
ol.breadcrumb li:last-child {
  color: var(--dark-gray);
}

#footer {
  display: grid;
  padding-inline: var(--page-margin);
  padding-block-start: 3.75rem;
  padding-block-end: 3rem;
  background-color: var(--pale-white);
}
#footer a {
  text-decoration: none;
}
#footer a:is(:hover, :focus-visible) {
  text-decoration: underline;
}
#footer .columns {
  grid-area: columns;
  column-width: 15.5rem;
  padding-block-end: 1.25rem;
  border-block-end: thin solid var(--border-gray);
  margin-block-end: 1.25rem;
}
#footer .columns .column {
  break-inside: avoid;
  margin-block-end: 2.5rem;
}
#footer .columns .column h2,
#footer .columns .column li {
  margin: 0;
  margin-block-end: 0.5rem;
}
#footer .columns .column h2 a,
#footer .columns .column li a {
  color: inherit;
}
#footer .columns .column h2 {
  color: var(--gray);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-block-end: 1.5rem;
}
#footer .columns .column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .columns .column ul li {
  color: var(--dark-gray);
  font-size: 1rem;
  line-height: 1.5;
  margin-block-end: 1rem;
}
#footer .columns .column ul li .logo img {
  block-size: 2rem;
  max-inline-size: 8rem;
  inline-size: auto;
}
#footer .socials {
  grid-area: socials;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}
#footer .socials p {
  margin: 0;
}
#footer .socials .social-icons {
  block-size: fit-content;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#footer .socials .social-icons > a, #footer .socials .social-icons > app-details > [slot=toggle-icon] {
  display: flex;
  padding: 0.5rem;
  background-color: #f0f1f3;
  color: var(--clopay-primary);
  clip-path: circle();
  align-items: center;
  justify-content: center;
}
#footer .socials .social-icons > a svg, #footer .socials .social-icons > app-details > [slot=toggle-icon] svg {
  max-inline-size: 1rem;
  max-block-size: 1rem;
}
#footer .socials .social-icons app-details {
  position: relative;
}
#footer .socials .social-icons app-details::part(content) {
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 50%;
  transform: translate(calc(var(--translate-x, 0px) - 50%), var(--translate-y, 0px));
  padding: 1rem;
}
#footer .socials .social-icons app-details .brand-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  background-color: var(--pale-white);
  padding: 1rem;
  border: thin solid var(--border-gray);
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.2);
}
#footer .socials .social-icons app-details .brand-menu a {
  display: block;
}
#footer .socials .social-icons app-details .brand-menu a img {
  block-size: 2rem;
  max-inline-size: 8rem;
}
#footer .copyright {
  grid-area: copyright;
  margin-block: 0.875rem;
}
#footer .copyright p {
  margin: 0;
}
@media (max-width: 800px) {
  #footer {
    grid-template: "columns" "socials" "copyright"/minmax(0, 1fr);
  }
}
@media (min-width: 800.01px) {
  #footer {
    grid-template: "columns columns columns" "copyright . socials"/minmax(0, 1fr) 1rem minmax(0, 1fr);
  }
  #footer .socials {
    margin-inline-start: auto;
  }
}

.short-hero {
  padding-block: clamp(
		26px,
		2.22vw + 17.68px,
		48px
	);
  position: relative;
}
.short-hero img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}
.short-hero picture + hgroup {
  color: white;
}
.short-hero hgroup {
  isolation: isolate;
}
.short-hero hgroup h1 {
  margin: 0;
  font-size: clamp(
		24px,
		0.81vw + 20.97px,
		32px
	);
  line-height: clamp(
		32px,
		1.61vw + 25.95px,
		48px
	);
  font-weight: 700;
}
.short-hero hgroup > div {
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		20px,
		0.4vw + 18.49px,
		24px
	);
  font-weight: 700;
}
.short-hero hgroup > div p {
  margin: 0;
  margin-block-start: 0.5rem;
}
@media (max-width: 768px) {
  .short-hero hgroup p {
    font-weight: 500;
  }
}

.basic-hero {
  padding-inline: var(--large-page-margin);
  padding-block: clamp(
		56px,
		2.83vw + 45.4px,
		84px
	);
  min-block-size: clamp(
		312px,
		20.99vw + 233.29px,
		520px
	);
  position: relative;
  color: white;
}
.basic-hero::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent 85%);
}
.basic-hero img {
  z-index: -1;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.basic-hero hgroup {
  isolation: isolate;
  max-inline-size: 35rem;
}
.basic-hero hgroup h1 {
  margin: 0;
  font-size: clamp(
		24px,
		1.61vw + 17.95px,
		40px
	);
  line-height: clamp(
		32px,
		2.22vw + 23.68px,
		54px
	);
}
.basic-hero hgroup > div {
  font-size: 1rem;
  line-height: 1.5rem;
}
.basic-hero hgroup > div p {
  margin: 0;
  margin-block-start: 0.5rem;
}

.grid-hero {
  isolation: isolate;
  position: relative;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  block-size: clamp(
		408px,
		-10.09vw + 545.84px,
		508px
	);
  color: white;
}
.grid-hero > :is(.a, .b, .c) {
  position: relative;
}
.grid-hero > :is(.a, .b, .c) > a {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 1;
}
.grid-hero > .a {
  grid-area: a;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.grid-hero > .a::before {
  content: "";
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 75%);
}
.grid-hero > .a > :is(picture, img) {
  grid-area: 1/1;
}
.grid-hero > .b {
  grid-area: b;
}
.grid-hero > .c {
  grid-area: c;
}
.grid-hero img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.grid-hero hgroup {
  grid-row: 1/-1;
  grid-column: 1/-1;
  margin-block-start: auto;
  margin-block-end: 2.5rem;
  margin-inline: var(--page-margin);
  block-size: fit-content;
  max-inline-size: 35rem;
  isolation: isolate;
}
.grid-hero hgroup::before {
  z-index: -1;
  content: "";
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 7.5rem);
}
.grid-hero hgroup h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(
		24px,
		0.81vw + 20.97px,
		32px
	);
  line-height: clamp(
		32px,
		1.61vw + 25.95px,
		48px
	);
}
.grid-hero hgroup > div {
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		20px,
		0.4vw + 18.49px,
		24px
	);
}
.grid-hero hgroup > div p {
  margin: 0;
}
@media (max-width: 768px) {
  .grid-hero {
    grid-template: "b" minmax(0, 1fr) "c" minmax(0, 1fr) "a" minmax(0, 1fr);
  }
}
@media (min-width: 768.01px) {
  .grid-hero {
    grid-template: "a b" minmax(0, 1fr) "a c" minmax(0, 1fr)/minmax(0, 3fr) minmax(0, 2fr);
  }
}

.bottom-banner {
  padding-inline: var(--page-margin);
  padding-block: 2.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: var(--light-gray);
  gap: clamp(
		14px,
		6.66vw + -10.97px,
		80px
	);
}
.bottom-banner p {
  margin: 0;
}
.bottom-banner__images {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.bottom-banner__images > * {
  padding-inline: clamp(
		20px,
		2.02vw + 12.43px,
		40px
	);
}
.bottom-banner__images > *:not(:last-child) {
  border-inline-end: thin solid hsla(214, 16%, 74%, 0.4);
}
.bottom-banner__images img {
  max-inline-size: clamp(
		90px,
		3.83vw + 75.62px,
		128px
	);
  max-block-size: clamp(
		22px,
		1.82vw + 15.19px,
		40px
	);
}
@media (max-width: 768px) {
  .bottom-banner__images > :first-child {
    padding-inline-start: 0;
  }
  .bottom-banner__images > :last-child {
    padding-inline-end: 0;
  }
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
}

.icon-card-container {
  container: icon-card/inline-size;
  block-size: 100%;
}

.icon-card {
  position: relative;
  block-size: 100%;
  display: flex;
  padding: clamp(
		24px,
		0.81vw + 20.97px,
		32px
	);
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 1rem hsla(0, 0%, 0%, 0.06);
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.icon-card:has(.content h2 a):is(:hover, :focus-within) {
  box-shadow: 0 0.125rem 0.375rem hsla(0, 0%, 0%, 0.2);
}
.icon-card:has(.content h2 a):active {
  box-shadow: 0 0.0625rem 0.125rem hsla(0, 0%, 0%, 0.5);
  transform: scale(0.99);
}
.icon-card img {
  inline-size: 2.5rem;
  block-size: fit-content;
}
.icon-card .content {
  display: flex;
  flex-direction: column;
}
.icon-card .content h2 {
  margin: 0;
  margin-block: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--dark-gray);
}
.icon-card .content h2 a {
  color: inherit;
  text-decoration: none;
}
.icon-card .content h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.icon-card .content .description {
  margin-block-start: auto;
  color: var(--gray);
}
.icon-card .content .description p {
  margin: 0;
  margin-block-start: 0.5rem;
}
@container icon-card (max-width: 300px) {
  .icon-card {
    flex-direction: column;
  }
}
@container icon-card not (max-width: 300px) {
  .icon-card {
    column-gap: 1rem;
  }
  .icon-card .content h2 {
    margin-block-start: 0;
  }
}

.image-card {
  margin: 0;
  position: relative;
  transition: transform 0.2s ease-in-out;
}
.image-card picture {
  display: block;
  max-block-size: 100%;
  max-inline-size: 100%;
  overflow: hidden;
}
.image-card img {
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 19.5rem;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 0.375s ease-in-out;
}
.image-card:has(a):is(:hover, :focus-within) img {
  transform: scale(1.05);
}
.image-card:has(a):active {
  transform: scale(0.99);
}
.image-card:has(a):active img {
  transform: scale(1);
}
.image-card figcaption {
  background-color: var(--clopay-primary);
  color: white;
  padding-block: clamp(
		14px,
		0.51vw + 12.09px,
		16px
	);
  padding-inline: clamp(
		16px,
		2.04vw + 8.37px,
		24px
	);
}
.image-card figcaption a {
  color: inherit;
}
.image-card figcaption a::after {
  content: "";
  box-shadow: 0 0.0625rem 0.125rem inset transparent;
  position: absolute;
  inset: 0;
  transition: box-shadow 0.2s ease-in-out;
}
.image-card figcaption a:is(:hover, :focus-visible):after {
  box-shadow: 0 0.25rem 1rem inset hsla(0, 0%, 0%, 0.5);
}
.image-card figcaption a:active::after {
  box-shadow: 0 0.125rem 0.375rem inset hsla(0, 0%, 0%, 0.2);
}

.door-type {
  border-block-end: thin solid var(--gray);
  color: var(--gray);
  padding-block: 1em;
  padding-inline: 0.75em;
  transition: border 0.2s ease-in-out;
}
.door-type:is(.selected) {
  border-block-end: 0.25rem solid var(--clopay-primary);
  color: var(--clopay-primary);
  font-weight: 700;
}
.door-type:is(:hover, :focus-visible, :active) {
  border-block-end-width: 0.25rem;
  text-decoration: none;
}
.door-type--wrapper {
  display: flex;
  justify-content: center;
}

.download-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-block: 1.5rem 0.75rem;
}
.download-filters .download-filter {
  border-radius: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.download-filters .download-filter.selected {
  background-color: var(--clopay-primary);
  color: white;
}

.download-listing {
  inline-size: 100%;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .download-listing {
    max-inline-size: 80ch;
  }
}
@media (max-width: 767.98px) {
  .download-listing {
    padding-inline: var(--page-margin);
  }
}
.download-listing__product {
  background-color: white;
  border: 0.15em solid var(--border-gray);
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 1rem hsla(0, 0%, 0%, 0.06);
  margin-block-end: 1rem;
  transition: box-shadow 0.2s ease-in-out;
}
.download-listing__product::part(content), .download-listing__product::part(toggle) {
  padding-inline: clamp(
		12px,
		0.67vw + 6.86px,
		16px
	);
}
.download-listing__product [slot=toggle-label] {
  font-size: clamp(
		16px,
		0.67vw + 10.86px,
		20px
	);
  line-height: clamp(
		20px,
		0.67vw + 14.86px,
		24px
	);
}
.download-listing__product.pre-transition::part(content) {
  inset-inline: clamp(
		12px,
		0.67vw + 6.86px,
		16px
	);
}
.download-listing__product.transitioning::part(content) {
  overflow: hidden;
}
.download-listing__product.transitioning:not([open])::part(content) {
  animation: expand-content 0.3s linear reverse;
}
.download-listing__product.transitioning[open]::part(content) {
  animation: expand-content 0.3s linear;
}
.download-listing__product:is(:hover, :focus-within) {
  box-shadow: 0 0.125rem 0.375rem hsla(0, 0%, 0%, 0.2);
}
.download-listing__product-content {
  inline-size: 100%;
}
.download-listing__product-content h4 {
  font-weight: 500;
  font-size: clamp(
		16px,
		0.33vw + 13.43px,
		18px
	);
  line-height: clamp(
		20px,
		0.33vw + 17.43px,
		22px
	);
  margin-block: 0 0.75em;
}
.download-listing__product-header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.download-listing__product-header a {
  align-items: center;
  column-gap: 0.375em;
  display: inline-flex;
  margin-block-end: 0.75em;
}
.download-listing__downloads {
  column-count: 2;
  list-style: none;
  margin-block: 0.75em 0;
  padding-inline-start: 0;
}
.download-listing__downloads:is(.single) {
  column-count: 1;
}
.download-listing__downloads > li {
  break-inside: avoid-column;
}
.download-listing__downloads > li strong {
  font-weight: 600;
}
@container download-list (max-width: 640px) {
  .download-listing__downloads {
    column-count: 1;
  }
}
.download-listing__downloads--wrapper {
  container: download-list/inline-size;
  padding-block-end: 1.75em;
}
.download-listing__downloads--wrapper:not(:last-child) {
  border-block-end: thin solid var(--border-gray);
  margin-block-end: 1.25em;
}
.download-listing__downloads--wrapper > h4 {
  color: var(--gray);
  font-style: italic;
}

:is(.product-card, .products-carousel .embla__slide) {
  position: relative;
  display: flex;
  flex-direction: column;
}
:is(.product-card, .products-carousel .embla__slide) > picture {
  display: flex;
}
:is(.product-card, .products-carousel .embla__slide) > picture img {
  aspect-ratio: 115/64;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}
:is(.product-card, .products-carousel .embla__slide) .slide-link {
  position: absolute;
  inset: 0;
}
:is(.product-card, .products-carousel .embla__slide) .content-wrapper {
  flex-grow: 1;
  display: flex;
  gap: 1.5rem;
  margin-block: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
:is(.product-card, .products-carousel .embla__slide) .content-wrapper .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-inline-size: 70ch;
  color: var(--gray);
}
:is(.product-card, .products-carousel .embla__slide) .content-wrapper h2 {
  margin-block-start: 0;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--dark-gray);
}
:is(.product-card, .products-carousel .embla__slide) .content-wrapper .colors {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
:is(.product-card, .products-carousel .embla__slide) .content-wrapper .colors img {
  border-radius: 999px;
  inline-size: 1rem;
  block-size: 1rem;
  object-fit: cover;
}
:is(.product-card, .products-carousel .embla__slide) .content-wrapper .actions {
  display: flex;
  gap: 1rem;
  padding-block-start: 1rem;
  margin-block-start: auto;
}
:is(.product-card, .products-carousel .embla__slide) .content-wrapper .actions .button, :is(.product-card, .products-carousel .embla__slide) .content-wrapper .actions .consent-dialog__button {
  padding-inline: 1.5rem;
}
:is(.product-card, .products-carousel .embla__slide) .content-wrapper .actions .compare-checkbox {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
:is(.product-card, .products-carousel .embla__slide) .content-wrapper .actions .compare-checkbox input {
  aspect-ratio: 1;
  inline-size: 1rem;
  margin: 0;
  accent-color: var(--clopay-primary);
}
@media (max-width: 768px) {
  :is(.product-card, .products-carousel .embla__slide) .content-wrapper {
    flex-direction: column;
  }
}
@media (min-width: 768.01px) {
  :is(.product-card, .products-carousel .embla__slide) .content-wrapper {
    justify-content: space-between;
  }
}

.products-carousel {
  padding-block: 5rem;
  display: grid;
}
.products-carousel:is(.align-start) {
  padding-inline-start: 0;
}
.products-carousel:not(.align-start) {
  padding-inline-end: 0;
}
.products-carousel:not(.align-start) .embla {
  margin-inline-start: auto;
}
.products-carousel > aside {
  grid-area: aside;
  color: var(--dark-gray);
  margin-trim: block;
}
.products-carousel > aside > :last-child {
  margin-block-end: 0;
}
.products-carousel > aside h2,
.products-carousel > aside p {
  margin-block-end: 1rem;
}
.products-carousel > aside h2 {
  font-size: 2.5rem;
  line-height: 1.35;
  font-weight: 500;
}
.products-carousel > aside p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.products-carousel .embla {
  grid-area: carousel;
  max-inline-size: 62.5rem;
}
.products-carousel .embla__controls {
  inline-size: fit-content;
}
.products-carousel .embla__buttons {
  display: flex;
  gap: 2.5rem;
  color: var(--clopay-primary);
}
.products-carousel .embla__button svg {
  inline-size: 3.75rem;
}
.products-carousel > .button, .products-carousel > .consent-dialog__button {
  grid-area: button;
  margin-block-start: 2rem;
  padding-block: 0.75rem;
  padding-inline: 2.75rem;
}
@media (max-width: 768px) {
  .products-carousel {
    padding-block-start: 0;
    padding-inline: 0;
    grid-template: "aside" "carousel" "button"/minmax(0, 1fr);
    gap: 1.25rem;
  }
  .products-carousel > aside {
    margin-inline: var(--page-margin);
  }
  .products-carousel .embla__slide > picture {
    display: block;
    margin-inline-start: var(--page-margin);
  }
  .products-carousel .embla__slide .content-wrapper {
    margin-inline: var(--page-margin);
  }
  .products-carousel .embla__controls {
    margin-inline: auto;
  }
  .products-carousel > .button, .products-carousel > .consent-dialog__button {
    margin-inline: auto;
  }
  .products-carousel:is(.align-start) .embla__slide > picture {
    margin-inline-start: 0;
    margin-inline-end: var(--page-margin);
  }
}
@media (min-width: 768.01px) {
  .products-carousel {
    grid-template: "aside  . carousel" minmax(0, 1fr) "button . carousel" minmax(0, 1fr)/23.25rem 3rem minmax(0, 1fr);
  }
  .products-carousel > aside {
    align-self: end;
  }
  .products-carousel .embla__slide .content-wrapper {
    margin-inline-end: var(--page-margin);
  }
  .products-carousel:is(.align-start) {
    grid-template: "carousel .  aside" minmax(0, 1fr) "carousel . button" minmax(0, 1fr)/minmax(0, 1fr) 3rem 23.25rem;
  }
  .products-carousel:is(.align-start) .embla__slide .content-wrapper {
    margin-inline-start: var(--page-margin);
    margin-inline-end: 0;
  }
  .products-carousel:is(.align-start) .embla__controls {
    margin-inline-start: auto;
  }
}

.image-cards-carousel {
  padding-block: clamp(
		42px,
		7.06vw + 15.51px,
		112px
	);
  background: linear-gradient(to bottom, rgba(241, 240, 234, 0), var(--light-gray));
}
.image-cards-carousel > h2 {
  margin: 0;
  color: var(--dark-gray);
  font-size: clamp(
		20px,
		1.21vw + 15.46px,
		32px
	);
  line-height: clamp(
		28px,
		2.02vw + 20.43px,
		48px
	);
  font-weight: 700;
}
.image-cards-carousel > .description {
  color: var(--gray);
}
.image-cards-carousel > .description p {
  margin: 0;
  margin-block-start: 0.5rem;
}
.image-cards-carousel .embla {
  --xs-column-count: 1;
  --sm-column-count: 2;
  --md-column-count: 2;
  --lg-column-count: 3;
  --xl-column-count: 4;
  --2xl-column-count: 4;
  margin-block-start: 2rem;
}
.image-cards-carousel .embla__slide {
  position: relative;
}
.image-cards-carousel .embla__slide img {
  margin-block-end: 0.75rem;
  aspect-ratio: 1;
  object-fit: cover;
  inline-size: 100%;
}
.image-cards-carousel .embla__slide h3 {
  margin: 0;
  color: var(--dark-gray);
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		20px,
		0.4vw + 18.49px,
		24px
	);
  font-weight: 700;
}
.image-cards-carousel .embla__slide h3 a {
  color: inherit;
}
.image-cards-carousel .embla__slide h3 a::before {
  content: "";
  position: absolute;
  inset: 0;
}
.image-cards-carousel .embla__slide h3 a:is(:hover, :focus-visible) {
  text-decoration: none;
}
.image-cards-carousel .embla__slide > .description {
  color: var(--gray);
}
.image-cards-carousel .embla__slide > .description p {
  margin: 0;
  margin-block-start: 0.375rem;
}
.image-cards-carousel .embla__controls {
  margin-block-start: 1rem;
  text-align: center;
}
.image-cards-carousel .embla__buttons {
  display: flex;
  gap: 2.5rem;
  color: var(--clopay-primary);
}
.image-cards-carousel .embla__button svg {
  inline-size: 3.75rem;
}
.image-cards-carousel .embla__bullets {
  margin-block-start: 2rem;
}
@media (max-width: 768px) {
  .image-cards-carousel > h2 {
    text-align: center;
  }
  .image-cards-carousel > .description {
    text-align: center;
  }
}
.accordion {
  display: flex;
  flex-direction: column;
}
.accordion app-details {
  padding-inline: 1rem;
  padding-block: 1.5rem;
  border-block-end: thin solid var(--divider-gray);
}
.accordion app-details > app-icon {
  color: var(--divider-gray);
  inline-size: 1.5rem;
  block-size: 1.5rem;
}
.accordion app-details > app-icon svg {
  inline-size: 1.125rem;
  transition: transform 0.15s ease-in-out;
}
.accordion app-details::part(summary) {
  font-weight: 500;
}
.accordion app-details::part(toggle) {
  margin-inline-start: auto;
}
.accordion app-details > .content {
  padding-block-start: 1.5rem;
  padding-inline-end: 1.5rem;
}
.accordion app-details[open] > app-icon svg {
  transform: scaleY(-1);
}
.accordion app-details.transitioning::part(content) {
  overflow: hidden;
}
.accordion app-details.transitioning:not([open])::part(content) {
  animation: expand-content 0.2s linear reverse;
}
.accordion app-details.transitioning[open]::part(content) {
  animation: expand-content 0.2s linear;
}

.media-section {
  padding-block: 3.75rem;
  color: var(--dark-gray);
}
.media-section h2,
.media-section h3 {
  margin: 0;
  font-size: clamp(
		20px,
		0.4vw + 18.49px,
		24px
	);
  line-height: clamp(
		28px,
		0.4vw + 26.49px,
		32px
	);
  font-weight: 700;
}
.media-section .description {
  margin-block-start: 0.375rem;
  color: var(--gray);
}
.media-section .description p {
  margin: 0;
}
.media-section .side-by-side {
  margin-block-start: clamp(
		24px,
		1.61vw + 17.95px,
		40px
	);
  display: grid;
  justify-content: center;
  gap: clamp(
		24px,
		1.61vw + 17.95px,
		40px
	);
}
.media-section .side-by-side .content:has(> .invisible-slot > .accordion:first-child) > :is(h3, .description) {
  margin-inline-start: 1rem;
}
.media-section .side-by-side .content > .button, .media-section .side-by-side .content > .consent-dialog__button {
  margin-block-start: 3rem;
}
@media (max-width: 1024px) {
  .media-section {
    padding-inline: 0;
  }
  .media-section > :not(.side-by-side), .media-section > .side-by-side > :not(:first-child) {
    padding-inline: var(--page-margin);
  }
  .media-section > h2, .media-section > .description {
    text-align: center;
  }
  .media-section .side-by-side {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1024.01px) {
  .media-section .side-by-side {
    grid-template-columns: minmax(0, 1fr) minmax(min-content, 1fr);
  }
}

.faq-menu {
  display: flex;
  row-gap: 0;
  flex-direction: column;
}
@media (min-width: 768px) {
  .faq-menu {
    align-self: start;
    position: sticky;
    inset-block-start: var(--total-fixed-to-top);
  }
}
.faq-menu > app-details {
  background-color: var(--light-gray);
  padding: 0;
}
.faq-menu > app-details > app-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}
.faq-menu > app-details > app-icon svg {
  inline-size: 1.125rem;
  transition: transform 0.15s ease-in-out;
}
.faq-menu > app-details::part(summary) {
  font-weight: 700;
  border-inline-start: 3px solid transparent;
  border-block-end: thin solid var(--divider-gray);
  transition: border 0.2s ease-in-out;
}
.faq-menu > app-details::part(toggle) {
  margin-inline-start: auto;
  padding-inline: 1rem;
  padding-block: 1.5rem;
}
.faq-menu > app-details > .content {
  font-size: clamp(
		12px,
		0.2vw + 11.24px,
		14px
	);
  line-height: clamp(
		20px,
		0.2vw + 19.24px,
		22px
	);
  padding-block: 1rem;
  padding-inline-end: 1.5rem;
}
.faq-menu > app-details > .content ul {
  margin-block: 0;
}
.faq-menu > app-details > .content ul li {
  color: var(--gray);
}
.faq-menu > app-details > .content ul li:not(:last-child) {
  margin-block-end: 1rem;
}
.faq-menu > app-details > .content ul li a {
  color: inherit;
  transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
}
.faq-menu > app-details > .content ul li a:is(:hover, :focus-visible) {
  color: var(--clopay-primary);
  font-weight: 700;
  text-decoration: none;
}
.faq-menu > app-details[open] > app-icon svg {
  transform: scaleY(-1);
}
.faq-menu > app-details[open]::part(summary) {
  border-inline-start-color: var(--clopay-primary);
}
.faq-menu > app-details.transitioning::part(content) {
  overflow: hidden;
}
.faq-menu > app-details.transitioning:not([open])::part(content) {
  animation: expand-content 0.2s linear reverse;
}
.faq-menu > app-details.transitioning[open]::part(content) {
  animation: expand-content 0.2s linear;
}

.faq-group {
  padding-inline-start: clamp(
		0px,
		5.35vw + -41.1px,
		32px
	);
}
.faq-group:not([data-selected=""]) {
  display: none;
}
.faq-group > h2 {
  font-size: clamp(
		20px,
		0.4vw + 18.49px,
		24px
	);
  line-height: clamp(
		28px,
		0.4vw + 26.49px,
		32px
	);
  margin-block-start: 0;
}
.faq-group .faq {
  margin-block-end: 2.25rem;
}
.faq-group .faq > h3 {
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
}

.pagination {
  align-items: center;
  column-gap: 0.5rem;
  display: flex;
  justify-content: center;
  margin-block: 2rem 0;
  padding-inline-start: 0;
}
.pagination__control > button,
.pagination__control a {
  align-items: center;
  border: thin solid var(--clopay-primary);
  border-radius: 0.375rem;
  display: flex;
  font-weight: 700;
  justify-content: center;
  max-block-size: clamp(
		32px,
		2.04vw + 24.37px,
		40px
	);
  min-block-size: clamp(
		32px,
		2.04vw + 24.37px,
		40px
	);
  max-inline-size: clamp(
		32px,
		2.04vw + 24.37px,
		40px
	);
  min-inline-size: clamp(
		32px,
		2.04vw + 24.37px,
		40px
	);
  text-decoration: none;
  transition: background-color ease-in-out 0.25s, box-shadow ease-in-out 0.125s, color ease-in-out 0.25s;
}
.pagination__control > button:is(:disabled),
.pagination__control a:is(:disabled) {
  opacity: 0.5;
}
.pagination__control > button:is(:hover, :focus-visible):not(:disabled),
.pagination__control a:is(:hover, :focus-visible):not(:disabled) {
  background-color: var(--clopay-primary-alt);
  color: white;
}
.pagination__control > button:is([aria-current=page]), .pagination__control > button.arrow,
.pagination__control a:is([aria-current=page]),
.pagination__control a.arrow {
  background-color: var(--clopay-primary);
  color: white;
}
.pagination__control > button.arrow,
.pagination__control a.arrow {
  transform: translateX(0);
  transition: background-color ease-in-out 0.125s, box-shadow ease-in-out 0.125s, color ease-in-out 0.125s, transform ease-in 0.125s;
}
.pagination__control > button .icon,
.pagination__control a .icon {
  font-size: 0.625rem;
}
.pagination__control.left {
  margin-inline-end: 4rem;
}
.pagination__control.left > button:not(:disabled):is(:hover, :focus),
.pagination__control.left a:not(:disabled):is(:hover, :focus) {
  transform: translateX(-4px);
}
.pagination__control.right {
  margin-inline-start: 4rem;
}
.pagination__control.right > button:not(:disabled):is(:hover, :focus),
.pagination__control.right a:not(:disabled):is(:hover, :focus) {
  transform: translateX(4px);
}
.pagination__spacer {
  font-weight: 500;
  margin-inline: 0.5rem;
}

@media (min-width: 768.01px) {
  .pagination__spacer:is(.mobile-only) {
    display: none;
  }
}
@media (max-width: 768px) {
  .pagination {
    column-gap: 0.375rem;
  }
  .pagination__control.partial:not(.mobile-visible) {
    display: none;
  }
  .pagination__control.left {
    margin-inline-end: auto;
  }
  .pagination__control.right {
    margin-inline-start: auto;
  }
  .pagination__spacer {
    margin-inline: 0;
  }
}
.contact-card {
  text-align: center;
}
.contact-card img {
  margin-inline: auto;
}
.contact-card h2 {
  margin: 0;
  margin-block-end: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
}
.contact-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.contact-card .buttons {
  margin-block-start: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.contact-card .buttons .button, .contact-card .buttons .consent-dialog__button {
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.contact-card .bio {
  text-align: start;
}
:is(.contact-card .bio, .contact-card .bio p) {
  margin: 0;
  margin-block-start: 1rem;
}
.contact-card.individual img {
  margin-block-end: 0.5rem;
  inline-size: 8rem;
  aspect-ratio: 1;
  object-fit: cover;
  clip-path: circle();
}
.contact-card.team img {
  margin-block-end: 1.5rem;
}
.contact-card.standalone {
  background-color: var(--light-gray);
  border-radius: 0.25rem;
  padding: 1.5rem;
}
.contact-card.standalone.individual img {
  inline-size: 11.25rem;
}

.team-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20.625rem, 100%), 1fr));
  gap: 1.5rem;
}
.team-members .contact-card {
  border-radius: 0.25rem;
  padding: 1.5rem;
}

.consent-dialog {
  background-color: rgba(0, 0, 0, 0.86);
  border-top: 0.25rem solid var(--clopay-secondary);
  color: white;
  padding-block: 1.25rem;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1000;
}
.consent-dialog__container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-inline: var(--page-margin);
}
@media (min-width: 992px) {
  .consent-dialog__container {
    display: grid;
    grid-template-columns: 1fr 10rem 10rem;
  }
}
.consent-dialog__content {
  inline-size: 100%;
}
.consent-dialog__button {
  font-size: clamp(
		18px,
		0.2vw + 17.24px,
		20px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
  text-transform: uppercase;
}
@media (min-width: 992px) {
  .consent-dialog__button {
    margin-inline-start: auto;
  }
}
.product-comparison-container {
  position: relative;
  padding-inline: 0;
}
.product-comparison-container #compare-form {
  position: var(--compare-form-position, sticky);
  inset-block-start: var(--header-size);
  z-index: 1;
  background-color: white;
  padding-inline: var(--page-margin);
  padding-block: 0.75rem;
  box-shadow: 0 0 0.25rem hsla(0, 0%, 0%, 0.5);
}
.product-comparison-container #compare-form:has(button[disabled]) {
  display: none;
}
.product-comparison-container app-dialog#compare-dialog .dialog {
  background: none;
  max-inline-size: unset;
  max-block-size: unset;
  inline-size: 90vw;
  block-size: 90vh;
}
.product-comparison-container app-dialog#compare-dialog .dialog__fallback-header {
  margin-block-end: 1rem;
}
.product-comparison-container app-dialog#compare-dialog .dialog__body {
  padding: 0;
  background-color: white;
  color: black;
}

.full-product-listing {
  padding-inline: 0;
}
.full-product-listing .product-cards {
  padding-block: 1rem;
  padding-inline: var(--page-margin);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
  gap: 1.5rem;
}
@media (max-width: 500px) {
  .full-product-listing .product-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 500.01px) {
  .full-product-listing .product-cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.product-detail {
  margin-block: 1.875rem;
  padding-inline: var(--page-margin);
}
.product-detail .content > .d-flex {
  margin-block-end: 2.5rem;
  display: flex;
}
.product-detail .content > .d-flex > img {
  inline-size: 2rem;
  block-size: 2rem;
}
.product-detail .content > .d-flex > div > :first-child {
  margin-block-start: 0;
}
.product-detail .content > .d-flex > div > :last-child {
  margin-block-end: 0;
}
.product-detail__header h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 3rem;
}
.product-detail__actions {
  margin-block-start: 0.75rem;
  margin-block-end: 1.125rem;
  display: flex;
  gap: 1rem;
}
.product-detail__description {
  margin-block-start: 1.5rem;
}
.product-detail__gallery {
  scroll-margin-block-end: 3rem;
}
.product-detail__gallery .embla {
  --thumbs-gap: 1.625rem;
}
.product-detail__gallery .embla__slide {
  border-radius: 0.25rem;
  overflow: hidden;
}
.product-detail__gallery .embla-thumbs {
  margin-block-start: 1.875rem;
}
.product-detail__gallery .embla-thumbs__slide {
  block-size: 7rem;
  border: 2px solid var(--gray);
  border-radius: 0.25rem;
  overflow: hidden;
}
.product-detail__gallery .embla-thumbs__slide > * {
  display: flex;
  block-size: 100%;
}
.product-detail__accordion {
  container: product-accordion/inline-size;
  border-block-end: thin solid hsla(0, 0%, 0%, 0.4);
  padding-block-end: 3rem;
}
.product-detail__accordion > app-details {
  padding: 0;
  border: none;
  border-block-start: thin solid hsla(0, 0%, 0%, 0.4);
  padding-block-start: 3rem;
}
.product-detail__accordion > app-details:not(:first-child) {
  margin-block-start: 3rem;
}
.product-detail__accordion > app-details::part(summary) {
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 2rem;
}
.product-detail__accordion > app-details::part(toggle) {
  block-size: 100%;
}
.product-detail__accordion > app-details > [slot=summary] {
  flex-shrink: 0;
}
.product-detail__accordion > app-details > app-icon[slot=toggle] {
  margin-inline-start: auto;
}
.product-detail__accordion .design-introduction {
  margin-block-end: 2rem;
}
.product-detail__accordion app-tabs::part(tablist) {
  margin-block-end: 1.5rem;
}
.product-detail__accordion app-tabs > .tab-label {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--gray);
  block-size: 100%;
  padding-block-end: 0.9375rem;
  border-block-end: thin solid;
  transition: color 0.2s ease-in-out, padding-block-end 0.2s linear, border-block-end 0.2s linear;
  cursor: pointer;
}
.product-detail__accordion app-tabs > .tab-label .inactive-label,
.product-detail__accordion app-tabs > .tab-label .active-label {
  grid-area: 1/-1;
  text-align: center;
}
.product-detail__accordion app-tabs > .tab-label .active-label {
  font-weight: bold;
}
.product-detail__accordion app-tabs > .tab-label:not([data-active]) .active-label {
  visibility: hidden;
}
.product-detail__accordion app-tabs > .tab-label[data-active] {
  color: var(--clopay-primary);
  padding-block-end: 0.75rem;
  border-block-end-width: 0.25rem;
}
.product-detail__accordion app-tabs > .tab-label[data-active] .inactive-label {
  visibility: hidden;
}
.product-detail__accordion .options-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block: 1.5rem;
}
.product-detail__accordion .commerical-image-auto-width, .product-detail__accordion .commerical-image-fixed-width {
  display: inline-block;
  flex: 0 1 auto;
  block-size: auto;
  inline-size: auto;
  vertical-align: top;
}
.product-detail__accordion .commerical-image-fixed-width {
  flex-shrink: 0;
  inline-size: 10.25rem;
  overflow: hidden;
}
.product-detail__accordion .commerical-image-fixed-width-large {
  inline-size: 18.375rem;
}
.product-detail__accordion .img-descrip {
  inline-size: 0;
  min-inline-size: 100%;
  margin-block-start: 0.5rem;
}
.product-detail__accordion .design-items,
.product-detail__accordion .glass-options,
.product-detail__accordion .color-items,
.product-detail__accordion .hardware-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1rem;
}
.product-detail__accordion .top-section-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr));
  gap: 1rem;
}
.product-detail__accordion .resource-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@container product-accordion (max-width: 767.98px) {
  .product-detail__accordion .resource-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
.product-detail__accordion .resource-list article {
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.5rem hsla(0, 0%, 0%, 0.16);
  display: grid;
  gap: 1rem;
  grid-template: "image  content" "image   action" auto/auto;
  justify-content: start;
}
@container product-accordion (max-width: 767.98px) {
  .product-detail__accordion .resource-list article {
    grid-template: "image  content" "action  action" auto/auto;
  }
}
.product-detail__accordion .resource-list article:has(a[data-region-filtered]) {
  display: none;
}
.product-detail__accordion .resource-list article > picture {
  grid-area: image;
  flex-shrink: 0;
  block-size: auto;
  inline-size: 100%;
  max-inline-size: 8.4375rem;
}
@container product-accordion (max-width: 767.98px) {
  .product-detail__accordion .resource-list article > picture {
    max-inline-size: 5.625rem;
  }
}
.product-detail__accordion .resource-list article .content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.product-detail__accordion .resource-list article .content h3 {
  margin: 0;
}
.product-detail__accordion .resource-list article .content .button, .product-detail__accordion .resource-list article .content .consent-dialog__button {
  margin-block-start: auto;
}
.product-detail__accordion .resource-list article .button, .product-detail__accordion .resource-list article .consent-dialog__button {
  grid-area: action;
  margin-block-start: auto;
}
@media (max-width: 575px) {
  .product-detail__accordion .resource-list article {
    flex-direction: column;
  }
}
.product-detail__table {
  width: 100%;
  table-layout: fixed;
}
.product-detail__table tbody :is(tr, app-details):not(:has(a:not([data-region-filtered]))) {
  display: none;
}
.product-detail__table th,
.product-detail__table td {
  padding-block-end: 1rem;
  text-align: start;
  vertical-align: top;
}
.product-detail__table th {
  color: var(--gray);
  font-weight: 400;
}
.product-detail__table td {
  padding-block-start: 1rem;
}
.product-detail__table td[scope=row] {
  font-weight: 600;
}
.product-detail__table td a[data-region-filtered] {
  pointer-events: none;
  visibility: hidden;
}
.product-detail__table td a[data-region-filtered]::before {
  content: "—";
  visibility: visible;
}
.product-detail__table td app-details {
  border: none;
  padding: 0;
}
.product-detail__table td app-details::part(toggle) {
  gap: 0.5rem;
  justify-content: start;
}
.product-detail__table td a {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}
@container product-accordion (max-width: 767.98px) {
  .product-detail__table thead {
    position: absolute !important;
    height: 1px !important;
    width: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    clip-path: inset(100%) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
  }
  .product-detail__table tr {
    background-color: var(--light-gray);
    border: thin solid var(--border-gray);
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 1rem hsla(0, 0%, 0%, 0.06);
    display: block;
    margin-block-end: 1rem;
    padding-inline: 1rem;
  }
  .product-detail__table td:is([scope=row]) {
    display: block;
  }
  .product-detail__table td:not([scope=row]) {
    display: inline-block;
  }
  .product-detail__table td:not([scope=row])::before {
    content: attr(data-label);
    color: var(--gray);
  }
  .product-detail__table td:not(:first-child, :last-child) {
    margin-inline-end: 0.5rem;
  }
}
@media (min-width: 1024px) {
  .product-detail {
    position: relative;
    display: flex;
    gap: 2.5rem;
  }
  .product-detail__header {
    block-size: fit-content;
    inline-size: min(25rem, 30vw);
    flex-shrink: 0;
  }
  .product-detail__content {
    inline-size: 100%;
    order: -1;
  }
}

.tabbed-container:is(.edit-mode) {
  min-block-size: 5rem;
}
.tabbed-container:is(.edit-mode).sf-zone-widget::before {
  content: none;
}
.tabbed-container:is(.edit-mode) .tabbed-container__tabs > [slot^=panel-] {
  min-block-size: 5rem;
}
.tabbed-container__content > h2 {
  margin-block: 0;
}
.tabbed-container__tabs::part(tablist) {
  margin-block-end: clamp(
		8px,
		4.07vw + -7.27px,
		24px
	);
  padding-block-end: 0.5rem;
}
.tabbed-container__tabs:not(.pill-style) > .tab-label:is(:hover, :focus-visible, :active) {
  color: var(--clopay-primary);
}
@media (max-width: 574.98px) {
  .tabbed-container__tabs:not(.pill-style)::part(tablist) {
    justify-content: center;
  }
}
.tabbed-container__tabs:not(.pill-style)::part(tab) {
  border-block-end: 0.25rem solid transparent;
  box-shadow: 0 1px var(--gray);
  color: var(--gray);
  margin-block-end: 1px;
  min-block-size: 100%;
  padding-block: 1em;
  padding-inline: 0.75em;
  transition: border 0.2s ease-in-out;
}
.tabbed-container__tabs:not(.pill-style)::part(tab active) {
  border-color: var(--clopay-primary);
  box-shadow: 0 1px var(--clopay-primary);
  color: var(--clopay-primary);
  font-weight: 700;
}
.tabbed-container__tabs:is(.pill-style)::part(tablist) {
  gap: 0.5rem;
}
.tabbed-container__tabs:is(.pill-style) > .tab-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-block: 0.875em;
  padding-inline: 1.5em;
}
.tabbed-container__tabs:is(.pill-style) > .tab-label:not(:focus-visible, [data-active=""]) {
  border: thin solid var(--clopay-primary);
  border-radius: 1.5rem;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.tabbed-container__tabs:is(.pill-style) > .tab-label:not(:focus-visible, [data-active=""]):hover {
  background-color: var(--clopay-primary-alt);
  color: white;
}
.tabbed-container__tabs:is(.pill-style)::part(tab) {
  background-color: white;
  border-radius: 1.5rem;
  color: var(--clopay-primary);
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.25em;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.tabbed-container__tabs:is(.pill-style)::part(tab active) {
  border: thin solid var(--clopay-primary);
  background-color: var(--clopay-primary);
  color: white;
}
.tabbed-container__link {
  margin-block: 1rem;
  margin-inline: auto;
}

:root {
  --article-listing-col-count: 3;
  --article-listing-thumb-x: 25rem;
  --article-listing-thumb-y: 24.25rem;
  --article-card-radius: 0.25rem;
}
@media (max-width: 991.98px) {
  :root {
    --article-listing-col-count: 2;
    --article-listing-thumb-x: 21rem;
    --article-listing-thumb-y: 11.9375rem;
  }
}
@media (max-width: 574.98px) {
  :root {
    --article-listing-col-count: 1;
    --article-listing-thumb-x: 21.4375rem;
    --article-listing-thumb-y: 18.4375rem;
  }
}

.article-card {
  border: thin solid var(--border-gray);
  border-radius: var(--article-card-radius);
  inline-size: 100%;
  max-inline-size: var(--article-listing-thumb-x);
}
.article-card__img {
  inline-size: 100%;
  max-block-size: var(--article-listing-thumb-y);
  max-inline-size: var(--article-listing-thumb-x);
  object-fit: cover;
  object-position: center;
}
.article-card__img--wrapper {
  border-start-start-radius: var(--article-card-radius);
  border-start-end-radius: var(--article-card-radius);
  overflow: hidden;
}
.article-card__content {
  border-end-start-radius: var(--article-card-radius);
  border-end-end-radius: var(--article-card-radius);
  margin-block: 1.25rem;
  padding-inline: 1rem;
}
.article-card__content a {
  color: inherit;
}
.article-card__content .summary {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.article-detail__banner {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
@media (min-width: 575px) {
  .article-detail__banner {
    block-size: clamp(
		220px,
		40.71vw + 67.33px,
		380px
	);
    padding-block: 1.5rem;
    padding-inline: var(--page-margin);
    position: relative;
  }
}
@media (min-width: 575px) {
  .article-detail__banner picture {
    position: absolute;
    inset: 0;
  }
  .article-detail__banner picture:is(.overlay)::after {
    content: "";
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.64), transparent);
    border-end-start-radius: 0.25rem;
    border-end-end-radius: 0.25rem;
    position: absolute;
    inset-block: 50% 0;
    inset-inline: 0;
  }
}
.article-detail__banner picture > img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 574.98px) {
  .article-detail__banner hgroup {
    padding-inline: var(--page-margin);
  }
  .article-detail__banner hgroup h1 {
    margin-block: 0;
  }
}
@media (min-width: 575px) {
  .article-detail__banner hgroup {
    color: white;
    isolation: isolate;
    margin-block-start: auto;
  }
  .article-detail__banner hgroup h1 {
    color: inherit;
    margin-block: 0.5rem;
  }
}
.article-detail__banner .btn-back {
  align-items: center;
  display: flex;
  font-weight: 500;
  isolation: isolate;
  justify-content: center;
}
@media (max-width: 574.98px) {
  .article-detail__banner .btn-back {
    column-gap: 0.5rem;
    margin-inline-end: auto;
    padding-inline: var(--page-margin);
  }
}
@media (min-width: 575px) {
  .article-detail__banner .btn-back {
    background-color: var(--pale-white);
    border-radius: 50%;
    color: var(--clopay-primary);
    font-size: 0.625rem;
    max-block-size: 2.75rem;
    min-block-size: 2.75rem;
    max-inline-size: 2.75rem;
    min-inline-size: 2.75rem;
    transition: background-color 0.15s ease-in-out;
  }
  .article-detail__banner .btn-back:is(:hover, :focus-visible) {
    background-color: var(--off-white);
  }
  .article-detail__banner .btn-back .label {
    position: absolute !important;
    height: 1px !important;
    width: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    clip-path: inset(100%) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
  }
}
.article-detail__content {
  margin-block: clamp(
		24px,
		1.34vw + 13.73px,
		32px
	);
}
@media (max-width: 767.98px) {
  .article-detail__content {
    margin-block: clamp(
		16px,
		2.04vw + 8.37px,
		24px
	);
  }
}
.article-detail__content--wrapper {
  inline-size: 100%;
  padding-inline: var(--page-margin);
}

.date-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (max-width: 767.98px) {
  .date-filters > span {
    flex-basis: 0;
    margin-inline-end: auto;
  }
}
@media (min-width: 768px) {
  .date-filters {
    margin-inline-start: auto;
  }
}

.tag {
  background-color: var(--off-white);
  border-radius: 0.5rem;
  font-size: clamp(
		12px,
		0.2vw + 11.24px,
		14px
	);
  line-height: clamp(
		20px,
		0.2vw + 19.24px,
		22px
	);
  inline-size: fit-content;
  margin-block: 0;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-listing-image > img {
  margin-block: clamp(
		16px,
		7.36vw + -40.51px,
		60px
	);
  margin-inline: auto;
}

.blog-article-hero {
  display: flex;
  min-block-size: 28rem;
  margin-block: clamp(
		24px,
		6.02vw + -22.23px,
		60px
	) clamp(
		32px,
		8.03vw + -29.65px,
		80px
	);
  padding-block: 2.875rem;
  padding-inline: clamp(
		24px,
		2.68vw + 3.45px,
		40px
	);
  position: relative;
}
@media (max-width: 767.98px) {
  .blog-article-hero {
    padding-block: clamp(
		8px,
		9.67vw + -28.26px,
		46px
	);
    padding-inline: clamp(
		8px,
		4.07vw + -7.27px,
		24px
	);
    min-block-size: clamp(
		295px,
		38.93vw + 149.01px,
		448px
	);
  }
}
.blog-article-hero__content {
  display: flex;
  flex-direction: column-reverse;
  isolation: isolate;
  margin-block-start: auto;
}
@media (min-width: 768px) {
  .blog-article-hero__content {
    inline-size: 50%;
  }
}
.blog-article-hero__content h1 {
  font-size: clamp(
		16px,
		2.04vw + 8.37px,
		24px
	);
  line-height: clamp(
		24px,
		2.04vw + 16.37px,
		32px
	);
  margin-block: 0;
}
.blog-article-hero__content h1 a {
  color: white;
}
.blog-article-hero__img {
  border-radius: 0.25rem;
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}
.blog-article-hero__img--wrapper {
  position: absolute;
  inset: 0;
}
.blog-article-hero__img--wrapper::after {
  content: "";
  background-image: linear-gradient(0deg, black, transparent);
  border-end-start-radius: 0.25rem;
  border-end-end-radius: 0.25rem;
  position: absolute;
  inset-block: 55.75% 0;
  inset-inline: 0;
}

.product-embed > a {
  align-items: center;
  color: inherit;
  display: inline-flex;
}
.product-embed > a::after {
  content: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22none%22%20viewBox%3D%220%200%2018%2018%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.5%2013.5%2013.5%204.5M6.1875%204.5H13.5V11.8125%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.23%22%20%2F%3E%3C%2Fsvg%3E");
  block-size: 1.125rem;
}
.product-embed > figure {
  margin-block: 0 1rem;
  margin-inline: 0;
}
.product-embed > figure img {
  margin-block: 0.5rem;
}
.product-embed > figure figcaption {
  color: var(--gray);
}

@media (min-width: 1024px) {
  .article-detail__content--wrapper:is(.related-products) {
    position: relative;
    display: flex;
    gap: 2.5rem;
  }
  .article-detail__products {
    position: sticky;
    inset-block-start: calc(var(--header-size) + clamp(
		24px,
		1.34vw + 13.73px,
		32px
	));
    block-size: fit-content;
    inline-size: min(25rem, 30vw);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin-block-start: clamp(
		24px,
		1.34vw + 13.73px,
		32px
	);
  }
  .article-detail__products .related-product:is(:hover, :focus-visible) figure {
    box-shadow: 0 0.125rem 0.375rem hsla(0, 0%, 0%, 0.25);
  }
  .article-detail__products .related-product:is(:hover, :focus-visible) figcaption {
    text-decoration: underline;
  }
  .article-detail__products .related-product:active figure {
    box-shadow: 0 0.0625rem 0.125rem hsla(0, 0%, 0%, 0.5);
    transform: scale(0.99);
  }
  .article-detail__products figure {
    margin-inline: 0;
    position: relative;
    box-shadow: 0 0.25rem 1rem hsla(0, 0%, 0%, 0.1);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
  }
  .article-detail__products figure::before {
    content: "";
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.64), transparent);
    position: absolute;
    inset: 0;
  }
  .article-detail__products figure figcaption {
    color: white;
    font-weight: 500;
    position: absolute;
    inset-block-end: 1em;
    inset-inline-start: 1em;
  }
}
.news-listing {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 991.98px) {
  .news-listing {
    grid-template-columns: repeat(1, 1fr);
  }
}

.news-banner,
.news-item {
  align-items: center;
  background-color: white;
  border: thin solid var(--border-gray);
  border-radius: 0.375rem;
  box-shadow: inset 0 0 6px 3px transparent;
  column-gap: 1.75rem;
  display: flex;
  flex-direction: row;
  padding-block: 1.5rem;
  padding-inline: 1.5rem;
  position: relative;
  row-gap: 1rem;
  transition: box-shadow 0.25s ease-out;
}
@media (max-width: 574.98px) {
  .news-banner,
  .news-item {
    align-items: baseline;
    flex-direction: column;
    padding-block-start: 0;
    padding-inline: 0;
  }
  .news-banner__img,
  .news-item__img {
    margin-block: auto;
  }
  .news-banner__img--wrapper,
  .news-item__img--wrapper {
    align-items: center;
    display: flex;
    inline-size: 100%;
    min-block-size: 9.875rem;
  }
  .news-banner__content,
  .news-item__content {
    padding-inline: 1rem;
  }
  .news-banner__link,
  .news-item__link {
    align-items: center;
    column-gap: 0.5rem;
    display: flex;
    flex-wrap: nowrap;
  }
}
.news-banner:is(:hover, :focus-within),
.news-item:is(:hover, :focus-within) {
  box-shadow: inset 0 0 6px 3px rgba(205, 211, 220, 0.25);
  cursor: pointer;
}
.news-banner:is(:hover, :focus-within) h1,
.news-banner:is(:hover, :focus-within) h3,
.news-item:is(:hover, :focus-within) h1,
.news-item:is(:hover, :focus-within) h3 {
  text-decoration: underline;
}
.news-banner__img,
.news-item__img {
  inline-size: 100%;
  margin-inline: auto;
  max-block-size: 6.5rem;
  max-inline-size: 11.625rem;
}
.news-banner__img--wrapper,
.news-item__img--wrapper {
  border-start-start-radius: 0.375rem;
  border-start-end-radius: 0.375rem;
  padding-block: 1.75rem;
}
@media (max-width: 574.98px) {
  .news-banner__img--wrapper,
  .news-item__img--wrapper {
    background-color: var(--off-white);
  }
}
.news-banner__content,
.news-item__content {
  color: var(--dark-gray);
}
.news-banner__content .summary,
.news-item__content .summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  margin-block: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-banner__content .summary p,
.news-item__content .summary p {
  margin-block-start: 0;
}
.news-banner__content .summary p:is(:last-of-type),
.news-item__content .summary p:is(:last-of-type) {
  margin-block-end: 0;
}
.news-banner__content app-date,
.news-item__content app-date {
  color: var(--gray);
  font-size: clamp(
		12px,
		0.2vw + 11.24px,
		14px
	);
  line-height: clamp(
		20px,
		0.2vw + 19.24px,
		22px
	);
  flex-shrink: 0;
  text-align: end;
}
.news-banner__link,
.news-item__link {
  color: var(--clopay-primary);
  font-size: clamp(
		18px,
		0.2vw + 17.24px,
		20px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
}
@media (min-width: 575px) {
  .news-banner__link,
  .news-item__link {
    margin-inline-start: auto;
  }
}
.news-banner__link::after,
.news-item__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.news-banner__link:is(:hover, :focus-visible),
.news-item__link:is(:hover, :focus-visible) {
  color: var(--clopay-primary-alt);
}

@media (max-width: 574.98px) {
  .news-banner {
    column-gap: 0.5rem;
    display: grid;
    grid-template: "image  image" "content link" auto/auto;
  }
  .news-banner__img--wrapper {
    grid-area: image;
  }
  .news-banner__content {
    grid-area: content;
    padding-inline-end: 0;
  }
  .news-banner__link {
    grid-area: link;
    padding-inline-end: 1rem;
  }
}

.news-item__img--wrapper {
  min-inline-size: 11.625rem;
}
.news-item__content h3 {
  margin-block: 0;
}
.news-item__content .summary {
  font-size: clamp(
		12px,
		0.2vw + 11.24px,
		14px
	);
  line-height: clamp(
		20px,
		0.2vw + 19.24px,
		22px
	);
}
.news-item__link {
  font-size: clamp(
		14px,
		0.2vw + 13.24px,
		16px
	);
  line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
}
.news-item__link > span {
  color: var(--dark-gray);
}
@media (min-width: 575px) {
  .news-item {
    padding-inline-end: 4.5rem;
  }
  .news-item__link app-icon {
    font-size: clamp(
		18px,
		0.2vw + 17.24px,
		20px
	);
    line-height: clamp(
		22px,
		0.2vw + 21.24px,
		24px
	);
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-end: 1.5rem;
  }
}

:root {
  --document-listing-col-count: 4;
  --document-listing-thumb-x: 16.5rem;
  --document-listing-thumb-y: 9.75rem;
  --document-listing-aspect-ratio: 23 / 13;
  --document-card-radius: 0.25rem;
}
@media (max-width: 1279.98px) {
  :root {
    --document-listing-col-count: 3;
  }
}
@media (max-width: 991.98px) {
  :root {
    --document-listing-col-count: 2;
    --document-listing-thumb-x: 19rem;
    --document-listing-thumb-y: 9.5rem;
    --document-listing-aspect-ratio: 2 / 1;
  }
}
@media (max-width: 574.98px) {
  :root {
    --document-listing-col-count: 1;
    --document-listing-thumb-x: 19.125rem;
    --document-listing-thumb-y: 10.6875rem;
    --document-listing-aspect-ratio: 34 / 19;
  }
}

.document-listing {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(var(--document-listing-col-count), 1fr);
}
.document-listing .document-card {
  margin-inline: auto;
}
@media (min-width: 992px) {
  .document-listing .document-card:nth-child(3n+1) {
    margin-inline-end: 0;
  }
  .document-listing .document-card:nth-child(3n+3) {
    margin-inline-start: 0;
  }
}

.document-card {
  background-color: white;
  border: thin solid var(--border-gray);
  border-radius: var(--document-card-radius);
  display: flex;
  flex-direction: column;
  justify-content: start;
  inline-size: 100%;
  max-inline-size: calc(var(--document-listing-thumb-x) + 34px);
  padding: 1rem;
}
.document-card__media {
  aspect-ratio: var(--document-listing-aspect-ratio);
  background-color: var(--gray);
  border-radius: var(--document-card-radius);
  box-shadow: 0 0 2px var(--border-gray);
  color: white;
  max-block-size: var(--document-listing-thumb-y);
  max-inline-size: var(--document-listing-thumb-x);
  overflow: hidden;
  position: relative;
}
.document-card__media > picture img {
  inline-size: 100%;
  max-block-size: var(--document-listing-thumb-y);
  max-inline-size: var(--document-listing-thumb-x);
  object-fit: cover;
  object-position: center;
}
.document-card__content {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-block-start: auto;
}
.document-card__content a {
  align-items: center;
  column-gap: 0.375em;
  display: inline-flex;
}