.card-squares__container {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
    top: 102px;
    z-index: 2;
}

.card-squares__square {
    width: 9px;
    height: 9px;
    background-color: var(--color-primary-600);
    opacity: 0.5;
    transition: opacity 0.25s;
}

.card-squares__square--current,
.card-squares__square:disabled {
    cursor: default;
    opacity: 1;
}

button.card-squares__square {
    cursor: pointer;
    display: none;
}

@media screen and (min-width: 768px) {
    .card-squares__container {
        top: 115px;
    }

    .card-squares__square {
        width: 11px;
        height: 11px;
    }
}

@media screen and (min-width: 912px) and (orientation: landscape) {
    .card-squares__container {
        top: 169px;
        justify-content: flex-end;
        width: auto;
        right: 81px;
        gap: 8px;
    }

    button.card-squares__square {
        display: block;
    }

    div.card-squares__square {
        display: none;
    }
}

@media screen and (min-width: 1200px) and (orientation: landscape) {
    .card-squares__container {
        top: 211px;
        right: 83px;
    }
}