Flip Card 2D/style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
    list-style: none;
}

:root {
--mycolor-primary: #202040;
--mycolor-secondary: #00A8CC;
--mycolor-white: #FFFFFF;
--mycolor-black: #000000;
--mycolor-grey0: #f8f8f8;
--mycolor-grey1: #dbe1e8;
--mycolor-grey2: #b2becd;
--mycolor-grey2-progtxt: #b2becd;
--mycolor-grey3: #6c7983;
--mycolor-grey4: #454e56;
--mycolor-grey5: #1F4287;
--mycolor-grey6: #12181b;
--mybr-sm-2: 14px;
--mybox-shadow-1: 0 3px 15px rgba(0, 0, 0, 0.3);
}

body {
    background-color: var(--mycolor-primary);
    font-family: "Poppins", sans-serif;
    font-size: 1.1rem;
    color: var(--mycolor-white);
    transition: all 0.4s ease-in-out;
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
}

a {
display: inline-block;
text-decoration: none;
color: inherit;
font-family: inherit;
}

.portfolios {
    margin-left: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
    margin-top: 3rem;
}
.portfolios .portfolio-item {
position: relative;
}
.portfolios .portfolio-item img {
width: 100%;
height: 195px;
-o-object-fit: cover;
    object-fit: cover;
}
.portfolios .portfolio-item .hover-item {
width: 100%;
height: 100%;
background-color: var(--mycolor-secondary);
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
opacity: 0;
transform: rotateY(180deg);
transform-style: preserve-3d;
transition: all 0.5s ease-in-out;
}
.portfolios .portfolio-item .hover-item h3 {
font-size: 1.5rem;
color: var(--mycolor-white);
margin-bottom: 1.5rem;
}
.portfolios .portfolio-item .hover-item .icons {
display: flex;
justify-content: center;
align-items: center;
}
.portfolios .portfolio-item .hover-item .icons .icon {
background-color: var(--mycolor-primary);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 1rem;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.portfolios .portfolio-item .hover-item .icons .icon i {
font-size: 1.5rem;
color: var(--mycolor-white);
margin: 0 1rem;
}
.portfolios .portfolio-item .hover-item .icons .icon:hover {
background-color: var(--mycolor-white);
}
.portfolios .portfolio-item .hover-item .icons .icon:hover i {
color: var(--mycolor-primary);
}

.portfolio-item:hover .hover-item {
opacity: 1;
transform: scale(1);
}
