.project_img,
.project_modal .modal_right_content,
.project {
  overflow: hidden;
}

.container {
  max-width: none;
  padding: 0;
  margin-bottom: 0
}

.header__left {
  fill: #c0ca80;
  color: #c0ca80
}

.logo svg {
  color: var(--black);
  fill: var(--black)
}

header .logo .turning__star {
  color: var(--brown);
  fill: var(--brown)
}

.header-container {
  height: max-content
}

.project {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  position: relative;
  -webkit-transition: var(--smooth-transition);
  transition: var(--smooth-transition);
  -webkit-aspect-ratio: 2/1;
  aspect-ratio: 2/1
}

.project_img {
  width: 50%;
  -webkit-aspect-ratio: 1/1;
  aspect-ratio: 1/1
}

.project_content {
  -webkit-justify-content: center;
  justify-content: center;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
  width: 50%;
  -webkit-aspect-ratio: 1/1;
  aspect-ratio: 1/1
}

.lateral_content {
  display: none
}

@media screen and (min-width:1150px) {
  .container-grid {
    display: grid;
    -webkit-grid-template-columns: repeat(3, 1fr);
    -webkit-grid-template-areas: "projects projects lateral";
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "projects projects lateral";
  }

  .slide img {
    height: 100%;
    width: 100%;
    -webkit-aspect-ratio: auto 632/457;
    aspect-ratio: auto 632/457;
    position: relative
  }

  .lateral_content {
    grid-area: lateral;
    margin: 0;
    display: block;
    max-height: 100%;
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height))
  }

  .projects_container {
    grid-area: projects
  }

  .slide {
    opacity: 0;
    -webkit-transition: opacity .2s ease-in-out 0.2s;
    transition: opacity .2s ease-in-out 0.2s;
    max-width: 100%
  }

  .carousel {
    position: relative;
    height: 100%;
    width: 100%
  }

  .slide[data-active] {
    opacity: 1;
    z-index: 1;
    transition-delay: 0s
  }
}

#modals,
button[data-modal-button] {
  position: fixed;
  pointer-events: none;
  opacity: 0
}

.width-0 {
  width: 0% !important;
  height: 0% !important;
  max-width: 0% !important;
  max-height: 0% !important;
}

#modals.active .width-0 {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

#modals,
.project_modal,
.project_modal .modal_content {
  -webkit-transition: var(--smooth-transition);
  transition: var(--smooth-transition);
}

.project_link {
  z-index: 2
}

.project_content {
  padding: 6rem;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  text-align: right;
  -webkit-flex-direction: column;
  flex-direction: column
}

button[data-modal-button] {
  padding: 0;
  -webkit-transition: var(--quick-transition);
  transition: var(--quick-transition)
}

.projects_container .project:nth-of-type(2n) .project_content {
  -webkit-align-items: flex-start;
  align-items: flex-start;
  text-align: left
}

.project_content svg {
  width: 15px;
  height: 15px;
  margin-bottom: 2rem
}

.project_content p {
  white-space: pre-line;
  margin: 0
}

#modals {
  background: 0 0;
  top: 50%;
  left: 50%;
  z-index: 7;
  width: 0%;
  height: 0%;
}

.project_modal .modal_content {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: inherit
}

.project_modal[data-modal-active] .modal_content {
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
}

.project_modal {
  position: absolute;
  background: #fff;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  pointer-events: none
}

.project_modal[data-modal-active] {
  opacity: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%
}

#modals.active {
  opacity: 1;
  top: 17.5%;
  left: 17.5%;
  width: 65%;
  height: 65%
}


.modals__container,
.small_img {
  -webkit-transition: var(--smooth-transition);
  transition: var(--smooth-transition)
}

.modal__btn__close {
  transition-delay: .4s;
  -o-transition-delay: .4s;
  -webkit-transition-delay: .4s;
  -moz-transition-delay: .4s;
}

@media screen and (min-width:1000px) {
  #modals {
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  }
}

.project_modal .wrapper {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: unset;
  align-items: unset
}

.modal_left_content {
  width: 55%
}

.modal_right_content {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 45%;
  height: 100%
}

.modal_left_img {
  width: 100%;
  -webkit-aspect-ratio: auto 1/1;
  aspect-ratio: auto 1/1;
  height: 100%
}

.modal_text {
  padding: 0;
}

