/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.5.15,
* Autoprefixer: v10.5.0
* Browsers: last 4 version
*/

/* -------------------------------
  Modern Browser Reset
------------------------------- */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/* -------------------------------
  Variables
------------------------------- */
:root {
  --font-default: 'Baloo 2';
  --color-primary: #00471e;
  --color-inverse: #ffffff;
  --width-max: 1024px;
  --padding: 44px;

  @media (max-width: 650px) {
    --padding: 22px;
  }
}

/* -------------------------------
  Fonts
------------------------------- */
@font-face {
  font-display: swap;
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  src: url('./baloo-2-v23-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  src: url('./baloo-2-v23-latin-700.woff2') format('woff2');
}

/* -------------------------------
  Fonts
------------------------------- */
html {
  position: relative;
  font-size: 62.5%;
  padding: 0;
  margin: 0;
}
body {
  position: relative;
  padding: 0;
  margin: 0;
  font-size: 3.28rem;
  font-family: var(--font-default), system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.4;
  color: var(--color-primary);

  @media (max-width: 750px) {
    font-size: 2.6rem;
  }
}

a {
  color: inherit;

  &:hover {
    text-decoration: underline;
  }
}
h1, h2 {
  font-size: inherit;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  aspect-ratio: 16/8;
  max-width: var(--width-max);
  margin: 0 auto;
  background-color: var(--color-primary);
  color: var(--color-inverse);

  & > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: var(--padding);
    
    & > svg {
      display: block;
      width: 100%;
      height: auto;
      max-width: 335px;

      @media (max-width: 600px) {
        max-width: 240px;
      }
    }

    & > h1 {
      text-align: center;
      margin: 0;
      padding: var(--padding) 0 0 0;
      line-height: 1.2;
    }
  }
}

main {
  & > section.hero {
    font-size: 0;
    margin: 0 auto;
    width: 100%;
    max-width: var(--width-max);
    aspect-ratio: 16/8;
    & > img {
      width: 100%;
      aspect-ratio: 16/8;
      height: auto;
      -o-object-fit: cover;
         object-fit: cover;
    }
  }

  & > section.introduction {
    margin: 0 auto;
    width: 100%;
    max-width: var(--width-max);
    padding: var(--padding) var(--padding) 0 var(--padding);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    & > div {
      & > p {
        max-width: 910px;

        &:first-of-type {
          margin-top: 0;
        }
      }
    }
  }

  & > section.team {
    margin: 0 auto;
    width: 100%;
    max-width: var(--width-max);
    padding: var(--padding);
    
    & > h2 {
      padding-bottom: 22px;
    }

    & > div.people {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      gap: 20px;

      @media (max-width: 634px) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }

      & > div {
        width: 50%;
        -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0);
                box-shadow: 0 0 12px rgba(0, 0, 0, 0);
        -webkit-transition: -webkit-box-shadow 0.3s linear;
        transition: -webkit-box-shadow 0.3s linear;
        transition: box-shadow 0.3s linear;
        transition: box-shadow 0.3s linear, -webkit-box-shadow 0.3s linear;

        @media (max-width: 634px) {
          width: 100%;
        }

        &:hover {
          -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
                  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
        }
        & > img {
          width: 100%;
          aspect-ratio: 755 / 1002;
          -o-object-fit: cover;
             object-fit: cover;
          -o-object-position: 50% 100%;
             object-position: 50% 100%;
          height: auto;
          font-size: 0;
          overflow: hidden;
        }

        & > div {
          padding: 12.5px 26px;
          & > span.name {
            display: block;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 40px;
          }

          & > a {
            text-decoration: none;

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

footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
  max-width: var(--width-max);
  margin: 0 auto;
  background-color: var(--color-primary);
  color: var(--color-inverse);
  padding: 66px var(--padding);

  & > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 38px;

    @media (max-width: 600px) {
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
          -ms-flex-direction: column-reverse;
              flex-direction: column-reverse;
    }

    & > div, & > a {
      display: block;
      max-width: 320px;
      width: 100%;
      text-decoration: none;
      
      &.map {
        display: block;
        position: relative;
        aspect-ratio: 1;
        line-height: 0;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0);
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0);
        -webkit-transition: -webkit-box-shadow 0.23s linear;
        transition: -webkit-box-shadow 0.23s linear;
        transition: box-shadow 0.23s linear;
        transition: box-shadow 0.23s linear, -webkit-box-shadow 0.23s linear;
        
        & > img {
          width: 100%;
          height: auto;
          aspect-ratio: 1;
          -o-object-fit: cover;
             object-fit: cover;
        }

        & > .overlay {
          position: absolute;
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          aspect-ratio: 1;
          top: 0;
          left: 0;
          opacity: 0;
          width: 100%;
          height: 100%;
          line-height: initial;
          background: rgb(from var(--color-primary) r g b / 0.5);
          -webkit-transition: opacity 0.23s linear;
          transition: opacity 0.23s linear;

          & > svg {
            width: 34px;
            height: auto;
          }

          & > span {
            margin-top: 15px;
            font-size: 2.6rem;
          }
        }

        &:hover {
          -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
                  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
          & > .overlay {
            opacity: 1;
          }
        }
      }

      &.address {
        line-height: 1.2;

        & > span {
          display: inline-block;
          margin-bottom: var(--padding);
        }

        & > a {
          text-decoration: none;

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