.sunburst-hero--default, .sunburst-hero--secondary {
	padding-top: 1.5rem;
}


.sunburst-hero--default__container, .sunburst-hero--secondary__container {
    display: flex;
    flex-direction: column-reverse;
}

@media screen and (min-width: 768px) {
    .sunburst-hero--default__container, .sunburst-hero--secondary__container {
        display: grid;
        grid-template-columns: 2fr 3fr;
        align-items: center;
    }
}

.sunburst-hero--default__image-container img {
    border-radius: 100rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.sunburst-hero--default__image-container {
    position: relative;
}

.sunburst-hero--default__image-container svg {
    width: 100%;
    height: 100%;
    position: relative;
}

:is(.sunburst-hero--default__container, .sunburst-hero--secondary__container) .h-main h1 {
	display: block;
}

/* ### DEFAULT HERO ### */

.sunburst-hero--default__container svg image {
    width: 121.6px;
    height: 120.4px;
    /* x: 19px;
    y: 10px; */
}

/* Circle 1 */

#sunburst-hero--default__mask-1 circle {
    r: 15px;
    animation: 2s ease-in-out 0.5s infinite alternate running default_mask-1;
    /* cx: 129.6px;
    cy: 25.9px; */
}

.no-animations #sunburst-hero--default__mask-1 circle {
    animation: unset;
}

#sunburst-hero--default__gradient-1 {
    width: 49.6px;
    height: 42px;
    /* x: 99.2px;
    y: 5.6px; */
    opacity: 0.7;
}

@keyframes default_mask-1 {
    0% {
        r: 15px;
    }
    100% {
        r: 16px;
    }
}

/* Circle 2 */

#sunburst-hero--default__mask-2 circle {
    r: 6px;
    animation: 2.4s ease-in-out 0s infinite alternate running default_mask-2;
    /* cx: 144px;
    cy: 35px; */
}

.no-animations #sunburst-hero--default__mask-2 circle {
    animation: unset;
}

#sunburst-hero--default__gradient-2 {
    width: 25.6px;
    height: 21px;
    /* x: 128px;
    y: 25.2px; */
    opacity: 0.7;
}

@keyframes default_mask-2 {
    0% {
        r:6px;
    }
    100% {
        r:6.5px;
    }
}

/* Circle 3 */

#sunburst-hero--default__mask-3 circle  {
    animation: 2.1s ease-in-out 0.3s infinite alternate running default_mask-3;
    /* cx: 32px;
    cy: 112px; */
    r: 8px;
}

.no-animations #sunburst-hero--default__mask-3 circle {
    animation: unset;
}

#sunburst-hero--default__gradient-3 {
    width: 30.4px;
    height: 28px;
    /* x: 14.4px;
    y: 95.2px; */
    opacity: 0.7;
}

@keyframes default_mask-3 {
    0% {
        r: 8px;
    }
    100% {
        r: 9px;
    }
}


/* ### SECONDARY HERO */

.sunburst-hero--secondary svg .big_image {
    height: 64%;
    width: 57%;
    /* x: 5.9%;
    y: 5%; */
}

.sunburst-hero--secondary svg #big_image_mask circle {
    r: 44px;
    /* cx: 55px;
    cy: 51px; */
}

.sunburst-hero--secondary svg .small_image  {
    height: 54%;
    width: 47%;
    /* x: 83px;
    y: 52px; */
}

.sunburst-hero--secondary svg #small_image_mask circle {
    r: 36px;
    /* cx: 120px;
    cy: 91px; */
}

/* Circle 1 */

#sunburst-hero--secondary__mask-1 circle {
    r: 11.3px;
    animation: 2s ease-in-out 0.5s infinite alternate running secondary__mask-1;
    /* cx: 56.5%;
    cy: 11%; */
}

#sunburst-hero--secondary__gradient-1 {
    width: 20%;
    height: 20%;
    /* x: 48.5%;
    y: 2%; */
    opacity: 0.7;
}

@keyframes secondary__mask-1 {
    0% {
        r: 11.3px;
    }
    100% {
        r: 12px;
    }
}

/* Circle 2 */

#sunburst-hero--secondary__mask-2 circle {
    r: 5.3px;
    animation: 2.3s ease-in-out 0.2s infinite alternate running secondary__mask-2;
    /* cx: 63.8%;
    cy: 15.7%; */
}

#sunburst-hero--secondary__gradient-2 {
    width: 15%;
    height: 15%;
    /* x: 60.5%;
    y: 10%; */
    opacity: 0.7;
}

@keyframes secondary__mask-2 {
    0% {
        r: 5.0px;
    }
    100% {
        r: 5.3px;
    }
}

/* Circle 3 */

#sunburst-hero--secondary__mask-3 circle {
    r: 7px;
    animation: 2.8s ease-in-out 0.5s infinite alternate running secondary__mask-3;
    /* cx: 6.7%;
    cy: 37%; */
}

#sunburst-hero--secondary__gradient-3 {
    width: 15%;
    height: 15%;
    /* x: 1%;
    y: 28%; */
    opacity: 0.7;
}

@keyframes secondary__mask-3 {
    0% {
        r: 6.3px;
    }
    100% {
        r: 7px;
    }
}

/* Circle 3 */

#sunburst-hero--secondary__mask-4 circle {
    r: 12px;
    animation: 2.5s ease-in-out 0.2s infinite alternate running secondary__mask-4;
    /* cx: 53%;
    cy: 83%; */
}

#sunburst-hero--secondary__gradient-4 {
    width: 20%;
    height: 18%;
    /* x: 42%;
    y: 74%; */
    opacity: 0.7;
}

@keyframes secondary__mask-4 {
    0% {
        r: 11.3px;
    }
    100% {
        r: 12px;
    }
}

.panel__wrapper .panel:nth-child(2n-2) .sunburst-hero--link-card__gradient-1 {
    opacity: 0;
}

.panel__wrapper .panel:nth-child(2n-1) .sunburst-hero--link-card__gradient-2 {
    opacity: 0;
}

.link-card__image--sunburst {
    /* width: 90%;
    height: 90%;
    x: 5%;
    y: 5%; */
}

#link-card__image--sunburst__image-mask circle {
    /* r: 45px;
    cy: 50%;
    cx: 50%; */
} 

.sunburst-hero--link-card__gradient-1 {
    /* width: 20%;
    height: 20%;
    x: 2%;
    y: 6%; */
    opacity: 0.8;
}

#link-card__image--sunburst__mask-1 circle {
    /* r: 8.5px;
    cy: 17%;
    cx: 11%; */
} 

.sunburst-hero--link-card__gradient-2 {
    /* width: 20%;
    height: 20%;
    x: 72%;
    y: 70%; */
    opacity: 0.8;
}

#link-card__image--sunburst__mask-2 circle {
    /* r: 8.5px;
    cy: 81%;
    cx: 83%; */
}