@layer shell {
  #footer-section {
    padding-block: 20px 16px;
    color: white;
    background-color: #083175;

    a:has(> .footer-logo) {
      display: block;
      width: fit-content;
    }

    .footer-logo {
      height: 72px;
    }
  }

  #footer-bottom {
    background-color: #021345;
    color: white;

    .footer-bottom-links {
      display: flex;
      min-height: 48px;
      align-items: center;
      gap: 48px;
      flex-wrap: wrap;

      font-size: 15px;
      font-weight: 400;
      line-height: 15px;
      padding-block: 14px;

      a {
        color: white;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      .copyright {
        margin-inline-start: auto;
      }

      @media screen and (width < 992px) {
        flex-direction: column;
        align-items: start;
        gap: 32px;
        padding-block: 24px;

        .copyright {
          margin-inline-start: 0;
        }
      }
    }
  }
}