/* ru en */

.header__title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.language__switch {
  cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
  position: relative;
  height: 36px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.language__switch-desktop {
  display: none;
}

.language__switch-ru, .language__switch-eng {
  position: absolute;
  font-size: 12px;
  font-style: normal;
  transition: all 150ms;
}

.language__switch-circle {
  transition: transform 500ms;
}

.language__switch.russian svg rect:nth-of-type(2) {
  transform: translateX(-36px);
}

.language__switch.russian .language__switch-ru {
  color: #EEEAD9;
  font-weight: 500;
}

.language__switch.russian .language__switch-eng {
  color: #BDAB90;
  font-weight: 400;
}

.language__switch-ru {
  top: 11px;
  left: 8px;
  color: #BDAB90;
  font-weight: 400;
}

.language__switch-eng {
  top: 11px;
  right: 7px;
  color: #EEEAD9;
  font-weight: 500;
}

@media (min-width: 770px) { 

  .header__title-container {
    margin-bottom: 0;
  }

  .language__switch {
    cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
    position: relative;
    height: 64px;
  }

  .language__switch-mobile {
    display: none;
  }

  .language__switch-desktop {
    display: block;
  }

  .language__switch-circle {
    transition: transform 500ms;
  }

  .language__switch.russian svg rect:nth-of-type(2) {
    transform: translateX(-65px);
  }

  .language__switch-ru, .language__switch-eng {
    font-size: 20px;
    line-height: 28px;
  }

  .language__switch-ru {
    left: 16px;
    top: 18px;
  }

  .language__switch-eng {
    top: 18px;
    right: 16px;
  }
}

/* main */
h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
}

html {
  cursor: url('/src/img/cursor/default.png') 11 1, auto;
}

body {
  font-family: "Cruinn", sans-serif;
  font-weight: 400;
  color: #232323;
  background-color: #EEEAD9;
}

[style*="cursor: pointer"],
a,
button {
    cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
}

.outer-container {
  overflow: hidden;
  margin: 0 0 50px;
}

.container {
  padding-top: 50px;
  margin: 0 24px;
  max-width: 930px;
  /* transform-origin: center bottom;
  animation: pageIntro 4s ease-out forwards; */
}

