/* Tejori — our projects page */

/* ---------- banner ---------- */

.tv {
  overflow: hidden;
  background: #fff;
}

.tv__w {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.tv__c {
  flex: 1;
  padding-left: 5.108vw;
}

.tv__d {
  max-width: 29.74vw;
  margin: 0 0 1.823vw;
  font-size: 1.667vw;
  font-weight: 400;
  line-height: 2.5vw;
  letter-spacing: 0;
  color: var(--c-mute);
}

.tv__img {
  width: 62.083vw;
  box-shadow: 0 .781vw 2.083vw rgba(0, 0, 0, .12);
}

.tv__img img {
  width: 100%;
  height: auto;
}

.tv__tags {
  position: absolute;
  top: 1.979vw;
  left: 4.067vw;
  display: flex;
  flex-direction: column;
  row-gap: .521vw;
}

.tv__tag {
  display: block;
  max-width: max-content;
  padding: .469vw 1.094vw;
  font-size: 2.763vw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .414vw;
  text-transform: uppercase;
  color: #000;
  background: #fff;
}

/* ---------- on-screen intro ---------- */

.sc {
  padding-block: 3.125vw;
  background: #f7f7f7;
}

.sc__w {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.615vw;
  padding-inline: 5.469vw;
}

.sc__h {
  margin: 0;
  font-size: 2.5vw;
  font-weight: 600;
  line-height: normal;
  letter-spacing: .375vw;
  text-transform: uppercase;
  text-align: center;
  color: #000;
}

.sc__t {
  font-size: 1.667vw;
  font-weight: 400;
  line-height: 150%;
  text-align: center;
  color: #000;
}

.sc__t p {
  margin: 0 0 1.563vw;
  letter-spacing: 0;
}

.sc__t p:last-child {
  margin-bottom: 0;
}

.sc .btn {
  --btn-hover: var(--c-green);
  margin-top: .83vw;
  padding: .369vw .521vw;
  text-transform: uppercase;
  color: #fff;
  background: #000;
}

.sc .btn__in {
  gap: .781vw;
}

.sc .btn__in svg,
.sa .btn__in svg {
  height: 1.458vw;
}

/* ---------- sustainable costume design ---------- */

.cd__in {
  padding: 3.125vw 2.865vw 3.088vw 5.208vw;
}

.cd__w {
  display: flex;
  align-items: center;
  gap: .833vw;
}

.cd__img {
  order: 1;
}

.cd__img img {
  display: inline;
  width: 45.198vw;
  max-width: none;
}

.cd__h {
  max-width: 36.042vw;
  margin: 0;
  font-size: 2.5vw;
  font-weight: 600;
  line-height: 3.333vw;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-green);
}

.cd__h strong {
  color: #000;
}

.cd__sub {
  margin: 0;
  font-size: 1.25vw;
  font-weight: 500;
  line-height: 1.875vw;
  letter-spacing: 0;
  color: #000;
}

.cd__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.563vw;
  margin: 2.083vw 0;
}

.cd__list li {
  position: relative;
  padding-left: 2.969vw;
  font-size: 1.667vw;
  font-weight: 700;
  line-height: 1.563vw;
  color: #000;
}

.cd__list li::before {
  content: "";
  position: absolute;
  top: .156vw;
  left: 0;
  padding: .677vw .625vw;
  background: url(../img/strlists.png) center / cover no-repeat;
}

/* ---------- costume hire cards ---------- */

.sa {
  background: #fff;
}

.sa__w {
  padding-inline: 5.208vw;
  padding-bottom: 3.125vw;
  text-align: center;
}

.sa__h,
.sa__st {
  margin: 0;
  font-size: 2.5vw;
  font-weight: 600;
  line-height: normal;
  letter-spacing: .375vw;
  text-transform: uppercase;
  color: #000;
}

.sa__h .accent {
  color: var(--c-green);
}

.sa__sub {
  max-width: 42vw;
  margin: .3vw auto 0;
  font-size: 1.042vw;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
  color: #000;
}

.sa__grid {
  display: flex;
  gap: 5.208vw;
  margin-top: 2.6vw;
  padding-inline: 4.479vw;
}

.sa__card {
  flex: 1;
  min-width: 0;
}

.sa__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f1efe9;
}

.sa__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sa__cap {
  margin-top: 1.406vw;
  padding-inline: 1.563vw;
  font-size: 1.667vw;
  font-weight: 700;
  line-height: 100%;
  color: #000;
}

.sa__st {
  margin: 3.4vw auto 2.344vw;
}

.sa .btn {
  --btn-hover: var(--c-green);
  margin-inline: auto;
  padding: .369vw .521vw;
  color: #fff;
  background: #000;
}

.sa .btn__in {
  justify-content: center;
  gap: .781vw;
}

/* ---------- four feature cards ---------- */

.tf {
  background: var(--c-cream);
}

.tf__box {
  max-width: 89.583vw;
  margin-inline: auto;
}

.tf__in {
  padding-block: 5.208vw;
}

.tf__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6.25vw;
}

.tf__ic {
  display: flex;
  align-items: center;
  min-height: 11.979vw;
}

.tf__i img {
  max-width: 11.979vw;
}

.tf__i h4 {
  margin: 1.602vw 0 .981vw;
  padding-right: 1.823vw;
  font-size: 1.667vw;
  font-weight: 700;
  letter-spacing: 0;
  color: #000;
}

.tf__i--2 h4 {
  padding-right: 3.646vw;
}

.tf__i p {
  margin: 0;
  font-size: 1.042vw;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: #000;
}

/* ---------- BBC project band ---------- */

