/***********************
 * global
 */
body {
  margin: 0 auto;
  max-width: 1200px;

  --koalty-color: hsl(27.18, 100%, 66%);
}

img {
  object-fit: contain;
}

img[cover] {
  object-fit: cover;
}

div {
  text-align: justify;
}

/***********************
* Sections
*/
body > * {
  background-color: hsl(27.18, 100%, 98%);
  padding: 40px;

  /* Not supported: https://caniuse.com/mdn-css_types_color_hsl_relative_syntax */
  /* background-color: hsl(from hsl(27.18, 100%, 66%) h s l); */
}

.jumbotron {
  display: flex;

  position: relative;
  color: var(--koalty-color);

  & > * {
    z-index: 10;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  & > img:first-child {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    filter: brightness(35%);
  }
}

.two {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;

  gap: 20px;

  margin-top: 20px;

  &:nth-child(odd) {
    flex-direction: row-reverse;
  }

  & > * {
    flex-basis: 1px;
  }

  & > div {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 20px;
    min-width: calc(min(200px, 100%));
    height: 100%;

    i {
      padding-right: 5px;
      padding-left: 5px;
    }
  }

  & > img {
    flex-grow: 1;
    max-height: 200px;
  }
}

.footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 20px;
  background-color: rgb(44, 44, 44);
  width: 100%;
  color: rgb(112, 112, 112);
  font-size: small;

  & > div {
    display: flex;
    flex-direction: column;
  }

  & > div > div:first-child {
    padding-bottom: 5px;
    text-decoration: underline;
  }
}