yuriy-o

.visually-hidden { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  margin: -1px; 
  border: 0; 
  padding: 0; 
  white-space: nowrap; 
  clip-path: inset(100%); 
  clip: rect(0 0 0 0); 

yuriy-o

li { list-style: none; }
a { text-decoration: none; }

/* Вказуємо box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

yuriy-o

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",

yuriy-o

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": ["comment"],
        "settings": {
          "fontStyle": "italic",
          "foreground": "#ffff35" // change color only for the comment text
        }
      }
      // {

yuriy-o

@mixin mq($type) {
  $mobile: 480px;
  $tablet: 768px;
  $desktop: 1200px;

  @if $type == 'mobile-only' {
    @media screen and (max-width: #{$tablet - 0.02}) {
      @content;
    }
  }

yuriy-o

<picture>
  <source
    media="(min-width: 1280px)"
    srcset="
      ./images/gallery/gallery-2_lg.webp    1x,
      ./images/gallery/gallery-2_lg@2x.webp 2x
    "
    type="image/webp"
  />
  <source

yuriy-o

.price {
  background-image: url(../images/price/bg-price_sm.png),
    linear-gradient(to bottom, #191c26, #191c26);
  background-image: -webkit-image-set(url(../images/price/bg-price_sm.webp) 1x),
    linear-gradient(to bottom, #191c26, #191c26);

  // Завантаження ретінізованого 2х фонового зображення
  @include mq(retina) {
    background-image: url(../images/price/bg-price_sm@2x.png),
      linear-gradient(to bottom, #191c26, #191c26);

yuriy-o

@mixin main-button($font, $font-size, $font-color, $border-size, $border-color, $padding, $transition-speed, $hover-color)
 {
 display:inline-block;
 text-decoration:none;
 text-transform:uppercase;
 font-family: $font;
 font-size: $font-size;
 color:$font-color;
 border:$border-size solid $border-color;
 padding:$padding;

yuriy-o

@mixin btn {
  padding: 12px 20px;
  max-width: 200px;
  min-width: 160px;
  min-height: 40px;

  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.33;

yuriy-o

// ---- quicksort ----
// function quicksort(numbers) {
//   if (numbers.length < 2) return numbers;

//   const pivot = numbers[0];
//   const left = [];
//   const right = [];

//   for (let i = 1; i < numbers.length; i++) {
//     numbers[i] < pivot ? left.push(numbers[i]) : right.push(numbers[i]);