:root {
  --primary: #F9BF2B;
  --mild-yellow: #F4C643;
  --red: #F4C643;
  --white: #ffffff;
  --gray: #282827;
  --medium-gray: #E9E9EC;
  --light-gray: #F2F2F8;
  --dark: #3c3c3c;
  --black: #0E0E0E;
}

.header-with-image {
  min-height: 320px;
  overflow-x: clip;
}
.header-with-image h1 {
  font-size: 2.625rem;
}
.header-with-image p {
  max-width: 500px;
}
.header-with-image .image {
  right: 0;
}
@media screen and (min-width: 1921px) {
  .header-with-image .image {
    right: initial;
    left: 50%;
  }
}
.header-with-image .image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 50vw;
  min-width: 50vw;
  height: 100%;
}
@media screen and (max-width: 991.98px) {
  .header-with-image .image img {
    max-width: 100%;
    border-radius: 20px;
    min-height: 200px;
    margin-bottom: -30px;
  }
}

.project-card {
  max-width: 600px;
}
.project-card .image img {
  width: 100%;
  height: 340px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  margin-bottom: -60px;
}
.project-card .content .wrapper {
  border: 1px solid gray;
  z-index: 99;
  position: relative;
}
.project-card .content .wrapper h2 {
  font-size: 1.875rem;
}