@import '../../../../css/vars.scss';

.backgroundList {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
}

.selected {
    transition: all 0.3s;
    opacity: 1 !important;
    border: solid 10px $secondary !important;
}

.backgroundItem {
    border: solid 0px $secondary;
    opacity: 0.5;
    transition: all 0.3s;
    cursor: pointer;
    height: 120px;
    background-size: cover !important;
}

.disabled {
    cursor: default !important;
}

.backgroundItem:not(.disabled):hover {
    transition: all 0.3s;
    opacity: 1 !important;
}

.maarchLogo {
    width: 100%;
    height: 50%;
    padding-bottom: 10px;
}