h2 {
  font-family: Effra;
  font-weight: 700;
  font-style: Bold;
  font-size: 60px;
  text-align: center;
  color: #000;
  margin-bottom: 58px;
}
@media (max-width: 767px) {
  h2 {
    margin-bottom: 30px;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 27px;
  }
}

.header {
  aspect-ratio: 2800/1942;
  background-image: linear-gradient(98.98deg, rgba(120, 175, 78, 0.7) 13.45%, rgba(150, 83, 152, 0.7) 99.06%), url("/static/f/portfolio.main/timotei-new-visual/header-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  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: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  margin-bottom: 90px;
}
@media (max-width: 767px) {
  .header {
    height: 100vh;
    aspect-ratio: auto;
    margin-bottom: 40px;
  }
}

.header-content {
  height: 100%;
  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;
  position: relative;
  padding: 0 50px;
}
@media (max-width: 575px) {
  .header-content {
    padding: 0 18px;
  }
}
.header-content__title {
  font-family: "effra";
  font-size: 80px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin-bottom: 50px;
}
@media (max-width: 1200px) {
  .header-content__title {
    font-size: 64px;
  }
}
@media (max-width: 575px) {
  .header-content__title {
    font-size: 40px;
    margin-bottom: 15px;
  }
}
.header-content__logo {
  max-width: 444px;
  width: 100%;
}
@media (max-width: 1200px) {
  .header-content__logo {
    max-width: 333px;
  }
}
@media (max-width: 575px) {
  .header-content__logo {
    max-width: 237px;
  }
}
.header-content__logo img {
  width: 100%;
}

.task {
  margin-bottom: 150px;
}
@media (max-width: 767px) {
  .task {
    margin-bottom: 40px;
  }
}
.task__title {
  margin-bottom: 76px;
  position: relative;
}
.task__title:after {
  position: absolute;
  content: "";
  width: 80px;
  height: 4px;
  bottom: -35px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #E30611;
}
.task__text {
  font-family: Euclid;
  font-weight: 400;
  font-style: Regular;
  font-size: 24px;
  text-align: center;
  color: #000;
  padding: 0 104px;
}
@media (max-width: 991px) {
  .task__text {
    padding: 0 50px;
  }
}
@media (max-width: 575px) {
  .task__text {
    padding: 0 20px;
    font-size: 16px;
    line-height: 18px;
  }
}

.key-visual {
  margin-bottom: 103px;
}
@media (max-width: 767px) {
  .key-visual {
    margin-bottom: 40px;
  }
}

.key-visual__content {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 24px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 767px) {
  .key-visual__content {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto 10px auto;
    grid-template-rows: auto auto;
    gap: 10px;
  }
  .key-visual__content > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .key-visual__content > *:nth-child(2) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
}

.key-visual__content--left {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 24px auto;
  grid-template-rows: 1fr auto;
  gap: 24px;
}
@media (max-width: 767px) {
  .key-visual__content--left {
    gap: 10px;
  }
}

.key-visual-left-1 img {
  width: 100%;
}

.key-visual-left-twin {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 24px 2fr;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}
@media (max-width: 767px) {
  .key-visual-left-twin {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1fr 10px 5fr;
    grid-template-rows: 1fr 5fr;
    gap: 10px;
  }
  .key-visual-left-twin > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .key-visual-left-twin > *:nth-child(2) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
}

.key-visual-left-2 {
  background-color: #CFE5F6;
}
@media (max-width: 767px) {
  .key-visual-left-2 {
    background-color: #EAC6EB;
  }
}

.key-visual-left-3 img {
  width: 100%;
}

.key-visual__content--right {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 24px auto 24px 1fr;
  grid-template-rows: 1fr auto 1fr;
  gap: 24px;
}
@media (max-width: 767px) {
  .key-visual__content--right {
    gap: 10px;
    -ms-grid-rows: 1fr 10px 5fr;
    grid-template-rows: 1fr 5fr;
  }
}

.key-visual-right-1 {
  background-color: #EAC6EB;
}
@media (max-width: 767px) {
  .key-visual-right-1 {
    display: none;
  }
}

.key-visual-right-2 img {
  width: 100%;
}

.key-visual-right-twin {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 24px 3fr;
  grid-template-columns: 1fr 3fr;
  gap: 24px;
}
@media (max-width: 767px) {
  .key-visual-right-twin {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    gap: 10px;
  }
}

.key-visual-right-4 {
  background-color: #E9F0D0;
}
@media (max-width: 767px) {
  .key-visual-right-4 {
    background-color: #CFE5F6;
  }
}

.key-visual-right-5 {
  background-color: #CED9BC;
}

.retouch {
  margin-bottom: 103px;
}
@media (max-width: 767px) {
  .retouch {
    margin-bottom: 40px;
  }
}

.retouch-content-pc {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 9fr 24px 7fr 24px 8fr;
  grid-template-columns: 9fr 7fr 8fr;
  gap: 24px;
}
@media (max-width: 767px) {
  .retouch-content-pc {
    display: none;
  }
}

.retouch-content-pc-left {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 24px auto;
  grid-template-rows: auto auto;
  gap: 24px;
}

.retouch-content-pc-left-1 img {
  width: 100%;
}

.retouch-content-pc-left-2 img {
  width: 100%;
}

.retouch-content-pc-center {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 2fr 24px auto 24px 1fr;
  grid-template-rows: 2fr auto 1fr;
  gap: 24px;
}

.retouch-content-pc-center-1 {
  background-color: #CFE5F6;
}

.retouch-content-pc-center-2 img {
  width: 100%;
}

.retouch-content-pc-center-3 {
  background-color: #EAC6EB;
}

.retouch-content-pc-right {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 24px auto;
  grid-template-rows: auto auto;
  gap: 24px;
}

.retouch-content-pc-right-1 img {
  width: 100%;
}

.retouch-content-pc-right-2 img {
  width: 100%;
}

.retouch-content-mob {
  display: none;
}
@media (max-width: 767px) {
  .retouch-content-mob {
    display: -ms-grid;
    display: grid;
    gap: 10px;
  }
}

.retouch-mob-row img {
  width: 100%;
}

.retouch-mob-row-twin-1 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 10px 5fr;
  grid-template-columns: 2fr 5fr;
  gap: 10px;
  height: 24px;
}

