.search-bar {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: -1em;
  padding: 1em 0;
  text-align: initial;
  max-width: 32em;
}
.search-bar > * {
  flex-grow: 1;
  margin-top: 1em;
  margin-right: 1em;
}

.search-bar__dropdown {
  align-self: flex-end;
  position: relative;
}

.search-bar .on-off {
  align-self: center;
  background-image: linear-gradient(-45deg, rgba(68, 68, 68, .5) 0%,rgba(92, 92, 92, .5) 48%, rgba(127, 127, 127, .5) 52%, rgba(68, 68, 68, .5) 100%);
  border: 1px solid #222;
  border-radius: .6em;
  box-shadow: 0 .15em 0 #222;
  cursor: pointer;
  flex-grow: 0;
  flex-basis: 12%;
  overflow: hidden;
  padding: .3em .6em;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(0) scale(1);
  min-width: unset;
}
.search-bar .on-off.is-on {
  background-color: var(--background-lighter);
  background-image: unset;
  box-shadow: 0 0 1.8em var(--foreground);
  color: var(--foreground);
  transform: translateY(.15em) scale(.98);
}

.search-bar__keyword {
  border: 1px solid var(--background-light);
  display: flex;
  flex-basis: 100%;
  justify-content: space-between;
  height: 2em;
}
.search-bar__keyword > input {
  background-color: transparent;
  border: none;
  box-shadow: none;
  caret-color: var(--background-light);
  color: var(--background-light);
  flex-basis: 92%;
  font-family: inherit;
  font-size: 1rem;
  margin: 0;
  outline: none;
  overflow: hidden;
  padding: 0 .5em;
  height: 100%;
}
.search-bar__keyword svg {
  width: 100%;
  height: 100%;
}

.jazz-courses {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.jazz-courses__course {
  flex: 1;
  margin: 2.7em 3em;
  position: relative;
  min-width: 17em;
  max-width: 22em;
}
.jazz-courses__course:hover .rotated-frame::before {
  transform: rotate(-5deg) translate(.2em, -.6em);
}
.jazz-courses__course:hover .rotated-frame::after {
  transform: rotate(4deg) translate(0, -.6em);
}

.course__media {
  cursor: pointer;
  position: relative;
}
.course__media > h3 {
  color: var(--background-light);
  font-size: 1.4rem;
  line-height: 1.1;
  margin: 0;
  margin-left: 2em;
  position: absolute;
  right: .75em;
  bottom: .5em;
  text-align: right;
  text-shadow: .06em .1em var(--main);
  text-transform: uppercase;
  z-index: 1;
}
.course__media > h3 span {
  display: block;
  font-size: .95rem;
}
.course__media > figure {
  filter: saturate(50%) brightness(50%);
  transition: filter 200ms linear;
  width: 100%;
  height: auto;
}
.course__media:hover > figure {
  filter: saturate(100%) brightness(100%);
}

.course__short {
  background-color: rgba(32, 32, 32, .75);
  color: var(--background-light);
  font-size: .9rem;
  line-height: 1.2;
  margin: 0;
  padding: 1.5em;
  opacity: 0;
  position: absolute;
  inset: 0;
  text-shadow: .06em .1em var(--main);
  transform: translateX(-1em);
  transition: all 500ms ease;
  visibility: hidden;
}
.course__short.active {
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms ease;
  visibility: visible;
}

.course__topic {
  align-items: center;
  background-color: var(--main);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  position: absolute;
  top: -22%;
  left: calc(50% - 9.5%);
  width: 19%;
  height: calc(19% * 1.72);
  z-index: 10;
}
.course__topic::before {
  border: 1px solid;
  border-color: var(--background-light);
  border-radius: 50%;
  content: "";
  position: absolute;
  top: 6%;
  left: 6%;
  width: 88%;
  height: 88%;
}
.jazz-courses__course:hover .course__topic::before {
  border-color: var(--foreground);
}
.course__topic svg {
  width: calc(60% / 1.08);
  height: 60%;
}
.course__topic :is(.cls-1, .cls-2) {
  fill: #E6C189;
}
.course__topic :is(.cls-2) {
  font-family: "Franklin Paragraph", sans-serif;
  font-size: 14px;
}
.course__topic :is(.cls-3, .cls-4) {
  fill: #E6C189;
}
.course__topic :is(.cls-3) {
  font-family: "Franklin Paragraph", sans-serif;
  font-size: 13px;
}
.jazz-courses__course:hover .course__topic text {
  text-align: center;
}
.jazz-courses__course:hover .course__topic :is(path, text) {
  fill: var(--foreground);
}

.course__buttons {
  color: var(--background-light);
  display: flex;
  justify-content: space-around;
  line-height: .8;
  margin: 1.5em -2em 0;
  overflow: auto;
}
.course__buttons > * {
  padding: .3em;
  text-align: center;
}
.course__buttons:has(.course-style.new) {
  overflow: visible;
}
.course__buttons a {
  color: inherit;
  margin-top: .5em;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.course__buttons small,
.course__buttons small a {
  display: block;
  font-size: .7rem;
  padding-left: .6em;
}

.course-style {
  align-self: center;
  cursor: default;
}
.course-style.new {
  filter: drop-shadow(0 0 1.3em var(--foreground));
  transform: translate(.5em, -1em) rotate(-15deg);
}
.course-style.new small {
  align-items: center;
  color: var(--heading);
  background-image: radial-gradient(var(--background-light), var(--foreground));
  text-shadow: .12em .12em 0 var(--background-light);
  clip-path: url(#star-badge);
  display: flex;
  font-size: 1.5rem;
  font-weight: bold;
  justify-content: center;
  padding: 0;
  text-transform: uppercase;
  width: 3em;
  height: 3em;
}
.attend-course {
  text-align: right;
}
.attend-course a {
  font-size: .8rem;
  margin-top: .2em;
  padding: .75em 1.4em 1em;
}
.attend-course:hover a,
.attend-course a:focus-visible {
  color: var(--foreground);
  outline: none;
}
.attend-course svg {
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  stroke-width: 4px;
  width: 100%;
  height: 100%;
}
.attend-course.active path {
  animation: draw-path 750ms ease;
  animation-fill-mode: forwards;
}
.attend-course:hover path,
.attend-course button:focus-visible path {
  stroke: var(--foreground);
}
.get-all {
  text-align: left;
}
.get-all a {
  background-color: var(--background-light);
  clip-path: polygon(5% 0, 93% 0, 100% 100%, 0 100%);
  color: var(--main);
  font-size: .8rem;
  padding-block: .5em;
  padding-right: 1.1em;
  padding-left: 1em;
}
.get-all:hover a,
.get-all a:focus-visible {
  background-color: var(--foreground);
}
.course-buttons__progress small {
  padding-left: 0;
  text-align: left;
}
.course-buttons__progress progress {
  align-self: center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  width: 5em;
  height: .25em;
}
.course-buttons__progress progress::-webkit-progress-bar {
  background-color: #27192EAA;
}
.course-buttons__progress progress::-webkit-progress-value {
  background-color: var(--foreground);
}
.course-buttons__progress progress::-moz-progress-bar {
  background-color: var(--foreground);
}
.this-level img {
  width: 2.5em;
  height: auto;
}