#modals.active .modal_text {
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  height: inherit;
  position: relative;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  color: var(--main-color);
  text-align: left;
}

.modal_text.white__text h3,
.modal_text.white__text p {
  color: var(--white)
}

.modal_text.white__text .modal__bar {
  background: var(--white)
}

.project_modal p {
  margin: 0;
  font-size: 1.4rem;
  white-space: inherit;
  letter-spacing: .4px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--black)
}

.project_modal .project__modal__title {
  font-weight: 500;
  font-size: 1.4rem;
  margin: 0;
  line-height: 1
}

.modal__bar {
  content: "";
  height: 1px;
  min-height: 1px;
  background-color: var(--grey);
  opacity: 0;
  width: 0%;
  transition: .7s ease-in-out;
  margin: 2.5rem 0
}

.modal__bar.active {
  width: 90%;
  opacity: 1;
}

.modal_right_img {
  max-height: 100%;
  width: 100%;
  min-height: 100%
}

.modal_img {
  width: 100%;
  height: 50%
}

button[data-modal-button] {
  display: block;
  top: calc(50% - 15px);
  border: unset;
  background: unset;
  z-index: 8;
  -webkit-transform: translateY(20px);
  transform: translateY(20px)
}

button[data-modal-button] svg {
  height: 30px;
  width: 30px;
  opacity: 1
}

button[data-modal-button=prev] {
  left: 20%
}

button[data-modal-button=next] {
  right: 20%
}

button[data-modal-button].active {
  pointer-events: auto;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  cursor: pointer;
  opacity: .5
}

button[data-modal-button].active:hover {
  opacity: .85
}

@media screen and (max-width:1350px) {
  .modal_left_content img {
    height: 100%
  }

  .project_modal[data-modal-active] {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
  }

  #modals.active {
    opacity: 1;
    top: 17.5%;
    left: 17.5%;
    width: 65%;
    height: 65%
  }
}

.small_img {
  -webkit-filter: grayscale(100%) brightness(90%);
  filter: grayscale(100%) brightness(90%);
  scale: 1;
  height: 100%;
  -webkit-aspect-ratio: 1/1;
  aspect-ratio: 1/1;
  width: 100%
}

.project_link:active+.small_img,
.project_link:focus+.small_img,
.project_link:hover+.small_img,
.project_link:active+.small_img .small_img,
.project_link:focus+.small_img .small_img,
.project_link:hover+.small_img .small_img {
  scale: 1.05;
  -webkit-filter: grayscale(0%) brightness(100%);
  filter: grayscale(0%) brightness(100%)
}

@media screen and (max-width:1250px) {
  .modal_left_content {
    width: 55%
  }

  .modal_right_content {
    width: 45%
  }

  .small_img {
    -webkit-filter: grayscale(0%) brightness(100%);
    filter: grayscale(0%) brightness(100%)
  }
}

@media screen and (max-width:1050px) {
  .project_modal[data-modal-active] {
    transition-delay: 0s;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-flex-direction: column;
    flex-direction: column
  }

  .project_modal[data-modal-active] .modal_content {
    -webkit-flex-direction: column;
    flex-direction: column
  }

  #modals.active {
    width: 80%;
    height: 70%;
    left: 10%;
    top: 15%;
    bottom: 0
  }

  .modal_left_content {
    height: 55%;
    width: 100%;
    position: relative
  }

  .modal_right_content {
    height: 45%;
    width: 100%;
    -webkit-flex-direction: row;
    flex-direction: row
  }

  .modal_img,
  .modal_right_img,
  .modal_text {
    height: 100%
  }

  .modal_text {
    position: static
  }

  button[data-modal-button] {
    display: none
  }
}