@keyframes pageIntro {
  0% {
    transform: translateY(100vh) scale(0.5);
    opacity: 0;
  }
  10% {
    transform: translateY(30vh) scale(0.5);
    opacity: 0.3;
  }

  60% {
    transform: translateY(-65vh) scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@media (min-width: 978px) { 
  .container {
    margin: 0 auto;
  }

}


/* ios */

label {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.case__switch {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* header */

.header h2 {
  font-size: 32px;
  font-weight: 700;
}

.nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.nav__element {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-decoration: none;
  padding: 8px;
  border: 2px solid;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 200ms;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.nav__element_color_green {
  color: #90C081;
}

.nav__element_color_green:hover {
  color: #EEEAD9;
  background-color: #90C081;
  border-color: #90C081;
}

.nav__element_color_blue {
  color: #92B0C6;
}

.nav__element_color_blue:hover {
  color: #EEEAD9;
  background-color: #92B0C6;
  border-color: #92B0C6;
}

.nav__element_color_red {
  color: #E89A8B;
}

.nav__element_color_red:hover {
  color: #EEEAD9;
  background-color: #E89A8B;
  border-color: #E89A8B;
}

/* showreel */

.showreel {
  color: #EEEAD9;
  position: relative;
  padding: 30px 0 36px; 
  margin-bottom: 91px;
}

.showreel h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  margin-bottom: 8px;
}

.showreel__text {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 126px;
}

.showreel__play,
.showreel__play-img {
  width: 60px;
  height: 60px;
}

.showreel__play-hover {
  display: none;
}

.showreel__video {
  position: absolute;
  z-index: -2;
  top: 0;
  left: calc(50% - 50vw);
  height: 100%;
  width: 100vw;
  object-fit: cover;
}

.showreel__video-mask {
  display: block;
  background-color: rgba(35, 35, 35, 0.4);
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  pointer-events: none;
}

#showreel-full {
  display: none;
}

/* info */

.info__photo {
  display: flex;
  justify-content: center;
  margin: 0 auto 74px;
  position: relative;
  width: 100%;
}

.info__vladislav {
  width: 100%;
  
}

.info__gradient-container {
  z-index: -2;
  position: absolute;
  width: 100vw;
  height: calc(100% + 160px);
  top: -80px;
  left: -24px;
}

.info__gradient-container video {
  height: 100%;
  width: 100%;
  object-fit: fill;
  -webkit-mask-image: 
  linear-gradient(to top, transparent, black 20%),
  linear-gradient(to bottom, transparent, black 20%);
  mask-image: 
  linear-gradient(to top, transparent, black 20%),
  linear-gradient(to bottom, transparent, black 20%);
  mask-composite: intersect;
  mask-size: cover; 
}

.info__flower,
.info__ghost {
  position: absolute;
}

.info__flower {
  top: -8%;
  left: 0%;
  animation: floatFlower 5s ease-in-out infinite;
} 

.info__ghost {
  top: 92%;
  left: 70%;
  animation: float 7s ease-in-out infinite;
}

@media (max-width: 769px) { 
  .info__flower {
    top: -8%;
    left: 10%;
  } 

  .info__ghost {
    top: 92%;
    left: 70%;
  }
}

@media (max-width: 700px) { 
  .info__flower {
    top: -8%;
    left: 0%;
  }
  
  .info__ghost {
    top: 92%;
    left: 70%;
  }
}

@media (max-width: 550px) { 
  .info__ghost {
    top: 85%;
    left: 67%;
  }
}

@media (max-width: 400px) { 
  .info__ghost {
    top: 85%;
    left: 60%;
  }
}

@media (max-width: 350px) { 
  .info__ghost {
    top: 79%;
  left: 55%;
  }
}

@keyframes floatFlower {
  0% {
    transform: translate(0, 0) rotate(-15deg);

  }
  50% {
    transform: translate(10px, -10px) rotate(15deg);

  }
  100% {
    transform: translate(0, 0) rotate(-15deg);
  }
}

@keyframes float {
  0% {
    transform: translate(0, 0);

  }
  50% {
    transform: translate(10px, -10px);

  }
  100% {
    transform: translate(0, 0);
  }
}

.info__text {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 30px;
}

.info__skills {
  margin-bottom: 43px;
}

.info__skills-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 13px;
  max-width: 263px;
}

.info__skills-container:first-of-type {
  margin-bottom: 16px;
}

.info__skill {
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  padding: 16px 10px;
  border-radius: 20px;
  border: 2px solid;
  flex-shrink: 0;
}

.info__skill_color_green {
  border-color: #90C081;
}

.info__skill_color_red {
  border-color: #E89A8B;
}

.info__skill_color_blue {
  border-color: #92B0C6;
}

/* brands */

.brands__element {
  width: 56px;
  height: 56px;
}

.brands__element-translate-true {
  transform: translate(2px, 0);
}

@media (max-width: 769px) { 
  .brands__list {
    margin-bottom: 50px;
  }

  .brands__list_mobile_true {
    display: flex;
    justify-content: space-between;
  }

  .brands__list_mobile_true:first-of-type {
    margin-bottom: 16px;
  }
}

.brands__header {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 41px;
}

/* teams */

.teams__header,
.cases__header {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 30px;
}

@media (max-width: 769px) { 
  .teams__list {
    margin-bottom: 50px;
  }

  .teams__list_mobile_true {
    display: flex;
    justify-content: space-between;
  }

  .teams__list_mobile_true:not(:last-of-type) {
    margin-bottom: 20px;
  }
}

#cgf {
  width: 35px;
  display: flex;
  justify-content: start;
  align-items: center;
}

.atomic {
  transform: translateX(-2px);
}


.nashume {
  position: relative;
  top: 2px;
}

.dada {
  transform: translateX(12px);
}

.hateagency img {
  width: 120px;
}

/* cases */

.cases {
  margin-bottom: 50px;
  position: relative;
}

.cases__elements {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

.case {
  width: 100%;
  flex-shrink: 0;
  border-radius: 50px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 30px;
  position: relative;
}

#case-1 {
  order: 1;
}

#case-2 {
  order: 6;
}

#case-3 {
  order: 5;
}

#case-4 {
  order: 8;
}

#case-5 {
  order: 3;
}

#case-6 {
  order: 7;
}

#case-7 {
  order: 9;
}

#case-8 {
 order: 2;
}

#case-9 {
  order: 4;
}

.case__cup {
  position: absolute;
  top: 24px;
  right: 24px;  
  height: 24px;
}

.case_сolor_green {
  background: #90C081;
}

.case_сolor_blue {
  background: #92B0C6;
}

.case_сolor_red {
  background: #E89A8B;
}

