.portfolio_container {
    display: flex;
    max-width: 1211.19px;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    gap: var(--spacing-sm);
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-section-secondary-light);
    border-color: var(--border-section-secondary-light);
    padding: var(--padding-xl);

}


.--p_home {
    /* padding-top: var(--padding-lg);   
    background-color: var(--bg-section-primary-light); */
    border: 0.62px solid var(--border-action-primary-gray);
    background-color: var(--bg-section-secondary-light);
    padding-top:  var(--padding-base);

}

.portfolio_container h2 {
    display: flex;
    width: 100%;
    padding: 0 var(--padding-base);

}


.portfolioCards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    height: fit-content;
    width: 100%;
    height: auto;
    align-items: start;
    gap: var(--spacing-base);

}

.portfolioCards a {
    text-decoration: none;
    display: flex;
    width: auto;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    text-align: left;
    background-color: transparent;

    color: var(--text-anchor-dark);
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-cards-primary-x-light);

    overflow: hidden;


    box-shadow: 0 1px 4px 0px rgba(5, 8, 34, 0.2);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

    border: 3px solid transparent;
      outline: 6px solid transparent;
}

.portfolioCards a:hover {
      border-color: var(--border-blue-active);
  outline: 6px solid var(--border-component-quaternary-light);
      border-color: var(--border-blue-active);
    box-shadow: 0 4px 12px 0px rgba(5, 8, 34, 0.4);

}

.portfolioCards a:focus{
  border-color: var(--border-blue-active);
  outline: 6px solid var(--border-component-quaternary-light);
      box-shadow: 0 0 0 .2rem rgba(64, 77, 102, .25);
}



.portfolioCards .heading {
    display: flex;
    width: 100%;
    height: fit-content;
    align-items: center;
    justify-content: space-between;

}

.portfolioCards .heading>h2 {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--text-title-dark);
    align-items: center;
    gap: var(--spacing-xs);
    border-bottom: 3px solid transparent;
    font-weight: var(--font-weight-bold);

}

.portfolioCards .heading>h3 {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--text-title-dark);
    align-items: center;
    gap: var(--spacing-xs);
    border-bottom: 3px solid transparent;
    font-weight: var(--font-weight-bold);
}

.portfolioCards .heading>h4 {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--text-title-dark);
    align-items: center;
    gap: var(--spacing-xs);
    border-bottom: 3px solid transparent;
    font-weight: var(--font-weight-bold);
}


.portfolioCards .material-icons {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--icon-dark);
    padding: var(--padding-sm) 0;
    /* background-color: var(--bg-component-secondary-dark); */
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-h6);
    line-height: 1.1;
    font-weight: var(--font-weight-bold);
}


.portfolioCards .description {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    text-align: left;
    background-color: var(--bg-cards-primary-x-light);
    border: 1px solid var(--border-card-primary-x-light);
    padding: var(--padding-xl);

}

.portfolioCards .description p {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
}









.portfolioCards img {
    width: 100%;
    object-fit: cover;
    padding: var(--padding-lg);
    background-color: var(--bg-cards-primary-x-light);
    border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0;
}

.portfolio_contact img {
    width: 100%;
    object-fit: cover;
    align-items: flex-start;


}

.body_portfolio .ContactMe {

    padding: var(--padding-base);

}

@media only screen and (max-width: 1022px) {



    .portfolioCards {
        grid-template-columns: none;
        grid-template-rows: 1fr;
        height: fit-content;


    }




    .portfolioCards a {
        width: 100%;
        height: fit-content;
        flex-direction: row;
        border: none;
    }

    .portfolioCards img {
        width: 38%;
        height: 100%;
        object-fit: cover;


    }

    .portfolio_contact img {
        width: 100%;
        object-fit: cover;
        align-items: flex-start;


    }
}

@media only screen and (max-width: 768px) {

    .--main_portfolio {
        width: 100%;
        margin-top: 86.67px;
        padding-inline: var(--padding-xl);
        background-color: var(--bg-main-secondary-light);

    }


    .portfolioCards {

        grid-template-rows: none;
        height: fit-content;
        margin-bottom: 0;
        grid-template-columns: 1fr;




    }


    .portfolioCards a {
        width: auto;
        height: 100%;
        flex-direction: column;
        background-color: transparent;

        border: 0.62px solid var(--border-action-primary-gray);

    }

    .portfolio_container {
        border: none;
        padding: 0;
        background: transparent;


    }


    .portfolioCards img {
        width: 100%;
        height: fit-content;
        object-fit: cover;
        padding: var(--padding-lg);
    }

    .body_portfolio .contactMe_section {
        display: none;

    }
}



@media only screen and (max-width: 380px) {

    .portfolioCards {

        padding: 0;

    }
}