.portfolio {
    margin: auto;
    margin-top: 10em;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    color: white;
    position: relative;
}

.portfolio div .door {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;

    height: 100%;
    width: 100%;
    /* Use brand palette accents and lines for door */
    background-color: var(--c-background-light);
    color: var(--c-text);

    border-radius: 1em;

    transform-origin: bottom;
    transition: transform 0.5s ease-in-out;

    transform: skew(-5deg);
    z-index: 3;

    box-shadow: #000000 5px 5px 15px;

}
.portfolio div span svg{
    font-size: 5em;
    cursor: pointer;
    animation: shake 0.4s ease-in-out infinite;
}



@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px) rotate(-8deg); }
    50% { transform: translateX(2px) rotate(4deg); }
    75% { transform: translateX(-1px) rotate(-2deg); }
    100% { transform: translateX(0); }
}

.door i{
    color: var(--c-text);
    font-size: 5em;
    display: inline-block;
    animation: shake 0.4s ease-in-out infinite;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

.portfolio .door-open{
    transform: rotateX(90deg) skew(-2deg) !important;
}

.portfolio>header {
    width: fit-content;
    position: absolute;
    z-index: 0;
    top: -3.7em;
    left: 0;
    padding: 1em 3em;
    padding-bottom: 0;
    background-color: var(--c-background-light);
    color: var(--c-text);
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}

.portfolio>header h1 {
    font-size: 2.5em;
    padding: 0;
}

.portfolio>header i {
    font-size: 6em;
}

.portfolio article{
    position: relative;
}
.portfolio article::after{
    clip-path: polygon(0% 0%, 11% 12.5%, 0% 25%, 11% 37.5%, 0% 50%, 11% 62.5%, 0% 75%, 11% 87.5%, 0% 100%, 100% 100%, 84% 87.5%, 98% 75%, 86% 62.5%, 100% 50%, 86% 37.5%, 100% 25%, 93% 12.5%, 100% 0%);
    content: "";
    bottom: 0;
    right: -2em;

    height: 2em;
    width: 6em;
    transform: rotate(-45deg);

    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
}
.portfolio article::before{
    clip-path: polygon(0% 0%, 11% 12.5%, 0% 25%, 11% 37.5%, 0% 50%, 11% 62.5%, 0% 75%, 11% 87.5%, 0% 100%, 100% 100%, 84% 87.5%, 98% 75%, 86% 62.5%, 100% 50%, 86% 37.5%, 100% 25%, 93% 12.5%, 100% 0%);
    content: "";
    top: 0;
    left: -2em;

    height: 2em;
    width: 6em;
    transform: rotate(-45deg);

    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
}

.portfolio article header {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.portfolio div {
    width: 100%;
    padding: 3em;
    background-color: var(--c-background-light);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5em;

    border-radius: 1em;
    border-top-left-radius: 0;

    aspect-ratio: 16 / 9;
}

.portfolio div article {
    display: flex;
    border-radius: 0em;
    background-color: var(--c-boxes);
    width: 30%;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.portfolio div article header a img {
    width: 80%;
    margin: auto;
}




@media only screen and (max-width: 990px) {
  .portfolio div{
    flex-direction: column;
    align-items: center;
  }
  .portfolio div article{
    width: 100%;
  }
}