@media only screen and (min-width: 0rem) {
    #search-bar {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: clamp(32px, calc(128px - 9vw), 64px) 0px 96px 0px;
    }

    #search-bar .container {
        width: 100%;
        max-width: 768px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 0px 24px;
    }

    #search-bar input {
        font-size: clamp(1rem, 4vw, 1.5rem);
        width: 100%;
        padding: 4px 16px;
        text-align: left;
        border-radius: 8px;
        border: 2px solid var(--green-color-shade-5);
        outline: none;
        position: relative;
        z-index: 2;
        box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.3);
    }

    #search-bar input:focus {
        outline: none;
        border: 2px solid var(--green-color-tint-1);
        box-shadow: none;
    }

    ::placeholder {
        text-align: center;
    }

    #search-bar #searchResults {
        z-index: 1;
        position: relative;
        margin-top: -5px;
        font-size: clamp(1rem, 4vw, 1.5rem);
        list-style: none;
        border-radius: 0px 0px 12px 12px;
    }

    #search-bar #searchResults li {
        background-color: var(--green-color-tint-9);
        padding: clamp(16px, calc(48px - 4vw), 24px);
        border-width: 2px;
        font-size: clamp(0.9rem, 0.8em, 1.5rem);
        color: var(--black-text-color);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    #search-bar #searchResults li:hover {
        background-color: var(--green-color-tint-5);
    }

    #search-bar #searchResults li:first-child {
        padding-top: clamp(16px, calc(48px - 4vw + 5px), 24px);
    }

    #search-bar #searchResults li:last-child {
        border-bottom: none;
        border-radius: 0px 0px 12px 12px;
    }

    #questions {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 64px 0px 128px 0px;
    }

    #questions .container {
        width: 100%;
        max-width: 1280px;
        padding: 0px 24px;
        display: flex;
        justify-content: center;
    }

    #questions .questions-wrapper {
        display: grid;
        gap: 64px;
        row-gap: 128px;
        grid-template-columns: repeat(1, 1fr);
    }

    #questions .card {
        display: flex;
        flex-direction: column;
        width: 90%;
        height: 100%;
        justify-self: center;
        align-self: center;
        padding: 24px 24px;
        background-color: white;
        border-radius: 24px;
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        transition: all 0.15s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    }

    #questions .card:hover {
        transform: translateY(-4px);
    }

    #questions .title-and-icon-wrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    #questions .title {
        width: 80%;
        text-align: left;
        font-weight: 500;
        font-size: clamp(1rem, 4vw, 1.25rem);
        margin-bottom: 24px;
    }

    #questions .img-wrapper {
        display: flex;
        width: 20%;
        padding-top: 16px;
        justify-content: flex-end;
        align-items: flex-start;
        margin-top: -12px;
    }

    #questions img {
        width: 24px;
        height: 24px;
    }

    #questions .answer {
        width: 100%;
        text-align: left;
        font-size: clamp(0.9rem, 4vw, 1rem);
        opacity: 0.8;
    }
}