@media screen and (max-width:550px) {

  #modals.active,
  .project_modal[data-modal-active] {
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    left: 0;
    top: 0;
    bottom: 0
  }

  .project_modal[data-modal-active] {
    transition-delay: 0s;
    -webkit-flex-direction: column;
    flex-direction: column
  }

  .wrapper {
    -webkit-flex-direction: column;
    flex-direction: column
  }

  .modal_text {
    width: 70%;
    height: auto;
    padding: 0;
    margin-right: 2rem;
    -webkit-justify-content: center;
    justify-content: center
  }

  .modal_left_content {
    height: 55%;
    width: 100%;
    position: relative
  }

  .project_modal[data-modal-active] .modal_right_content {
    height: 45%;
    width: 100%;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    display: flex;
    display: -webkit-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center
  }

  .project_modal[data-modal-active] .modal_text {
    position: static;
    padding: 0 5rem 7rem;
    height: 40%
  }

  .modal_img,
  .modal_right_img {
    height: 60%
  }

  .modal_img {
    display: none
  }

  .project {
    -webkit-flex-direction: row;
    flex-direction: row;
    max-width: 100%;
    width: 100vw;
    height: auto;
    -webkit-aspect-ratio: 2/1;
    aspect-ratio: 2/1
  }

  .project_content,
  .project_img {
    -webkit-aspect-ratio: 1/1;
    aspect-ratio: 1/1;
    width: 50%;
    height: 100%;
    max-width: 50%
  }

  .project_content {
    padding: 0 3rem 3rem;
    font-size: 1.4rem
  }

  .project_content svg {
    margin-bottom: 1rem
  }
}

.modals__container {
  position: relative;
  pointer-events: none;
  display: flex;
  display: -webkit-flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: 0 0
}

#modals.active .indicators {
  pointer-events: all;
  -webkit-transition: var(--quick-transition);
  transition: var(--quick-transition)
}

@media screen and (min-width:550px) and (max-width:1200px) {

  .project_content p {
    font-size: 2rem;
  }

  #modals.active .modal_text {
    padding: 8rem 9rem;
    width: 70% !important;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
  }

  .project_modal .project__modal__title {
    font-size: 2.4rem;
  }

  .project_modal p {
    font-size: 2rem;
  }

  #modals.active .modal_text.illustrated {
    width: 50% !important;
    padding: 5rem 4rem;
  }

  .modal_right_content .modal_text.modal_text.illustrated {
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: center;
    justify-content: center;
  }

  .modal_text.illustrated+.modal_img {
    width: 50%;
  }
}

@media screen and (min-width:1201px) {
  #modals.active .modal_text.modal_text.illustrated {
    height: 50%;
    padding: 6rem;
  }

  .modal_right_content .modal_text {
    padding: 8rem 6rem;
  }

  #modals.active .modal_right_content .modal_text.illustrated.long {
    padding: 3rem;
  }
}

@media screen and (min-width:1401px) {

  #modals.active .modal_text.modal_text.illustrated.long {
    padding: 5rem;
  }
}

@media screen and (min-width:1701px) {

  #modals.active .modal_text.modal_text.illustrated,
  #modals.active .modal_text.modal_text.illustrated.long {
    padding: 8rem 6rem;
  }

  #modals.active .modal_text.modal_text {
    padding: 15rem 10rem;
  }
}


@media screen and (min-width:2200px) {

  #modals.active .modal_text.modal_text {
    padding: 23rem 16rem;
  }

  #modals.active .modal_text.modal_text.illustrated,
  #modals.active .modal_text.modal_text.illustrated.long {
    padding: 14rem 12rem;
  }
}

:root {
  --project-1-color: 255, 21%, 85%;
  --project-1-star-color: 252, 32%, 44%;
  --project-2-color: 17, 20%, 82%;
  --project-2-star-color: 12, 26%, 61%;
  --project-3-color: 0, 14%, 80%;
  --project-3-star-color: 320, 27%, 57%;
  --project-4-color: 35, 18%, 63%;
  --project-4-star-color: 30, 33%, 91%;
  --project-5-color: 43, 16%, 83%;
  --project-5-star-color: 29, 16%, 41%;
  --project-6-color: 60, 1%, 68%;
  --project-6-star-color: 211, 15%, 54%;
  --project-7-color: 0, 0%, 100%;
  --project-7-star-color: 226, 55%, 34%;
  --project-8-color: 168, 10%, 80%;
  --project-8-star-color: 349, 41%, 55%;
  --project-9-color: 261, 10%, 73%;
  --project-9-star-color: 235, 38%, 38%;
  --project-10-color: 15, 35%, 87%;
  --project-10-star-color: 333, 31%, 49%;
  --project-11-color: 85, 30%, 78%;
  --project-11-star-color: 26, 15%, 37%;
  --project-12-color: 19, 15%, 75%;
  --project-12-star-color: 30, 5%, 38%;
  --project-13-color: 62, 25%, 73%;
  --project-13-star-color: 217, 5%, 34%;
  --project-14-color: 37, 46%, 79%;
  --project-14-star-color: 216, 25%, 33%;
}

