:root{
  --main-font: "Inter Variable";
}

*,
*::before,
*::after {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  min-inline-size: 375px;
  max-inline-size: 3440px;
  margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

picture {
  margin: 0;
  padding: 0;
}

button,
a {
  color: currentColor;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration-line: none;
}

.page {
  color: var(--main-text-color);
  font-family: var(--main-font, sans-serif);
  font-size: var(--font-size);
  background: linear-gradient(180deg, #3A18B5 0%, #3B47B7 50%, #8072FF 100%);
  line-height: var(--line-h);
  overflow-x: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
}

.page-course {
  background-color: unset;
}

.main {
  margin-block: auto;
  flex-grow: 1;
}

.wrapper {
  inline-size: clamp(21.438rem, 0.817rem + 87.98vw, 80rem);
  margin-inline: auto;
  position: relative;
}

.button-request {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(249, 255, 74, 0.1);
  border: 1px solid var(--accent-color);
  border-radius: 8px;
  color: var(--accent-color);
  cursor: pointer;
  box-shadow: inset 0px 0px 24px 0px rgba(249, 255, 74, 0.8);
  transition: background-color 0.5s ease-in-out;
  text-transform: uppercase;
}

.button-request:hover {
  background-color: rgba(249, 255, 74, 0.3);
}

.button-request:focus {
  outline: none;
}

.button-request:focus-visible {
  border: 1px solid #fff;
}

.button-request__text {
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media screen and (max-width: 1266px) {
  .wrapper-cards {
    inline-size: calc(clamp(21.438rem, 0.817rem + 87.98vw, 80rem) + clamp(1rem, -0.394rem + 5.95vw, 4.313rem));
    margin-inline: 0;
  }
}