.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    inline-size: 1px;
    block-size: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
}

.hero.morse{
    position:relative;
    overflow:hidden;
    inline-size:100%;
    min-block-size:30rem;
    container: heroMorse / inline-size;
    contain-intrinsic-size: 533px;
}
.hero.morse .hero__container{
    
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:end;
    gap: 2rem;
}
/* typography */
.hero.morse .hero__container--text-right .hero__content-wrapper{
    padding-inline-end: 1.5rem;
}

.hero.morse .hero__content-wrapper {
    display: flex;
    justify-content: flex-end;
    /*flex: 1 0 500px;*/
    flex:500 0 500px;
    transition:flex-grow .2s ease-out;
    position:relative;
    z-index:1;
    
    @container heroMorse (min-inline-size:1707px){
        flex-grow:1000;
    }
    @container heroMorse (min-inline-size:2700px){
        flex-grow:1600;
    }
    
    padding-block:71px 78px;

    .hero__content {
        inline-size:500px;
        max-inline-size:100%;
        color:var(--c-moon);
        h1{
            color: var(--c-moon);
            /* Headline/H1 Desktop */
            font-family: var(--f-secondary);
            font-size: 4rem;
            font-style: normal;
            font-weight: 500;
            line-height: 5.125rem; /* 128.125% */
        }
    }
}

/* this is the wrapper at the same level as hero__content */
.hero__morse-wrapper{
    overflow: hidden;
    position: relative;
   
    flex:3400 1;
    justify-content: start;
    display: flex;
    contain: content;
    content-visibility: auto;
    contain-intrinsic-size: 533px;
    align-self:stretch;
    align-items:start;
}

@container heroMorse (max-inline-size:670px){
    .hero.morse .hero__container {
        display:block;
    }
    .hero__morse-wrapper{
        display:none;
    }
    .hero.morse .hero__content-wrapper{
        display:block;
        padding-inline:2rem;
    }
    

}


/*
.hero.morse .hero__container .hero__content,
.hero.morse .hero__container .hero__morse-wrapper{
inline-size:50%;
}
*/
.morse-code-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap:22px;
    /*inline-size:50%;*/
    inline-size: fit-content;
    display: flex;
    justify-content: end;
    margin-block-start: -9px;
    transition:opacity .2s ease-in;
}
.hero.morse .hero__container--text-right .hero__morse-wrapper{
    justify-content: end;
}

.single-morse {
    white-space:nowrap;
    line-height:0;
    --paddingMultiplier: 3.2rem;
}

.single-morse:nth-child(3n+1){
    margin-inline-start:var(--paddingMultiplier);
}

.single-morse:nth-child(3n+2){
    margin-inline-start:calc(var(--paddingMultiplier) * 2);
}

.single-morse:nth-child(3n+3){
    margin-inline-start:calc(var(--paddingMultiplier) * 3);
}


.single-morse span{
    block-size: 21.425px;
    border-radius:1.5rem;
    display:inline-flex;
    margin:0 2px;
}

.dash{
    inline-size:46.415px;
    
}

.dot{
    /*inline-size:1.5rem;
    block-size:1.5rem;*/
    inline-size: 21.425px;
    
    
}


.single-morse span.space{
    inline-size:1rem;
}
.single-morse span:not(.dash,.dot){
    inline-size:42.41px;
}

.hero__overlay{
    inline-size:100%;
    block-size:10rem;
    position:absolute;
    inset-block-end:0;
    background:linear-gradient(180deg, rgba(28, 39, 50, 0.00) -1.35%, #1C2732 72.28%);
    pointer-events:none;
}

.hero .btn{
 text-decoration:none;
 display:inline-block;
}

.hero.morse {
    
}
.single-morse > *{
    animation: 1s 1 alternate wave ease-in;
}
@keyframes wave {
        25%{}
        50% {
            filter:brightness(1.2);
        }
        75% {}
}

@media(prefers-reduced-motion: no-preference){

    @keyframes wave {
        25%{transform:scale(1)}
        50% {
            transform:scale(1.16);
            filter:brightness(1.2);
        }
        75% {transform:scale(1)}
    }
}


/* backgrounds specific to this module */
.bg-morse-light-default {
    background-color: #3E667C;
}
.bg-morse-dark-default {
    background-color: #2F4A5B;
}
.bg-homepage-hero-gradient{
    background: rgb(28, 39, 50); {# revisit this the bottom of this is lighter than the mock #}
}