/* Home Cards */
/**************/
#sections {
    width:           100%;
    display:         flex;
    align-items:     stretch;
    justify-content: flex-start;
    flex-wrap:       wrap;
    margin:          0;
    padding:         0;
    list-style:      none;
}

#sections .card {
    margin:         10px 5px;
    padding:        0;
    vertical-align: top;
    min-width:      176px;
}

#sections .card button {
    width: 128px;
}

@media (min-width: 992px) {
    #sections .card {
        flex: 1 0 calc(20% - 10px);
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    #sections .card {
        width: calc(50% - 10px);
    }
}

@media (max-width: 575px) {
    #sections .card {
        width: 100%;
    }
}
/**************/
/* Home Cards */

/* Tutorials */
/*************/
#tutorials {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
}
#tutorials > * > * {
    width: 100%;
}
@media (min-width: 1200px) {
    #tutorials > * {
        width: calc(20% - 10px);
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #tutorials > * {
        width: calc(33.33% - 10px);
    }
}
@media (min-width: 576px) and (max-width: 991px) {
    #tutorials > * {
        width: calc(50% - 10px);
    }
    #tutorials > * > * {
        text-align: left;
    }
}
@media (max-width: 575px) {
    #tutorials > *,
    #tutorials > * > * {
        width: 100%;
        text-align: left;
    }
}

/* Disabled state with overlay loader */
.video-btn.disabled {
    position: relative;
    pointer-events: none; /* prevent clicks */
}
.video-btn.disabled::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35px;
    height: 35px;
    background: url("/monitoring-content/lib/images/noaa-loader.gif") no-repeat center/contain;
    transform: translate(-50%, -50%);
}
/*************/
/* Tutorials */

/* Background */
/**************/
#background {
    display: flex;
}
/*
#background .background:not(.selected){
    display: none;
}
*/
@media (min-width: 992px) {
    #background {
        gap: 1em;
    }

    #background > * {
        flex: 0 1 calc(50% - 1em);
    }
}

@media (max-width: 991px) {
    #background {
        flex-direction: column;
    }

    #background > *.selected {
        order: -1;
    }
}
/**************/
/* Background */