.case video {
  background-color: #222220;
  object-fit: cover;
  aspect-ratio: 455/225;
}

@media (min-width: 770px) { 
  .case video {
    aspect-ratio: auto;
    height: 225px;
  }
}


.case__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 24px 0px;
}

.case__title {
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  padding: 8px;
  border-radius: 20px;
  border: 2px solid #FFF;
}

.case__description {
  padding: 0 24px;
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}

.case__description h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 10px 0 15px;
}

.case__description p {
  font-size: 12px;
  font-weight: 500;
  color: #FFF;
}

.case__description a,
.case__description a:visited {
  color: #FFF;
  font-size: 12px;
  font-family: "Albert Sans", "Cruinn", sans-serif;
  text-decoration: underline;
  font-style: italic;
  font-weight: 500;
}

.case__description_color_blue {
  color: #4B5F6E;
  font-weight: 700;
}

.case__description_color_red {
  color: #9B4231;
  font-weight: 700;
}

.case__description_color_green {
  color: #324C29;
  font-weight: 700;
}

.case__description-award {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.case__description-award img {
  height: 36px;
}

/* custom switch */

.case__switch {
  height: 40px;
  cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
}

.case__switch svg circle {
  transition: transform 500ms;
}

.case__switch.active svg circle {
  transform: translateX(35px);
}

.case__switch-desktop {
  display: none;
}

.case__switch-mobile {
  display: block;
}

/* gradient cases */

.case__gradients-fix {
  position: absolute;
  z-index: -2;
  top: 0;
  left: calc(50% - 50vw); 
  width: 100vw;
  height: calc(100% + 65px);
}

.case__gradients-fix video {
  height: 100%;
  width: 100%;
  object-fit: fill;
  -webkit-mask-image: linear-gradient(to top, transparent, black 6%), linear-gradient(to bottom, transparent, black 6%);
  mask-image: linear-gradient(to top, transparent, black 6%), linear-gradient(to bottom, transparent, black 6%);
  mask-composite: intersect;
  mask-size: cover;
}

/* form */

.form__title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}

.form__description {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 30px;
}

#dynamic-word {
  position: relative;
  font-weight: 500;
  padding: 1px 6px 4px;
  border-radius: 20px;
  border: 2px solid #BDAB90;
  display: inline-block;
  transition: transform 0.5s ease-in-out;
}

.rotate {
  transform: rotateX(90deg);
}

/* radio */

.form__radio-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 14px 15.5px;
  margin-bottom: 30px;
}