.twin-1-1 {
  background-color: #CED9BC;
}

.twin-1-2 {
  background-color: #CFE5F6;
}

.retouch-mob-row-twin-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}

.twin-2 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.retouch-mob-row-once {
  background-color: #EAC6EB;
  height: 18px;
}

.video {
  margin-bottom: 103px;
}
@media (max-width: 767px) {
  .video {
    margin-bottom: 40px;
  }
}

.video-wrap{
  padding: 0 70px;
}

@media (max-width:767px) {
  .video-wrap{
    padding: 0 70px;
  }
}

.video-content {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 83px 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 83px;
}
@media (max-width: 767px) {
  .video-content {
    gap: 30px;
  }
}

.video-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media (max-width: 767px) {
  .video-row {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}

.video-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.video-card-pic {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 24px;
}
@media (max-width: 767px) {
  .video-card-pic {
    margin-bottom: 10px;
  }
}
.video-card-pic video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-card-text {
  font-family: effra;
  font-weight: 900;
  font-size: 26px;
  color: #000;
}
@media (max-width: 767px) {
  .video-card-text {
    padding-left: 20px;
    font-size: 18px;
  }
}

.design {
  margin-bottom: 103px;
}
@media (max-width: 767px) {
  .design {
    margin-bottom: 40px;
  }
}

.design-pic img {
  width: 100%;
}

.banners {
  margin-bottom: 103px;
}
@media (max-width: 767px) {
  .banners {
    margin-bottom: 40px;
  }
}

.banners-pc {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 24px 4fr 24px 1fr;
  grid-template-rows: 1fr 4fr 1fr;
  gap: 24px;
}
@media (max-width: 767px) {
  .banners-pc {
    display: none;
  }
}

.banners-pc-row-1 img {
  width: 100%;
}

.banners-pc-row-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 24px 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.banners-pc-row-2-left {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 24px 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
}

.banners-pc-row-2-left-pic2 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.banners-pc-row-2-left-pic3 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.banners-pc-row-2-right {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 4fr 24px 1fr;
  grid-template-rows: 4fr 1fr;
  gap: 24px;
}

.banners-pc-row-2-right-top {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 5fr 24px 2fr;
  grid-template-columns: 5fr 2fr;
  gap: 24px;
}

.banners-pc-row-2-right-top-left img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.banners-pc-row-2-right-top-right {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 2fr 24px 3fr;
  grid-template-rows: 2fr 3fr;
  gap: 24px;
}

.banners-pc-row-2-right-top-left-bg {
  background-color: #E9F0D0;
}

.banners-pc-row-2-right-top-left-pic5 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.banners-pc-row-2-right-bottom {
  background-color: #EAC6EB;
}

.banners-mob {
  display: none;
}
@media (max-width: 767px) {
  .banners-mob {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr 10px 2.5fr 10px 0.5fr 10px 3fr;
    grid-template-rows: 1fr 2.5fr 0.5fr 3fr;
    gap: 10px;
  }
}

.banners-mob-row1 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.banners-mob-row2 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.banners-mob-row-half {
  background-color: #CFE5F6;
}

.banners-mob-row2-multi {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 10px 3fr;
  grid-template-columns: 2fr 3fr;
  gap: 10px;
}

.banners-mob-row-left img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.banners-mob-row-right {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
}

.banners-mob-row-right-top img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.banners-mob-row-right-bottom {
  background-color: #CED9BC;
}