@media only screen and (min-width: 768px) {
    .dropdown[data-visible="true"] {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    .dropdown[data-visible="false"] {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
}

#mobileNavControls {
    background-image: url('lib/menu.svg');
}

#mobileNavControls[aria-expanded="true"] {
    background-image: url('lib/close.svg');
}

#mobileNav[data-visible="true"] {
    transform: translateX(0%);
}

.accordianInfo[data-visible="true"] {
    opacity: 1;
}

.accordianInfo {
    opacity: 0;
    padding: 1rem 0;
    overflow: hidden;
    will-change: max-height;
    max-height: 0;
    transition: all 0.3s ease-out;
}