.main-container {
    position: relative;
    padding-right: 10%;
    padding-left: 10%;
    gap: 50px;
}

.custom-card-container {
    border: 2px solid #ccc;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 60%;
}

.main-container h2 {
    font-weight: bold;
}

.custom-nav {
    right: 48px;
    width: 20%;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px !important;
    border: 2px solid #ccc;
}

@media screen and (max-width: 600px) and (min-width: 100px) {
    .main-container {
        padding-right: 5%;
        padding-left: 5%;
        flex-direction: column;
    }
    .custom-card-container {
        border: 2px solid #ccc;
        box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        width: 100%;
    }

    .main-container h2 {
        font-weight: bold;
    }

    .custom-nav {
        right: 48px;
        width: 100%;
        box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
        border-radius: 5px !important;
        border: 2px solid #ccc;
    }
}