@media screen and (max-width: 1199px) {
  .wrapper .project:nth-child(1) {
    background-color: hsl(var(--project-1-color));
  }

  .wrapper .project:nth-child(1) svg {
    color: hsl(var(--project-1-star-color));
  }

  .wrapper .project:nth-child(2) {
    background-color: hsl(var(--project-2-color));
  }

  .wrapper .project:nth-child(2) svg {
    color: hsl(var(--project-2-star-color));
  }

  .wrapper .project:nth-child(3) {
    background-color: hsl(var(--project-3-color));
  }

  .wrapper .project:nth-child(3) svg {
    color: hsl(var(--project-3-star-color));
  }

  .wrapper .project:nth-child(4) {
    background-color: hsl(var(--project-4-color));
  }

  .wrapper .project:nth-child(4) svg {
    color: hsl(var(--project-4-star-color));
  }

  .wrapper .project:nth-child(5) {
    background-color: hsl(var(--project-5-color));
  }

  .wrapper .project:nth-child(5) svg {
    color: hsl(var(--project-5-star-color));
  }

  .wrapper .project:nth-child(6) {
    background-color: hsl(var(--project-6-color));
  }

  .wrapper .project:nth-child(6) svg {
    color: hsl(var(--project-6-star-color));
  }

  .wrapper .project:nth-child(7) {
    background-color: hsl(var(--project-7-color));
  }

  .wrapper .project:nth-child(7) svg {
    color: hsl(var(--project-7-star-color));
  }

  .wrapper .project:nth-child(8) {
    background-color: hsl(var(--project-8-color));
  }

  .wrapper .project:nth-child(8) svg {
    color: hsl(var(--project-8-star-color));
  }

  .wrapper .project:nth-child(9) {
    background-color: hsl(var(--project-9-color));
  }

  .wrapper .project:nth-child(9) svg {
    color: hsl(var(--project-9-star-color));
  }

  .wrapper .project:nth-child(10) {
    background-color: hsl(var(--project-10-color));
  }

  .wrapper .project:nth-child(10) svg {
    color: hsl(var(--project-10-star-color));
  }

  .wrapper .project:nth-child(11) {
    background-color: hsl(var(--project-11-color));
  }

  .wrapper .project:nth-child(11) svg {
    color: hsl(var(--project-11-star-color));
  }

  .wrapper .project:nth-child(12) {
    background-color: hsl(var(--project-12-color));
  }

  .wrapper .project:nth-child(12) svg {
    color: hsl(var(--project-12-star-color));
  }

  .wrapper .project:nth-child(13) {
    background-color: hsl(var(--project-13-color));
  }

  .wrapper .project:nth-child(13) svg {
    color: hsl(var(--project-13-star-color));
  }

  .wrapper .project:nth-child(14) {
    background-color: hsl(var(--project-14-color));
  }

  .wrapper .project:nth-child(14) svg {
    color: hsl(var(--project-14-star-color));
  }
}