.form__radio-button {
  color: #222220;
  font-size: 16px;
  font-weight: 400;
  border-radius: 20px;
  background: rgba(189, 171, 144, 0.60);
  display: flex;
  height: 20px;
  padding: 10px 16px;
  justify-content: center;
  transition: background 500ms;
  cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + .form__radio-button {
  color: #232323;
  font-weight: 700;
  background: #BDAB90;
}

/* name + contact */

.form__input-container {
  display: flex;
  justify-self: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.form__input-name input,
.form__input-contact input,
.form__input-message input {
  border-radius: 20px;
  background: #FFF;
  border: none;
  height: 60px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 400;
  cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
}

.form__input-name,
.form__input-contact {
  width: 100%;
  position: relative;
}

.form__input-name input,
.form__input-contact input {
  
  width: calc(100% - 32px);
}

.form__input-message input {
  width: calc(100% - 32px);
  resize: none; 
  margin-bottom: 17px;
}

/* file */

.form__input-file input {
  display: none;
}

.form__input-file-labels {
  display: flex;
  width: calc(100% - 4px);
  height: 32px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 20px;
  border: 2px dashed #BDAB90;
  margin-bottom: 20px;
  color: #BDAB90;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.3s ease-in-out;
  cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
}

.drag-over {
  background-color: rgba(189, 171, 144, 0.60);
  border: 2px dashed BDAB90;
  color: #222220;
}

/* checkbox */

.form__checkbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30px;
  cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
  position: relative;
}

.form__checkbox input {
  display: none;
}

.form__checkbox-img {
  width: 20px;
  height: 20px;
  background-image: url('/src/img/icons/checkbox.svg');
  margin-right: 10px;
  transition: 200ms;
  flex-shrink: 0;
}

.form__checkbox input:checked + .form__checkbox-img {
  background-image: url('/src/img/icons/checkbox-checked.svg');
}

.form__checkbox-text {
  font-size: 8px;
  font-weight: 300;
  line-height: normal;
}

.form__checkbox-text a {
  color: #232323;
}

/* submit */

.form__submit {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border: none;
  background: #90C081;
  width: 100%;
  height: 60px;
  color:#FFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 80px;
  cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
}

.form__submit:disabled {
  opacity: 0.6;
  cursor: url('/src/img/cursor/default.png') 11 1, auto;
}

/* validate form */

.form__validation {
  position: absolute;
  top: 65px;
  display: none;
  justify-content: flex-start;
  gap: 5px;
  align-items: center;
  color: #E96D54;
  font-family: "Manrope Regular"; 
  font-size: 8px;
  font-weight: 400;
}

.form__validation-checkbox {
  top: 25px;
}

/* footer */

.footer {
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: space-between;
}

.footer__link {
  display: flex;
  justify-content: space-between;
}

.footer__link a svg path {
  transition: 200ms;
}

.footer__link a svg:hover path:not(:last-of-type) {
  fill: #92826A;
}

.footer__link a svg:hover path[stroke] {
  stroke: #92826A;
}

.footer__copy {
  font-size: 14px;
  font-weight: 700;
  color: #BDAB90;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}

.footer__copy a {
  color: #BDAB90;
  text-decoration: underline;
}


/* form sent */

.fullscreen-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  display: none;
}

.form-sent {
  z-index: 10000;
  display: flex;
  border-radius: 20px;
  background: #BDAB90;
  width: 272px;
  height: 279px;
  flex-shrink: 0;
  padding: 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.form-sent p {
  color: #EEEAD9;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 60px;
  text-align: center;
}

.form-sent img {
  margin-bottom: 69px;
}

.form-sent div {
  width: 224px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  border-radius: 20px;
  background: #EEEAD9;
  cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
}



.game {
  display: none;
}

/* desktop */

@media (min-width: 770px) { 

  .outer-container {
    margin: 0 0 100px;
  }

  /* header */
  .header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
  }

  .header h2 {
    font-size: 40px;
    margin-bottom: 0;
  }

  .nav {
    gap: 30px;
    margin-bottom: 0;
  }

  .nav__element {
    border-radius: 25px;
    height: 28px;
    padding: 16px;
  }

  /* showreel */

  .showreel {
    padding: 296px 0 50px; 
    margin-bottom: 139px;
  }
  
  .showreel h1 {
    font-size: 96px;
    line-height: 80px;
    margin-bottom: 30px;
  }
  
  .showreel__text {
    margin-bottom: 0;
    font-size: 48px;
    line-height: 48px;
  }

  .showreel__text-play {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }

  .showreel__play,
  .showreel__play-img {
    width: 80px;
    height: 80px;
    position: relative;
    cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
  }

  .showreel__play-hover {
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease; 
    position: absolute;
    top: -29.55px;
    left: -9.09px;
    pointer-events: none;
  }

  .showreel__play:hover .showreel__play-hover {
      opacity: 1;
  }

  /* info */

  .info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 20px;
  }

  .info__photo {
    margin: 0 0 80px;
    width: 360px;
    height: 393px;
    flex-shrink: 0;
  }
    
  .info__gradient-container {
    width: calc(100% + 160px);
    height: calc(100% + 160px);
    left: -80px;  
  }

  .info__gradient-container video {
    -webkit-mask-image:
    linear-gradient(to left, transparent, black 15%),
    linear-gradient(to right, transparent, black 15%),
    linear-gradient(to top, transparent, black 15%),
    linear-gradient(to bottom, transparent, black 15%);

    mask-image: 
    linear-gradient(to left, transparent, black 15%),
    linear-gradient(to right, transparent, black 15%),
    linear-gradient(to top, transparent, black 15%),
    linear-gradient(to bottom, transparent, black 15%);
  }

  .info__flower {
    top: -15%;
    left: 0%;
  } 
  
  .info__ghost {
    top: 78%;
    left: 68%;
  }

  .info__text-skills-container {
    width: 50%;
  }

  .info__text {
    margin-bottom: 20px;
    max-width: 453px;
  }
  
  .info__skills {
    margin-bottom: 0;
  }

  /* brands */

  .container__brands-teams {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
    gap: 20px;
  }

  .brands__header,
  .teams__header,
  .cases__header {
  font-size: 32px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 50px;
  }

  .brands {
    max-width: calc(50% - 10px);
  }

  .brands__element {
    width: 60px;
    height: 60px;
  }

  .brands__list_mobile_true {
    display: flex;
    justify-content: space-between;
  }

  .brands__list_mobile_true:first-of-type {
    margin-bottom: 30px;
  }

  .brands__element-translate-true {
    transform: translate(3px, 0);
  }

  /* teams */

  .teams {
    width: 50%;
    max-width: 415px;
  }

  .teams__list_mobile_true {
    display: flex;
    justify-content: space-between;
    max-width: 415px;
  }

  .teams__list_mobile_true:not(:last-of-type) {
    margin-bottom: 36px;
  }

  #cgf {
    width: auto;
    display: flex;
    justify-content: start;
    align-items: center;
  }
  
  .atomic {
    transform: translateX(4px) translateY(3px);
  }

  .zebra {
    transform: translateY(4px);
  }

  .hateagency img {
    width: 120px;
    transform: translateY(2px);
  }

  .dada {
    transform: translateX(-3px);
  }

  .cgf {
    transform: translateX(-6px);
  }

  /* cases */

  .case__gradients-fix {

    top: -50px;
    height: calc(100% + 165px);

    left: -100px; 
    width: calc(100% + 200px);
  }

  .case__gradients-fix video {
    -webkit-mask-image: 
    linear-gradient(to left, transparent, black 10%),
    linear-gradient(to right, transparent, black 10%),
    linear-gradient(to top, transparent, black 10%),
    linear-gradient(to bottom, transparent, black 10%);
    mask-image: 
    linear-gradient(to left, transparent, black 10%),
    linear-gradient(to right, transparent, black 10%),
    linear-gradient(to top, transparent, black 10%),
    linear-gradient(to bottom, transparent, black 10%);
  }
   
  .cases__elements {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px 20px;
  }

  .case {
    width: calc(50% - 10px);
    min-height: 315px;
    padding-bottom: 30px;
  }

  #case-1 {
    order: 1;
  }

  #case-2 {
    order: 6;
  }

  #case-3 {
    order: 5;
  }

  #case-4 {
    order: 7;
  }

  #case-5 {
    order: 4;
  }

  #case-6 {
    order: 8;
  }

  #case-7 {
    display: none;
  }

  #case-8 {
  order: 2;
  }

  #case-9 {
    order: 3;
  }

  .case__title {
    font-size: 24px;
    padding: 16px;
    border-radius: 25px;
  }

  .case__switch {
    height: 60px;
    cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
  }
  
  .case__switch svg circle {
    transition: transform 500ms;
  }

  .case__switch-desktop {
    display: block;
  }

  .case__switch-mobile {
    display: none;
  }

  .case__switch.active svg circle {
    transform: translateX(50px);
  }

  .case__description h4 {
    font-size: 24px;
    margin: 20px 0 15px; 
  }
  
  .case__description p {
    font-size: 20px;
  }

  .case__description a,
  .case__description a:visited {
    font-size: 20px;
  }

  .case__description_color_blue,
  .case__description_color_red,
  .case__description_color_green {
    font-size: 24px;
  }

  .case__description_color_red_award,
  .case__description_color_green_award {
    font-size: 20px;
  }
  
  .case__description-award img {
    height: 40px;
  }

  .container__form-game {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto;
    gap: 20px;
  }
  
  .form__description {
    font-size: 24px;
    margin-bottom: 54px;
  }

  .form {
    width: calc(50% - 10px);
  }

  .form__submit {
    margin-bottom: 105px;
  }

  .game {
    width: 330px;
    height: calc(716.984px - 109px);
    display: flex;
    justify-content: center;
    border: 4px solid #BDAB90;
    border-radius: 50px;
    overflow: hidden;
    position: relative;
  }

  canvas {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tetrisBtn {
    position: absolute;
    left: calc(50% - 55px);
    top: calc(50% - 31px);
    font-size: 20px;
    font-weight: 700;
    
    background-color: #D0C5AD;
    padding: 19.5px 24px;
    border-radius: 50px;
    cursor: url('/src/img/cursor/pointer.png') 7 0, pointer;
    transition: background 300ms;
  }

  .tetrisBtn:hover {
    background-color: #BDAB90;
  }

  #restartButton {
    top: calc(50% - 31px);
    left: calc(50% - 88.5px);
  }

  .tetris-controls {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 74px);
  }

  .footer {
    flex-direction: row;
    gap: 50px;
    align-items: end;
  }
  
  .footer__link {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
  }
  
  .footer__copy {
    font-size: 14px;
    font-weight: 400;
  }
}

@media (min-width: 944px) { 
  .brands {
    max-width: none
  }
}