.enyo-circle-template {
    position: relative;
    width: 100%;
}

.enyo-circle-template .wbox-portraits {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ccm-page #main .enyo-circle-template .card {
    box-shadow: none;
    width: 100%;
    max-width: 300px;
    position: relative;
    z-index: 1;
    background-color: transparent;
    margin-bottom: 3rem;
}

.enyo-circle-template .card .wbox-portrait--img  {
    aspect-ratio: 1 / 1;
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
    background-color: transparent;
}

.enyo-circle-template .card .wbox-portrait--img img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Name Front */
.enyo-circle-template .wbox-portraits .card-name-front {
    position: relative;
    text-align: center;
    margin-top: 0.5rem;
    transition: all 0.4s ease-in-out;
    text-shadow: 0 0 8px #FFF;
}

.enyo-circle-template .wbox-portraits .card-name-front h4 {
    font-size: 1.75rem;
}
.enyo-circle-template .wbox-portraits .card-name-front .card-title-function {
    font-size: 1.25rem;
    line-height: 1.25em;
}
.enyo-circle-template .wbox-portraits .card-name-front .card-title-function p {
    line-height: 1.25em;
}

.enyo-circle-template .wbox-portraits .card-name-front .card-title {
    font-family: var(--bs-body-font-family);
    margin: 0.5rem 0 0.5rem 0;
    padding: 0;
    font-weight: 700;
}

/* Overlay */
.enyo-circle-template .wbox-portraits .card-overlay {
    position: absolute;
    background-color: var(--bs-primary);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.4s ease-in-out;
    width: 100%;
}

.enyo-circle-template .wbox-portraits .card-overlay .card-infos {
    padding: 1rem;
}

.enyo-circle-template .wbox-portraits .card-overlay * {
    color: var(--bs-light);
    font-size: 1.125rem;
    margin: 0;
}

.enyo-circle-template .wbox-portraits .card:hover .card-overlay {
    opacity: 0.9;
    pointer-events: initial;
}

@media (min-width: 768px) {
        
    .enyo-circle-template {
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .enyo-circle-template:after {
        content: "";
        position: absolute;
        width: 30%;
        height: 38%;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='268' height='337' viewBox='0 0 268 337' fill='none'><path opacity='0.02' d='M203.032 38.3116C178.372 28.2624 134.162 0.447754 134.162 0.447754C134.162 0.447754 90.0424 28.2624 65.2923 38.3116C42.4252 47.643 0.726562 55.3593 0.726562 55.3593C0.726562 160.158 12.2049 208.699 38.2105 251.139C66.9961 298.065 134.162 336.377 134.162 336.377C134.162 336.377 201.329 298.065 230.114 251.139C256.209 208.609 267.598 160.158 267.598 55.3593C267.598 55.3593 225.899 47.643 203.032 38.3116ZM197.114 130.279H134.162V141.764H195.5L191.285 171.732H134.162V182.948H189.761L185.367 214.172H134.162V308.383C112.192 294.117 75.7842 266.841 58.6563 238.757C38.4796 205.828 26.2838 167.605 24.849 74.9193C39.735 71.5995 60.0014 66.3955 74.3494 60.5633C85.6484 55.9874 101.341 47.8224 121.07 36.4274C126.002 33.5562 130.396 31.0439 134.252 28.7111V99.0553H201.598L197.204 130.279H197.114Z' fill='%231C2D4F'/></svg>") no-repeat center/cover;
        z-index: 1;
    }
    .enyo-circle-template .wbox-portraits .card {
        overflow: visible !important;
    }

    .enyo-circle-template .wbox-portraits .card-overlay .card-infos {
        padding: 2rem;
    }

    .enyo-circle-template .wbox-portraits .card-name-front {
        margin-inline: -80px;
    }

    .enyo-circle-template .wbox-portraits .card-name-front h4 {
        font-size: 1.25rem;
    }

    .enyo-circle-template .wbox-portraits .card-name-front .card-title-function {
        font-size: 1rem;
    }

    .enyo-circle-template:before {
        content: "";
        position: absolute;
        width: 95%;
        height: 95%;
        border-radius: 50%;
        border-width: 20px;
        border-style: solid;
        border-color: rgba(39, 100, 174, 0.5); 
    }

    .ccm-page #main .enyo-circle-template .card {
        width: 35%;
        position: absolute;
        margin-bottom: 0;
        max-width: unset;
    }

    .enyo-circle-template .card:first-child {
        top: -3%;
        left: 0;
    }

    .enyo-circle-template .card:nth-child(2) {
        top: -3%;
        right: 0;
    }

    .enyo-circle-template .card:nth-child(3) {
        top: 62%;
        right: 0;
    }

    .enyo-circle-template .card:nth-child(4) {
        top: 62%;
        left: 0;
    }

}

@media (min-width: 1200px) { 

    .enyo-circle-template .wbox-portraits .card-overlay * {
        font-size: 1.25rem;
    }
    .enyo-circle-template .wbox-portraits .card-name-front h4 {
        font-size: 1.75rem;
    }
    .enyo-circle-template .wbox-portraits .card-name-front .card-title-function {
        font-size: 1.25rem;
    }

}