.test-portfolio {
    display: grid;
    align-items: flex-start;
    grid-auto-rows: 1fr;
}

.dodo-portfolio-image {
    position: relative;
    object-fit: cover;
    inline-size: 100%;
    height: 100% !important;
    /* Only for editor, since it's overridin height... move this later :D */
}

.dodo-portfolio-image-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border: 1px solid #eadbb2;
    color: transparent;
    transition: color .05s;
}

.dodo-portfolio-image-overlay:hover {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    color: #eadbb2;
    border: 1px solid #b7b7b7;
}

.dodo-portfolio-image-overlay:hover h5{
    color: #b7b7b7;
}

.portfolio-modal {
    --bs-modal-bg: rgba(0, 0, 0, 0.8);
}

.portfolio-modal .modal-header {
    border-bottom: none;
}

.portfolio-carousel-image {
    object-fit: contain;
}

.portfolio-modal .carousel-control-prev-icon,
.portfolio-modal .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

.carousel-control-prev .d-flex,
.carousel-control-next .d-flex {

    padding: 4px;
}

.portfolio-modal .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 0 16 16' fill='%23eadbb2'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.portfolio-modal .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 16 16' fill='%23eadbb2'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.portfolio-modal .btn-close-container {
    position: absolute;
    top: var(--bs-modal-padding);
    right: var(--bs-modal-padding);
    width: 3rem;
    height: 3rem;
    z-index: 1099;
    padding: 4px;
}

.portfolio-modal .btn-close-container .btn-close {
    padding: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23eadbb2'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}