Mizutsune

<svg class="svg">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
    <path d="M0.5,0 L1,1 H0"></path>
  </clipPath>
</svg>

<div class="clipped">
  <video src="./assets/video.mp4"></video>
</div>

.svg {
     position: absolute;
     width: 0;
     height: 0;
}

.clipped {
     width: 100%;
     max-width: 500px;
     height: 350px;
     -webkit-clip-path: url(#my-clip-path);
     clip-path: url(#my-clip-path);
}

video {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

<parent>
   <card></card>
   <card></card>
   <card></card>
   <card></card>
   <button></button>
</parent>

Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

Почему transition не срабатывает при скрытии элемента?

- transition: opacity 0.3s;
+ transition: opacity 0.3s, visibility 0.3s;

.block {
    width: 250px;
    height: 250px;
    background: #eee;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .block-active {
    opacity: 1;
    visibility: visible;
  }

function show() {
    const element = document.getElementById("block");
    element.classList.toggle("block-active");
  }

function show() {
     const element = document.getElementById("block");

     switch (Boolean(element.classList.contains("block-active"))) {
          case false:
               return element.classList.add("block-active");
          case true:
               return element.classList.remove("block-active");
     }
}

button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-panel_button.sending .svg{
    animation: fly-out-in var(--animation-duration) ease-in-out;
}

addTodoButton.addEventListener("click", () => {
     addTodoButton.classList.add("sending");
     addTodoButton.addEventListener("animationend", e => {
               addTodoButton.classList.remove("sending");
               addItem();
          }, { once: true }
     );
});

Как поменять цвет активного буллита

.swiper-pagination-bullets .swiper-pagination-bullet-active {
// стили для активного буллета
}

и как их все вместе немного сдвинуть вниз

.button {
    background: #63319f;
    padding: 10px 45px;
    color: #fff;
    clip-path: polygon(85% 0, 100% 50%, 85% 100%, 15% 100%, 0% 50%, 15% 0);
}

<div class="block">
     <span class="title">Hello World</span>
     <span class="value">999999</span>
</div>

.block {
     display: flex;
     align-items: baseline;
}

.block::after {
     background: #4a4a4a;
     height: 3px;
     content: "";
     flex-grow: 1;
}

.value {
     order: 3;
}

.quality__button--all {
    margin-right: 13px;
    position: relative;
    background: #FF6428;
    border-radius: 40px;
    padding: 18px 45px;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFF;
}


.quality__button--all::before {
    content: "";
    background: #FF6428;
    color: #fff;
    background: red;
    border-radius: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    transition: width 0.3s linear;
}

.quality__button--all:hover::before {
    width: 100%;
}

.quality__button.quality__button--all::after {
    content: "Get the App";
    position: relative;
    color: inherit;
}

.quality__button--all::before {
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s linear;
}

.quality__button--all:hover::before {
    transform: translateX(0);
}

<div class="wrapper">
     <header></header>
     <main></main>
     <footer></footer>
</div>

.wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100vh;
}

function burgerMenu(selector) {
  const menuElement = document.querySelector(selector);

  const elements = [
    "burger-menu_link",
    "burger-menu_button",
    "burger-menu_overlay",
  ];

  const isTriggerElement = (element) => {
    return [...element.classList].some((className) =>
      elements.includes(className)
    );
  };

  menuElement.addEventListener("click", ({ target }) => {
    if (isTriggerElement(target)) {
      toggleMenu();
    }
  });

  function toggleMenu() {
    menuElement.classList.toggle("burger-menu_active");
    menuElement.classList.contains("burger-menu_active")
      ? document.body.classList.add("no-scroll")
      : document.body.classList.remove("no-scroll");
  }
}

burgerMenu(".burger-menu");

.burger-menu_lines {
   pointer-events: none;
}

.no-scroll {
   overflow: hidden;
}