.op {
  position: relative;
  width: 100%;
  background: url(../img/deskmn.webp) center / cover;
}

.op__in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3.85vw 5.21vw;
}

.op__h {
  margin: 0;
  font-size: 2.5vw;
  font-weight: 600;
  line-height: normal;
  letter-spacing: .375vw;
  text-transform: uppercase;
  color: #fff;
}

.op__t {
  max-width: 34vw;
  margin-top: 1.563vw;
  font-size: 1.042vw;
  font-weight: 400;
  line-height: 150%;
  color: #fff;
}

.op__t p {
  margin: 0;
}

.op__thumbs {
  display: flex;
  gap: 1.04vw;
  margin-top: 2.708vw;
}

.op__thumb {
  width: 15.99vw;
  overflow: hidden;
  background: #2a2a2a;
}

.op__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the banner and the intro were written against 768, the rest against 767 */
@media (max-width: 768px) {
  .tv__w {
    flex-wrap: wrap;
  }

  .tv__c {
    order: 1;
    padding-block: 4.545vw;
    padding-inline: 4.545vw;
  }

  .tv__d {
    max-width: 100%;
    margin-bottom: 0;
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .tv__img {
    position: relative;
    width: 100%;
  }

  .tv__tags {
    top: auto;
    bottom: 9.091vw;
    left: 4.545vw;
    row-gap: 1.136vw;
  }

  .tv__tag {
    padding: .909vw 2.273vw;
    font-size: 6.029vw;
    line-height: 6.591vw;
    letter-spacing: .904vw;
  }

  .sc {
    padding: 7.273vw 4.545vw 9.091vw;
  }

  .sc__w {
    gap: 5.682vw;
    padding: 0;
  }

  .sc__h {
    padding-inline: 6.818vw;
    font-size: 6.029vw;
    line-height: 125%;
    letter-spacing: .904vw;
  }

  .sc__t {
    font-size: 3.409vw;
  }

  .sc__t p {
    margin-bottom: 5.682vw;
  }

  .sc .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90.682vw;
    max-width: 100%;
    height: 11.364vw;
    font-size: 4.545vw;
    text-align: center;
  }

  .sc .btn__in {
    justify-content: center;
    gap: 4.091vw;
  }

  .sc .btn__in svg {
    width: 8.759vw;
    height: 6.919vw;
  }
}

@media (max-width: 767px) {
  .cd__in {
    padding: 1.136vw 4.545vw 4.545vw;
  }

  .cd__w {
    flex-direction: column;
    gap: 0;
  }

  .cd__img {
    order: 0;
  }

  .cd__img img {
    width: 100%;
  }

  .cd__c {
    padding-top: 1.364vw;
  }

  .cd__h {
    max-width: 100%;
    font-size: 5.909vw;
    line-height: 7.955vw;
    letter-spacing: .886vw;
  }

  .cd__sub {
    margin-top: 5.682vw;
    font-size: 4.091vw;
    line-height: 6.136vw;
  }

  .cd__list {
    flex-flow: column wrap;
    gap: 4.545vw;
    margin: 6.518vw 0 0;
  }

  .cd__list li {
    margin-bottom: 0;
    padding-left: 5.909vw;
    font-size: 3.409vw;
    line-height: 3.409vw;
    letter-spacing: 0;
  }

  .cd__list li::before {
    top: 0;
    padding: 1.477vw 1.364vw;
  }

  .sa {
    padding: 0 0 6.818vw;
  }

  .sa__w {
    max-width: none;
    padding-top: 4.545vw;
    padding-inline: 4.545vw;
  }

  .sa__h,
  .sa__st {
    font-size: 5.909vw;
    letter-spacing: .886vw;
  }

  .sa__h .dark {
    display: block;
  }

  .sa__sub {
    max-width: 84vw;
    margin-top: 1.364vw;
    font-size: 2.727vw;
  }

  .sa__grid {
    flex-wrap: wrap;
    gap: 5.227vw 8.182vw;
    margin-top: 7vw;
    padding-inline: 0;
  }

  .sa__card {
    flex: 1 1 42%;
  }

  .sa__cap {
    margin-top: 3.409vw;
    padding-inline: 2.273vw;
    font-size: 4.545vw;
  }

  .sa__st {
    max-width: 90vw;
    margin-top: 8vw;
  }

  .sa .btn {
    max-width: 100%;
    margin-top: 7vw;
    padding: 1.591vw 2.273vw;
    font-size: 4.545vw;
  }

  .sa .btn__in {
    gap: 3.409vw;
  }

  .sa .btn__in svg {
    width: 8.759vw;
    height: 6.919vw;
  }

  .tf__box {
    max-width: 100%;
    padding-inline: 4.545vw;
  }

  .tf__in {
    padding-block: 9.091vw;
  }

  .tf__grid {
    grid-template-columns: 1fr;
    gap: 8.636vw;
  }

  .tf__i img {
    max-width: 26.137vw;
  }

  .tf__i h4,
  .tf__i--2 h4 {
    margin: 3.409vw 0 1.818vw;
    padding-right: 0;
    font-size: 4.545vw;
  }

  .tf__i p {
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .op {
    display: flex;
    align-items: flex-end;
    height: 149.091vw;
    background-image: url(../img/menmob.webp);
  }

  .op__in {
    padding: 6.82vw 4.55vw 8vw;
  }

  .op__h {
    font-size: 5.909vw;
    letter-spacing: .886vw;
  }

  .op__t {
    max-width: 100%;
    margin-top: 4.55vw;
    font-size: 3.409vw;
  }

  .op__thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4.55vw;
    width: 100%;
    margin-top: 6.82vw;
  }

  .op__thumb {
    width: 100%;
  }
}