@layer blocks {
    .degreelink {
        display: flex;
        flex-direction: column;

        /* align-items: center; */
        justify-content: center;
    }

    .degreelink > div:first-child {
        width: 100%;
        max-width: 100%;
    }

    .degreelink-container {
        background-color: var(--color-gray-2);
        padding-top: 2rem;
        padding-bottom: 2rem;
        margin: 0;
    }

    .degreelink-block {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .dropdown-list {
        display: flex;
        height: auto;
        width: 100%;
        border: 1px solid #ccc;
        border-top: none;
        background: white;
        list-style: none;
        padding: 0;
        margin-bottom: 10px;
        max-height: 150px;
        overflow-y: auto;
    }

    .degreelink-block div:first-child {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .input-container {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .degreelink-heading {
        font-family: var(--heading-font-family);
        font-size: 1.875rem;
    }

    .degreelink-subheading {
        color: #595959;
        font-size: 1.125rem;
        line-height: 1.625rem;
        margin-bottom: 1rem;
        word-wrap: break-word;
    }

    .programname {
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        width: 100%;
        height: 100%;
        padding: 20px;
        cursor: pointer;
        background-color: var(--color-red-1);
        text-decoration: none;
    }

    .select-container {
        flex: 1;
        width: 100%;
    }

    .dropdown-select {
        width: 100%;
        padding: 10px;
    }

    .select-container select {
        appearance: none;
        background-color: white;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(171,14,38)'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 30px;
    }

    .select-container select::-ms-expand {
        display: none;
    }

    .dropdown-container {
        position: relative;
        width: 100%;
    }

    .dropdown-input {
        width: 100%;
        padding: 16px;
        border: 1px solid #0d0d0d;
    }

    .dropdown-item {
        padding: 8px;
        cursor: pointer;
    }

    .dropdown-item-hover {
        background: #f0f0f0;
    }

    .cardwrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 20px;
        place-items: center center;
        font-size: 16px;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        margin-top: 20px;
    }

    @media screen and (width <= 1024px) {
        .programname {
            /* width: 200px; */
            height: 180px;
        }
    }

    @media screen and (width <= 768px) {
        .cardwrapper {
            max-width: 100%;
            display: grid;
            grid-template-columns: 1fr;
        }

        .input-container {
            display: flex;
            flex-direction: column;
        }

        .programname {
            height: auto;
            padding: 20px;
        }
    }

    @media screen and (width <= 480px) {
        .cardwrapper {
            display: flex;
            flex-direction: column;
        }

        .programname {
            width: 100%;
            height: auto;
        }
    }
}