@media screen and (min-width: 1200px) {
  .wrapper .project:nth-child(1) {
    background-color: hsl(var(--project-1-color), 0.4);
  }

  .wrapper .project:nth-child(1) svg {
    color: hsl(var(--project-1-star-color));
  }

  .wrapper .project:nth-child(2) {
    background-color: hsl(var(--project-2-color), 0.4);
  }

  .wrapper .project:nth-child(2) svg {
    color: hsl(var(--project-2-star-color));
  }

  .wrapper .project:nth-child(3) {
    background-color: hsl(var(--project-3-color), 0.4);
  }

  .wrapper .project:nth-child(3) svg {
    color: hsl(var(--project-4-star-color));
  }

  .wrapper .project:nth-child(4) {
    background-color: hsl(var(--project-4-color), 0.4);
  }

  .wrapper .project:nth-child(4) svg {
    color: hsl(var(--project-4-star-color));
  }

  .wrapper .project:nth-child(5) {
    background-color: hsl(var(--project-5-color), 0.4);
  }

  .wrapper .project:nth-child(5) svg {
    color: hsl(var(--project-5-star-color), 0.4);
  }

  .wrapper .project:nth-child(6) {
    background-color: hsl(var(--project-6-color), 0.4);
  }

  .wrapper .project:nth-child(6) svg {
    color: hsl(var(--project-6-star-color), 0.4);
  }

  .wrapper .project:nth-child(7) {
    background-color: hsl(var(--project-7-color), 0.4);
  }

  .wrapper .project:nth-child(7) svg {
    color: hsl(var(--project-7-star-color), 0.4);
  }

  .wrapper .project:nth-child(8) {
    background-color: hsl(var(--project-8-color), 0.4);
  }

  .wrapper .project:nth-child(8) svg {
    color: hsl(var(--project-8-star-color), 0.4);
  }

  .wrapper .project:nth-child(9) {
    background-color: hsl(var(--project-9-color), 0.4);
  }

  .wrapper .project:nth-child(9) svg {
    color: hsl(var(--project-9-star-color), 0.4);
  }

  .wrapper .project:nth-child(10) {
    background-color: hsl(var(--project-10-color), 0.4);
  }

  .wrapper .project:nth-child(10) svg {
    color: hsl(var(--project-10-star-color), 0.4);
  }

  .wrapper .project:nth-child(11) {
    background-color: hsl(var(--project-11-color), 0.4);
  }

  .wrapper .project:nth-child(11) svg {
    color: hsl(var(--project-11-star-color), 0.4);
  }

  .wrapper .project:nth-child(12) {
    background-color: hsl(var(--project-12-color), 0.4);
  }

  .wrapper .project:nth-child(12) svg {
    color: hsl(var(--project-12-star-color), 0.4);
  }

  .wrapper .project:nth-child(13) {
    background-color: hsl(var(--project-13-color), 0.4);
  }

  .wrapper .project:nth-child(13) svg {
    color: hsl(var(--project-13-star-color), 0.4);
  }

  .wrapper .project:nth-child(14) {
    background-color: hsl(var(--project-14-color), 0.4);
  }

  .wrapper .project:nth-child(14) svg {
    color: hsl(var(--project-14-star-color), 0.4);
  }

  .wrapper .project:nth-child(1):hover {
    background-color: hsl(var(--project-1-color));
  }

  .wrapper .project:nth-child(1):hover svg {
    color: hsl(var(--project-1-star-color), 1);
  }

  .wrapper .project:nth-child(2):hover {
    background-color: hsl(var(--project-2-color));
  }

  .wrapper .project:nth-child(2):hover svg {
    color: hsl(var(--project-2-star-color), 1);
  }

  .wrapper .project:nth-child(3):hover {
    background-color: hsl(var(--project-3-color), 1);
  }

  .wrapper .project:nth-child(3):hover svg {
    color: hsl(var(--project-3-star-color), 1);
  }

  .wrapper .project:nth-child(4):hover {
    background-color: hsl(var(--project-4-color), 1);
  }

  .wrapper .project:nth-child(4):hover svg {
    color: hsl(var(--project-4-star-color), 1);
  }

  .wrapper .project:nth-child(5):hover {
    background-color: hsl(var(--project-5-color), 1);
  }

  .wrapper .project:nth-child(5):hover svg {
    color: hsl(var(--project-5-star-color), 1);
  }

  .wrapper .project:nth-child(6):hover {
    background-color: hsl(var(--project-6-color), 1);
  }

  .wrapper .project:nth-child(6):hover svg {
    color: hsl(var(--project-6-star-color), 1);
  }

  .wrapper .project:nth-child(7):hover {
    background-color: hsl(var(--project-7-color), 1);
  }

  .wrapper .project:nth-child(7):hover svg {
    color: hsl(var(--project-7-star-color), 1);
  }

  .wrapper .project:nth-child(8):hover {
    background-color: hsl(var(--project-8-color), 1);
  }

  .wrapper .project:nth-child(8):hover svg {
    color: hsl(var(--project-8-star-color), 1);
  }

  .wrapper .project:nth-child(9):hover {
    background-color: hsl(var(--project-9-color), 1);
  }

  .wrapper .project:nth-child(9):hover svg {
    color: hsl(var(--project-9-star-color), 1);
  }

  .wrapper .project:nth-child(10):hover {
    background-color: hsl(var(--project-10-color), 1);
  }

  .wrapper .project:nth-child(10):hover svg {
    color: hsl(var(--project-10-star-color), 1);
  }

  .wrapper .project:nth-child(11):hover {
    background-color: hsl(var(--project-11-color), 1);
  }

  .wrapper .project:nth-child(11):hover svg {
    color: hsl(var(--project-11-star-color), 1);
  }

  .wrapper .project:nth-child(12):hover {
    background-color: hsl(var(--project-12-color), 1);
  }

  .wrapper .project:nth-child(12):hover svg {
    color: hsl(var(--project-12-star-color), 1);
  }

  .wrapper .project:nth-child(13):hover {
    background-color: hsl(var(--project-13-color), 1);
  }

  .wrapper .project:nth-child(13):hover svg {
    color: hsl(var(--project-13-star-color), 1);
  }

  .wrapper .project:nth-child(14):hover {
    background-color: hsl(var(--project-14-color), 1);
  }

  .wrapper .project:nth-child(14):hover svg {
    color: hsl(var(--project-14-star-color), 1);
  }
}

