krstivoja

.container {
  padding: 15px;
}
@media screen and (min-width: 480px) {
  .container {
    padding: 30px;
  }
}
@media screen and (min-width: 640px) {
  .container {

krstivoja

.xs-1 {
  width: 25%;
}

.xs-2 {
  width: 50%;
}

.xs-3 {
  width: 75%;

krstivoja

$columns: 12;
      
$breakpoints: (
  small : 480px,
  medium: 640px,
  large : 1024px
);

$gutter: (
  null  : 10px,

krstivoja

.bth{
    background: red;
}

.btn-big{
    @extend .bth;
    font-size: 12px;
    
}

krstivoja

.col{
    width: 100%;
}

.col--1-2{
    @extend .col;
    max-width: 50%;
}

krstivoja

$columns: (
  1: 1,
  2: 2,
  3: 3,
);


@each $number, $col in $columns {
  .grid-#{$number} {
    grid-template-columns: repeat(#{$col}, 1fr);

krstivoja

<?php

function yourprefix_menu_arrow($item_output, $item, $depth, $args) {
    if (in_array('menu-item-has-children', $item->classes)) {
        $arrow = '
        <div class="nav-arrow">
            <svg fill="#8198b8" width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
             <path d="m79.699 43.5-5.6992-5.6016-23.801 24.301-24.301-23.801-5.5977 5.8008 30.098 29.301z" fill="#8198b8"/>
            </svg>
        </div>'; // Change the class to your font icon

krstivoja

<?php /* Template Name: Awesome Page */

get_header();

?>

<div class="latest-posts"></div>

<script>

krstivoja

// CSS taken from: https://websemantics.uk/tools/responsive-font-calculator/

// Set up Min - Max Viewport (without px)

$viewport-min: 800;
$viewport-max: 1680;


// TypeClamp Mixin

krstivoja

.container{
    width: 90%;
    max-width: 1400;
    margin-left: auto;
    margin-right: auto;
}

$size: (

    "xxs": 3,