/** @format */

:root {
   /*temp*/
   --bg-color: #2c3e50;
   --1-color: #34495e;
   --2-color: #1abc9c;
   --3-color: #d53ee3;
   --text-color: #ecf0f1;
}

.project_wrapper:hover {
   cursor: pointer;
}

.project_wrapper {
   position: relative;
   height: 450px;
   transition: all 0.2s ease-in-out;
}

.project_wrapper:hover .project {
   transform: scale(1.025) translateY(-10px);
   box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.323);
   max-height: 650px;
   z-index: 50;
   grid-template-rows: 300px auto 40px auto;
}

.project {
   background-color: var(--bg-color);
   border-radius: 5px;
   overflow: hidden;
   display: grid;
   max-height: 450px;
   grid-template-areas:
      "img img"
      "title title"
      "platform stack"
      "desc desc";
   grid-template-columns: 40% 60%;
   grid-template-rows: 250px auto 40px auto;
   row-gap: 10px;
   position: relative;
   transition: all 0.2s ease-in-out;
}

.project::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 80px; /* Altura del difuminat */
   background: linear-gradient(to top, var(--bg-color) 0%, rgba(255, 255, 255, 0) 100%);
   pointer-events: none; /* Permite seleccionar el texto que está debajo */
   /* border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px; */
}

.project_img {
   grid-area: img;
   box-shadow: 0 0 10px 5px var(--3-color);
}

.project_title {
   grid-area: title;
   font-size: 32px;
   color: var(--text-color);
   font-weight: bold;
   padding: 0px 10px;
}

.project_platform {
   grid-area: platform;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: left;
   color: var(--text-color);
   font-size: 22px;
   padding: 5px;
   font-weight: bold;
}

.project_platform_item {
   color: var(--text-color);
   font-size: 22px;
   padding: 5px;
   font-weight: bold;
   border: 4px solid var(--2-color);
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
   border-radius: 22px;
   box-shadow: 0px 0px 5px 0px var(--2-color), inset 0px 0px 5px 0px var(--2-color);
}

.project_platform img {
   width: 1.2em;
   margin: 0px 5px;
}
.project_platform p {
   margin-right: 5px;
}

.project_description {
   grid-area: desc;
   padding: 10px;
   color: var(--text-color);
}

.project_technology_stack {
   grid-area: stack;
   display: flex;
   flex-flow: row-reverse nowrap;
   overflow: clip;
   justify-content: right;
   padding-right: 10px;
}
.project_technology_stack img {
   width: auto;
   height: 36px;
   margin: 0 2px;
}