.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;
    top: -10%;
}

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

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

.sunburst-hero--default__container svg image {
    width: 76%;
    height: 86%;
    x: 19;
    y: 10;
}

/* Circle 1 */

#sunburst-hero--default__mask-1 circle {
    r: 15;
    animation: 2s ease-in-out 0.5s infinite alternate running default_mask-1;
    cx: 81%;
    cy: 18.5%;
}

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

#sunburst-hero--default__gradient-1 {
    width: 31%;
    height: 30%;
    x: 62%;
    y: 4%;
    opacity: 0.7;
}

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

/* Circle 2 */

#sunburst-hero--default__mask-2 circle {
    r: 6;
    animation: 2.4s ease-in-out 0s infinite alternate running default_mask-2;
    cx: 90%;
    cy: 25%;
}

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

#sunburst-hero--default__gradient-2 {
    width: 16%;
    height: 15%;
    x: 80%;
    y: 18%;
    opacity: 0.7;
}

@keyframes default_mask-2 {
    0% {
        r:6;
    }
    100% {
        r:6.png5;
    }
}

/* Circle 3 */

#sunburst-hero--default__mask-3 circle  {
    animation: 2.1s ease-in-out 0.3s infinite alternate running default_mask-3;
    cx: 20%;
    cy: 80%;
    r: 8;
}

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

#sunburst-hero--default__gradient-3 {
    width: 19%;
    height: 20%;
    x: 9%;
    y: 68%;
    opacity: 0.7;
}

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


/* ### 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: 44;
    cx: 55;
    cy: 51;
}

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

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

/* Circle 1 */

#sunburst-hero--secondary__mask-1 circle {
    r: 11.3;
    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.3;
    }
    100% {
        r: 12;
    }
}

/* Circle 2 */

#sunburst-hero--secondary__mask-2 circle {
    r: 5.3;
    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.0;
    }
    100% {
        r: 5.3;
    }
}

/* Circle 3 */

#sunburst-hero--secondary__mask-3 circle {
    r: 7;
    animation: 2.8s ease-in-out 0.5s infinite alternate running secondary__mask-3;
    cx: 6.png7%;
    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.png3;
    }
    100% {
        r: 7;
    }
}

/* Circle 3 */

#sunburst-hero--secondary__mask-4 circle {
    r: 12;
    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.3;
    }
    100% {
        r: 12;
    }
}

.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: 45;
    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.5;
    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.5;
    cy: 81%;
    cx: 83%;
}