.static-page,
.contact,
.complaint {
  background-color: #0e253e;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: calc(100vh - 180px - 2rem);
  position: relative;
}

@supports (height: 100dvh) {
  .static-page,
  .contact,
  .complaint {
    min-height: calc(100dvh - 180px - 2rem);
  }
}

.static-page > header,
.contact > header,
.complaint > header {
  align-items: center;
  background-color: #0e253e;
  display: flex;
  padding: 0.5rem;
  position: sticky;
  top: 58px;
  width: 100%;
  z-index: 9;
}

.static-page > header :is(h1, h2),
.contact > header :is(h1, h2),
.complaint > header :is(h1, h2) {
  align-items: center;
  display: flex;
  font-size: 0.875rem;
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.static-page > header :is(h1, h2) i,
.contact > header :is(h1, h2) i,
.complaint > header :is(h1, h2) i {
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.static-page > header :is(h1, h2) span,
.contact > header :is(h1, h2) span,
.complaint > header :is(h1, h2) span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.static-page__content {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 0.5rem;
}

.static-page__content h1 {
  color: #d60405;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.static-page__content h2,
.static-page__content p {
  font-weight: 500;
  margin-bottom: 1rem;
}

.static-page__content h2 {
  color: #d60405;
  font-size: 0.875rem;
}

.static-page__content h3 {
  border-bottom: 1px solid #61020b;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.static-page__content p {
  font-size: 0.75rem;
}

.static-page__content em {
  color: #d60405;
  font-style: normal;
}

.static-page__content ol {
  counter-reset: item 0;
  padding-left: 0.5rem;
}

.static-page__content ol li {
  color: #fff;
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.static-page__content ol li::before {
  color: #d60405;
  content: counters(item, ".") ".";
  counter-increment: item 1;
  padding-right: 0.5rem;
}

.static-page__content ol li > ol {
  margin-top: 1rem;
}

.static-page__content ol li em {
  font-size: 0.875rem;
}

.static-page__content ul {
  padding-left: 1rem;
}

.static-page__content ul li {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.static-page__content ul li::before {
  color: #d60405;
  content: "•";
  display: inline-block;
  font-weight: 700;
  margin-left: -1em;
  width: 0.8rem;
}

.contact__details {
  display: grid;
  padding: 0 0.5rem 0.5rem;
  gap: 0.5rem;
  align-content: start;
}

.contact__details p {
  font-size: 0.75rem;
  padding: 0 1rem 0.5rem;
}

.contact__details > div:first-child,
.contact__details > div:last-child {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.contact__details > div:last-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact__details a,
.contact__details button,
.contact__details li > div {
  display: grid;
  width: 100%;
  gap: 1rem;
  align-items: center;
  background-color: #030a12;
  border: 2px solid #61020b;
  border-radius: 40px;
  color: #fff;
  grid-template-columns: 2.5rem 1fr;
  padding: 0.5rem;
  text-align: left;
}

.contact__details a > div,
.contact__details button > div,
.contact__details li > div > div {
  align-items: center;
  background-color: #d60405;
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 0;
  justify-content: center;
  padding-bottom: 100%;
  position: relative;
}

.contact__details a i,
.contact__details button i,
.contact__details li > div i {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.contact__details a img,
.contact__details button img,
.contact__details li > div img {
  display: block;
  height: 100%;
  left: 0;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
}

.contact__details a span,
.contact__details button span,
.contact__details li > div span {
  font-size: 0.875rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.complaint__container {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 0.5rem;
}

.complaint__container .alert {
  justify-self: center;
  max-width: 30rem;
  width: 100%;
}

.complaint__container .alert ul {
  display: grid;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  list-style: initial;
}

.complaint__container form {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  grid-template-rows: auto 1fr;
}

.complaint__container form > div {
  justify-self: center;
  max-width: 30rem;
  width: 100%;
}

.complaint__container form .btn {
  justify-self: center;
}

.complaint .captcha {
  margin-bottom: 0.75rem;
  width: 100%;
}

.complaint .captcha label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.complaint .captcha__root {
  display: grid;
  overflow: hidden;
  gap: 0.25rem;
  align-items: center;
  grid-template-columns: 50% auto 1fr;
}

.complaint .captcha__root .captcha__input {
  height: 100%;
  margin-bottom: 0;
}

.complaint .captcha__image {
  align-items: center;
  background-color: #030a12;
  border-radius: 5px;
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.complaint .captcha__image img {
  display: block;
  height: 100%;
  object-fit: contain;
  position: absolute;
  transition: filter 0.2s ease;
  width: 100%;
}

.complaint .captcha__image img.captcha--loading {
  filter: blur(3px);
}

@media (min-width: 1024px) {
  .static-page,
  .contact,
  .complaint {
    min-height: calc(100vh - 80px - 1.5rem);
  }

  .contact__details {
    grid-template-columns: 1fr 2fr;
    padding: 0.75rem;
  }

  .contact__details > div:last-child {
    padding: 0 3rem;
  }

  .complaint .captcha--d {
    margin: 0 auto 1rem;
    max-width: 20rem;
  }
}