.project-grid { display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch; } .portfolio-card { flex: 0 0 calc((100% - 4rem) / 3); max-width: calc((100% - 4rem) / 3); display: flex; flex-direction: column; height: auto; align-self: stretch; } .portfolio-card > :last-child { margin-top: auto; } .portfolio-preview { --preview-height: clamp(240px, 22vw, 340px); position: relative; overflow: hidden; height: var(--preview-height); border-radius: 1rem; } .portfolio-image { width: 100%; display: block; } .portfolio-image--default { height: 100%; object-fit: cover; transition: opacity 0.3s ease; } .portfolio-image--scroll { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity 0.3s ease, transform 6s ease-in-out; } .portfolio-card:hover .portfolio-image--default { opacity: 0; } .portfolio-card:hover .portfolio-image--scroll { opacity: 1; transform: translateY(calc(-100% + var(--preview-height))); } @media (max-width: 991px) { .portfolio-card { flex-basis: calc((100% - 2rem) / 2); max-width: calc((100% - 2rem) / 2); } } @media (max-width: 767px) { .portfolio-card { flex-basis: 100%; max-width: 100%; } .portfolio-preview { --preview-height: 220px; } }   .custom-language-switcher { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px;  } .custom-language-switcher li { display: inline-block; } .custom-language-switcher img { width: 32px;  height: auto; display: block; } .custom-language-switcher li.active img { opacity: 0.5;  }  .cf-theme-dark .logo-dark { display: block; float: left;  } .cf-theme-dark .logo-light { display: none; } .cf-theme-light .logo-dark { display: none; } .cf-theme-light .logo-light { display: block; float: left;  }  .logo-container { display: flex; justify-content: flex-start;  align-items: center; width: 100%; }  .current-menu-bg { background-color: var(--bg-surface);  transition: background-color 0.3s ease-in-out; }  .current-menu-bg:hover { background-color: var(--bg-body);  }  .current-menu-item .current-menu-bg, .current-menu-parent .current-menu-bg { background-color: var(--bg-body) !important;  } [data-text-columns="Two column layout"] { column-count: 2; column-gap: var(--gap-xl); }  @media (max-width: 768px) { [data-text-columns="Two column layout"] { column-count: 1; column-gap: var(--gap-xl); } } [data-text-columns="Three column layout"] { column-count: 3; column-gap: var(--gap-xl); }  @media (max-width: 992px) { [data-text-columns="Three column layout"] { column-count: 2; column-gap: var(--gap-xl); } }  .c-v-team-4-container { position: relative; overflow: hidden; } .c-v-team-4-overlay-before { mix-blend-mode: multiply; transition: all 1s ease; } .c-v-team-4-image { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: all 1s ease; } .c-v-team-4-overlay { transition: all 1s ease; opacity: 0; } .c-v-team-4-container:hover .c-v-team-4-image{ transform: scale(1); opacity: 0; transition: all 1s ease; } .c-v-team-4-container:hover .c-v-team-4-overlay-before{ transform: scale(1); opacity: 0; transition: all 1s ease; } .c-v-team-4-container:hover .c-v-team-4-overlay-before--text { transform: scale(1); opacity: 0; transition: all 1s ease; } .c-v-team-4-container:hover .c-v-team-4-overlay { transform: scale(1); opacity: 1; transition: all 1.5s ease; } <style>   .c-v-menu-open { cursor:default; } @media (min-width: 1200px) { .c-v-submenu-2 { opacity: 0; max-height: 0; pointer-events: none; } .c-v-submenu-2-single { width: 300px; } .c-v-submenu-2-double { width: 600px; } .c-v-submenu-2-triple { width: 800px; } .c-v-menu-open:hover .c-v-submenu-2, .c-v-menu-open.hover .c-v-submenu-2 { opacity: 1; padding: 50px; max-height: 2000px; pointer-events: auto; } .c-v-menu-open:hover .c-v-submenu-2 *, .c-v-menu-open.hover .c-v-submenu-2 * { opacity: 1; } .c-v-submenu-2 * { opacity: 0; transition: all 0.4s; } .c-v-header-mobile-toggle { display:none; } }  @media (max-width: 1200px) { .c-v-submenu-2 { width: 100%; } .c-v-menu { display: none!important; width: 100%; position: absolute; top:100%; left: 0; overflow: hidden; } .c-v-menu-open .c-v-menu-dropdown { display:none!important; } .c-v-mobile-menu-active.c-v-menu { display: flex!important; flex-direction: column!important; align-items: flex-start!important; } }  .c-v-hamburger .c-v-line{ width: 30px; height: 3px; border-radius:2px; background-color: var(--text-body); display: block; margin: 7px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .c-v-hamburger:hover{ cursor: pointer; } #c-v-hamburger-1.c-v-is-active{ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #c-v-hamburger-1.c-v-is-active .c-v-line:nth-child(2){ width: 0px; } #c-v-hamburger-1.c-v-is-active .c-v-line:nth-child(1), #c-v-hamburger-1.c-v-is-active .c-v-line:nth-child(3){ -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } #c-v-hamburger-1.c-v-is-active .c-v-line:nth-child(1){ -webkit-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } #c-v-hamburger-1.c-v-is-active .c-v-line:nth-child(3){ -webkit-transform: translateY(-10px) rotate(90deg); -ms-transform: translateY(-10px) rotate(90deg); -o-transform: translateY(-10px) rotate(90deg); transform: translateY(-10px) rotate(90deg); } </style>