/* filepath: /i:/Laravel Projects/YNews/public/css/custom.css */
.btn-primary {
    background-color: #000000; /* Change this to your desired color */
    border-color: #000000; /* Change this to your desired color */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #00000080; /* Change this to your desired hover/focus/active color */
    border-color: #00000080; /* Change this to your desired hover/focus/active color */
}

.fs-7 {
    /* 12px */
    font-size: 0.8rem;
}
.fs-8 {
    /* 10px */
    font-size: 0.6rem;
}

.three-container
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

@media (max-width: 945px) {
    .three-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
    }
}

@media (max-width: 480px) {
    .three-container {
        grid-template-columns: 1fr; /* 1 column for small screens */
    }
}

.six-container
{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px
}

@media (max-width: 1200px) {
    .six-container {
        grid-template-columns: repeat(6, 1fr); /* 2 columns for medium screens */
    }
}

@media (max-width: 1000px) {
    .six-container {
        grid-template-columns: repeat(4, 1fr); /* 2 columns for medium screens */
    }
}

@media (max-width: 750px) {
    .six-container {
        grid-template-columns: repeat(3, 1fr); /* 2 columns for medium screens */
    }
}

@media (max-width: 550px) {
    .six-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
    }
}

@media (max-width: 400px) {
    .six-container {
        grid-template-columns: 1fr; /* 1 column for small screens */
    }
}