:root {
  --light: #fff;
  --dark: rgba(0,0,0,0.2);
  /*--dark2: rgba(237,34,36,0.5);*/
  --dark2: rgba(20,20,55,0.4);
}

.block_07 {  overflow: clip;  position: relative;  display: flex;  justify-content: center;  align-items: center;
  padding: 0.2rem;  width: 100%;}
.block_07 .category_container {  --gap: 2px;  display: flex;  justify-content: space-between;  flex-wrap: nowrap;
  gap: 2px;  width: 100%;  height: 100%;}
.block_07 .content {  --a0.5tive: 0;  cursor: pointer;  overflow: clip;  position: relative;  z-index: 10;
  display: flex;  flex-direction: column;  gap: 1.5rem;  padding: 3rem 2.5rem;
  width: 25%;  height: 600px;  transition: width 0.5s ease-in-out;}
.block_07 .content a {display: block; overflow:hidden; width:100%; height:100%; position:absolute; left:0; top:0;}  
.block_07 .content:hover {  --active: 1;  width: calc(40% - var(--gap)); transition: 0.5s all  }
.block_07 .content:hover::before { background-color: var(--dark2); transition: 0.5s all  }
.block_07 .content::before {  content: "";  position: absolute;  z-index: -10;  top: 0;  left: 0;  width: 100%;  height: 100%;
  background-color: var(--dark);  }
.block_07 .content::after {  content: "";  position: absolute;  z-index: -10;  bottom: 20px;  left: 0;  width: 100%;
height:50px; background:url(../img/arrow.png)no-repeat center  }  
.block_07 .content img {  position: absolute;  z-index: -20;  top: 0;  left: 0;  width: 100%;  height: 100%;
  -o-object-fit: cover;  object-fit: cover; -o-object-position: center;   object-position: center;}
.block_07 .content .profile_image {  opacity: calc(1 - var(--active));  transition: opacity 0.3s ease-in-out;}

/*.block_07 .profile_detail {  display: flex;  flex-direction: column;  gap: 0.5rem;  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;}*/
.block_07 .profile_detail span {  font-size: 2rem;  font-weight: 600;  color: var(--light);  text-wrap: nowrap;}
/*.block_07 .profile_detail p {  font-size: 0.75rem;  font-weight: 500;  color: var(--light);}*/
.block_07 .profile_quote {  }
.block_07 .profile_quote p {  font-size: 18px; line-height: 26px; font-weight: 500;  color: var(--light);
  transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.1s;}

.block_07 .wrapper {  display: grid;  grid-template-rows: 0fr;  overflow: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s, -ms-grid-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;}
.block_07 .profile_quote {  min-height: 0;  transform: translateY(50%);  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;}
.block_07 .content:hover .wrapper {  grid-template-rows: 1fr;}
.block_07 .content:hover .profile_quote {  transform: none;  opacity: 1;}



/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/

@media (max-width: 1023px) {
.block_07 .category_container {  --gap: 0rem; display:flex; flex-wrap: wrap;  justify-content: space-between; gap: 0;
  width:calc(100% - 30px);  height: 100%;}
.block_07 .content  {  --active: 0;  cursor: pointer;  overflow: clip;  position: relative;  z-index: 10;
  display: flex;  flex-direction: column;   padding: 2.5rem; margin-bottom:6px;
  width: 49%;  height: 200px;  border-radius: 1rem;  transition: width 0.5s ease-in-out;}	
.block_07 .profile_detail {   width: auto;}
.block_07 .profile_detail span {  font-size: 1.5rem;  }
.block_07 .content:hover {  --active: 1;  width: 49%;  transition: 0.5s all  }
.block_07 .profile_quote p { display:none;  font-size: 1rem;  }
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}