#works__detail {
  margin-bottom: 30px;
  padding-top: 15vh;
  position: relative;
  z-index: 10;
}

.works__detail-back__button {
  margin-bottom: 24px;
  font-family: 'Sofia Sans', sans-serif;
  color: rgba(255, 255, 255, .5);
  display: flex;
  align-items: center;
  text-transform: uppercase;
  width: fit-content;
  line-height: 1;
  font-size: .8rem;
  cursor: pointer;
  transition: .3s;

}
.works__detail-back__button > svg {
  fill: rgba(255, 255, 255, .5);
  margin-right: 8px;
  transition: .3s;
  }

.works__detail-back__button:hover {
  color: rgba(255, 255, 255, 1);
  transition: .3s;
}

.works__detail-back__button:hover > svg {
  fill: rgba(255, 255, 255, 1);
  transition: .3s;
  }

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

.works-detail__row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.works-detail__image {
  width: 100%;
  aspect-ratio: 16/9;

}

.works-detail__imge > img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.works-detail__text-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  font-family: 'Sofia Sans', sans-serif;

}
.works-detail__text-container>h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  color: #FFB71B;
}

.works-detail__text-container > h4 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.works__showcase {
  padding-top: 5vh;
}

.works-detail__showcase {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}


.works-showcase__item {
  width: 100%;
  max-width: 1080px;
  margin: auto;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  aspect-ratio: 16/9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;

}

.works-showcase__item > img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
}

.works-detail__sosmed-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
}

.works-detail__sosmed-container>a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  color: white;
}

.works-detail__sosmed-container>a>small {
  font-weight: 300;
  font-size: 1rem;
}

.works-detail__sosmed-container>a:hover {
  color: #FFB71B;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .works-detail__container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 48px;
  }

  .works-detail__row {
    width: calc(100% - 24px);
  }

  .works-detail__text-container {
    padding-right: 25vw;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}