.responsible-hero .slots-hero-art {
  background-image: url('assets/responsible-hero.webp');
  background-position: right center
}

.responsible-hero .slots-hero-copy {
  max-width: 1100px
}

.responsible-content h3 {
  font-size: 16px;
  line-height: 1.5
}

.responsible-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

.responsible-rules article,
.break-options article,
.support-organisation {
  min-width: 0;
  padding: 17px;
  border: 1px solid #c080dd;
  border-radius: 13px;
  background: linear-gradient(135deg, #512269, #27123b);
  box-shadow: inset 0 1px 0 #efc2ff40, 0 0 12px #c448e42b
}

.rule-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px
}

.rule-number {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid #f3c0ff;
  border-radius: 50%;
  background: linear-gradient(#e08af0, #9827b8);
  font-size: 16px;
  font-weight: 800
}

.responsible-rules h3 {
  margin: 0 0 10px;
  color: #f7ddff
}

.responsible-rules p {
  margin: 9px 0;
  color: #eadff2
}

.warning-rows {
  display: grid;
  gap: 12px
}

.warning-rows article {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 13px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #c080dd;
  border-radius: 13px;
  background: linear-gradient(120deg, #4d2062, #251136)
}

.warning-concern {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px
}

.warning-concern>.ui-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 6px;
  border: 1px solid #c88cde;
  border-radius: 10px;
  background: linear-gradient(#a54dbf, #57217c)
}

.warning-concern h3 {
  margin: 0 0 8px;
  font-size: 14px
}

.warning-concern p {
  margin: 0;
  color: #eadcf1
}

.warning-action {
  padding: 15px;
  border: 1px solid #e5bff0;
  border-radius: 11px;
  background: linear-gradient(120deg, #f3e8fc, #cfb8ea);
  color: #29153b;
  display: flex;
  align-items: center
}

.warning-action p {
  margin: 0
}

.break-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.break-options article {
  display: flex;
  flex-direction: column
}

.option-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 13px
}

.option-heading>.ui-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  padding: 5px;
  border: 1px solid #c786df;
  border-radius: 10px;
  background: linear-gradient(#9140b1, #522074)
}

.option-heading h3 {
  margin: 0
}

.break-options article>p {
  margin: 9px 0;
  color: #eadcf0
}

.support-illustration {
  display: block;
  width: 100%;
  height: 155px;
  min-height: 0;
  max-height: 180px;
  object-fit: contain;
  flex: 1;
  margin-top: 12px;
  filter: drop-shadow(0 0 10px #ca6ee628)
}

.position-note {
  padding: 13px 15px;
  margin-top: 16px;
  border: 1px solid #e5bb8e;
  border-radius: 11px;
  background: linear-gradient(120deg, #fff0d1, #ecc6e9);
  color: #291438
}

.position-note p {
  margin: 0
}

.support-organisations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px
}

.support-organisation {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.support-organisation h3 {
  margin: 0 0 11px;
  color: #f5d9ff;
  min-height: 48px
}

.support-organisation>p {
  margin: 0 0 13px;
  color: #eadcf2
}

.support-contact {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 13px
}

.support-phone {
  display: block;
  padding: 12px 13px;
  border: 1px solid #edbaf9;
  border-radius: 10px;
  background: linear-gradient(#752e98, #45205f);
  color: #fff5ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  box-shadow: inset 0 1px 0 #e8b7f63b, 0 0 10px #c54ce42b;
  overflow-wrap: anywhere
}

.support-phone:hover {
  filter: brightness(1.15)
}

.support-contact p {
  margin: 0;
  color: #eaddf3;
  overflow-wrap: anywhere
}

.support-contact .inline-link {
  color: #f4b5ff;
  text-underline-offset: 3px
}

.service-note {
  padding: 12px;
  margin-top: 14px;
  border: 1px solid #9f66b4;
  border-radius: 9px;
  background: #30133f
}

.service-note p {
  margin: 0;
  color: #dfcfe9;
  font-size: 14px
}

.international-label {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 1px;
  color: #efb1fb !important;
  margin-bottom: 7px !important
}

.immediate-help {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 17px;
  padding: 16px;
  border: 1px solid #ed9ac4;
  border-radius: 12px;
  background: linear-gradient(120deg, #fae4ed, #e2c2ed);
  color: #36143d
}

.immediate-help>.ui-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 5px;
  border-radius: 9px;
  background: linear-gradient(#a44096, #63216e)
}

.immediate-help h3 {
  margin: 0 0 8px
}

.immediate-help p {
  margin: 0
}

.responsible-content :is(a, button, summary):focus-visible {
  outline: 2px solid #eab2fb;
  outline-offset: 3px
}

@media(max-width:1350px) {
  .responsible-rules {
    grid-template-columns: 1fr 1fr
  }

  .support-organisations {
    grid-template-columns: 1fr
  }

  .support-organisation h3 {
    min-height: 0
  }

  .support-contact {
    padding-top: 5px
  }

  .support-phone {
    width: fit-content;
    max-width: 100%
  }

  .warning-rows article {
    grid-template-columns: 1fr 1fr
  }
}

.support-organisation {
  position: relative
}

.international-label {
  position: absolute;
  top: 23px;
  right: 17px;
  max-width: calc(100% - 145px);
  text-align: right
}

.independent-support-panel>.service-note {
  margin-top: 15px
}

@media(max-width:680px) {
  .responsible-hero .slots-hero-art {
    background-position: 70% center
  }

  .responsible-rules,
  .break-options {
    grid-template-columns: 1fr
  }

  .responsible-rules article,
  .break-options article,
  .support-organisation {
    padding: 15px
  }

  .warning-rows article {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .warning-concern {
    padding: 4px
  }

  .warning-action {
    padding: 13px
  }

  .support-illustration {
    height: 160px;
    flex: none
  }

  .support-phone {
    width: 100%
  }

  .option-heading {
    gap: 10px
  }

  .option-heading>.ui-icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px
  }

  .immediate-help {
    padding: 14px;
    gap: 10px
  }
}

.organisation-art {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 0 0 13px;
  filter: drop-shadow(0 0 8px #ce7bef32)
}