@media screen and (max-width: 550px) {
  .modals__container p {
    white-space: inherit;
  }

  .modals__container .project_modal:nth-child(1) .modal_content .modal__bar,
  .modals__container .project_modal:nth-child(2) .modal_content .modal__bar,
  .modals__container .project_modal:nth-child(5) .modal_content .modal__bar,
  .modals__container .project_modal:nth-child(6) .modal_content .modal__bar,
  .modals__container .project_modal:nth-child(9) .modal_content .modal__bar,
  .modals__container .project_modal:nth-child(10) .modal_content .modal__bar,
  .modals__container .project_modal:nth-child(11) .modal_content .modal__bar,
  .modals__container .project_modal:nth-child(13) .modal_content .modal__bar {
    margin: 1.2rem 0;
  }
}

@media screen and (min-width: 551px) and (max-width: 1050px) {

  .modals__container .project_modal:nth-child(3) .modal_content p,
  .modals__container .project_modal:nth-child(4) .modal_content p,
  .modals__container .project_modal:nth-child(12) .modal_content p,
  .modals__container .project_modal:nth-child(14) .modal_content p {
    white-space: inherit;
  }

  .modals__container .project_modal:nth-of-type(6) .modal_content .modal_text p,
  .modals__container .project_modal:nth-of-type(9) .modal_content .modal_text p {
    white-space: inherit;
  }
}

.modals__container .project_modal:nth-of-type(1) .modal_content .modal_right_content .modal_text h3 {
  color: #7C4DD0;
}

.modals__container .project_modal:nth-of-type(2) .modal_content .modal_right_content {
  background: #C9C7C8;
}

.modals__container .project_modal:nth-of-type(2) .modal_content .modal_right_content h3 {
  color: #856163;
}

.modals__container .project_modal:nth-of-type(2) .modal_content .modal_right_content .modal__bar {
  background-color: #856163;
}

.modals__container .project_modal:nth-of-type(3) .modal_content .modal_right_content {
  background: #D9B7B6;
}

.modals__container .project_modal:nth-of-type(3) .modal_content .modal_right_content h3 {
  color: #BB676E;
}

.modals__container .project_modal:nth-of-type(4) .modal_content .modal_right_content {
  background: #E3DDD9;
}

.modals__container .project_modal:nth-of-type(4) .modal_content .modal_right_content h3 {
  color: #775822;
}

.modals__container .project_modal:nth-of-type(5) .modal_content h3 {
  color: #C6A443;
}

.project_modal:nth-of-type(6) .modal_content .modal_right_content {
  background: #E4E3E0;
}

.project_modal:nth-of-type(6) .modal_content .modal_right_content h3 {
  color: #994554;
}

.project_modal:nth-of-type(7) .modal_content .modal_right_content {
  background: #156EA3;
}

.project_modal:nth-of-type(7) .modal_content .modal_right_content p {
  white-space: inherit;
}

.project_modal:nth-of-type(8) .modal_content .modal_right_content {
  background: #50405D;
}

.project_modal:nth-of-type(9) .modal_content .modal_right_content {
  background: #E4E3E0;
}

.project_modal:nth-of-type(9) .modal_content .modal_right_content h3 {
  color: #655e7a;
}

.project_modal:nth-of-type(10) .modal_content .modal_right_content {
  background: #BA4A61;
}

.project_modal:nth-of-type(11) .modal_content .modal_right_content {
  background: #729462;
}

.project_modal:nth-of-type(12) .modal_content .modal_right_content {
  background: #56413A;
}

.project_modal:nth-of-type(14) .modal_content .modal_right_content {
  background: #68686B;
}