@import url("https://fonts.googleapis.com/css2?family=Gluten:wght@500&family=Overlock:wght@400;700&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  --main-color: #837e7e;
  --background-color: #d8cfc6;
  --first-color: #27636e;
  --second-color: #985b46;
}

body {
  font-family: "Overlock";
  background: #d8cfc6;
  font-size: 1.3rem;
}

h2 {
  font-size: 2.4rem;
  padding: 1rem 0;
}

h3 {
  font-size: 1.6rem;
}

p {
  padding: 0.6rem 0;
}

.bgshape {
  background: linear-gradient(
    170deg,
    rgba(39, 99, 110, 0.95) 49%,
    rgba(255, 255, 255, 0) 50%
  );
  width: 100%;
}

.header-photo {
  width: 90vw;
  position: relative;
}

.header-picture {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.header.card {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5% 0 5%;
}

.header-photo h1 {
  font-family: "Gluten";
  font-size: 3.5rem;
  color: white;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}

.header-icons,
.footer-icons {
  display: flex;
  padding-top: 2.8rem;
  padding-bottom: 1rem;
  justify-content: center;
  gap: 1rem;
}

.header-icons img,
.footer-icons img {
  height: 3rem;
}

.footer-icons {
  padding: 2.8rem;
}

.main-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 3rem;
}

.project {
  background-color: var(--second-color);
  height: auto;
  padding: 1.2rem;
  margin: 2.2rem 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0.2rem;
}

.galery-image {
  width: 100%;
}

.project-title {
  display: flex;
  padding: 0.6em 0;
}

.project-title img {
  height: 1.1em;
  padding: 0 0.6em;
  margin: auto;
}

.project-title a {
  display: flex;
}

.project-title h3 {
  flex: 1 1 auto;
}

.footer-card {
  width: 100%;
  margin: 0 auto;
  padding: 2.3rem 0 0;
}

.footer-content {
  margin: 0 auto;
  width: 90%;
}

.footer-container {
  background-color: var(--first-color);
  display: flex;
}

.footer-picture {
  max-width: 100%;
  display: block;
}

@media (min-width: 550px) {
  
  .header-photo {
    max-width: 55%;
    float: right;
    padding-left: 0.6rem;
  }

  .header-text {
    margin: 20% 10% 0 0;
    background-color: var(--main-color);
    padding: 1.4rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 0.2rem;
  }

  .header-photo h1 {
    font-size: 5vw;
    position: absolute;
    bottom: 68%;
    left: -78%;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 48%));
    gap: 1.6rem;
  }

  .project {
    margin: 0;
  }

  .footer-card {
    display: flex;
    margin: auto;
    width: 90%;
    max-width: 1400px;
    gap: 10%;
    padding: 3rem 0;
  }

  .footer-photo {
    display: flex;
    width: 100%;
    justify-content: end;
  }

  .footer-content h2 {
    padding: 0 0 2rem 0;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
  }

  .footer-icons {
    justify-content: flex-start;
    margin-top: auto;
    padding: 0;
  }
}

@media (min-width: 1100px) {

  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(320px, 31%));
    gap: 2.6rem;
    justify-content: space-between;
    
  }

  .main-container {
    padding: 3rem 0;
  }

  footer picture {
    max-width: 60%;
  }

  .footer-card {
    padding: 4rem 0;
  }

  .main-container {
    padding-bottom: 4rem;
  }

  .footer-icons {
    margin-top: 6rem;
  }
}

@media (min-width: 1550px) {

  .header-photo h1 {
    font-size: 77px;
  }
}