:root {
  --light: #fff;
  --dark: rgba(0,0,0,0.1);
  --dark2: rgba(0,0,0,0.5);
}

.block_07 {  overflow: clip;  position: relative;  display: flex;  justify-content: center;  align-items: center;
  padding: 0rem;  width: 100%;}
.block_07 .category_container {  --gap:0px;  display: flex;  justify-content: space-between;  flex-wrap: nowrap;
  gap:0px /*calc(var(--gap) * 2)*/;  width: 100%;  height: 100%;}
.block_07 .content {  --active: 0;  cursor: pointer;  overflow: clip;  position: relative;  z-index: 10;
  display: flex;  flex-direction: column;  gap: 1.5rem;  padding: 2.5rem;
  width: calc((100% / 4) - var(--gap));  height: 600px;  transition: width 0.5s ease-in-out;}
.block_07 .content:hover {  --active: 1;  width: calc(40% - var(--gap));}
.block_07 .content:hover::before { background-color: var(--dark2); transition: all 0.3s}
.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: 30px;  left: 0;  width: 100%;
height:50px; background:url(../img/arrow.png)no-repeat center; transition: 0.8s all  }  
.block_07 .content a { position: absolute;  z-index: 0;  bottom: 0px;  left: 0;  width: 100%;height:100%;   } 
.block_07 .content:hover::after { background:url(../img/arrow.png)no-repeat 90%; transition: 0.8s all  }  
.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.5s ease-in-out;}

.block_07 .profile_detail {  display: flex;  flex-direction: column;  gap: 0.5rem;  /*width: 12rem;*/
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;}
.block_07 .profile_detail span {  font-size: 1.5rem;  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 {  width: 80%;  transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));}
.block_07 .profile_quote p {  font-size: 18px;  font-weight: 600;  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) {
}