@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    /** color **/
    --c-black: #000;
    --c-white: #fff;
    --c-red: #e13851;
    --c-grey: #c7c7c7;
    --c-aqua: #f2fdff;
    --c-blue: #5db3e1;
    --c-darkred: #a91734;
    
 

    /** font **/
    --f-80: 5rem;
    --f-64: 4rem;
    --f-56: 3.5rem;
    --f-50: 3.125rem;
    --f-48: 3rem;
    --f-44: 2.75rem;
    --f-40: 2.5rem;
    --f-36: 2.25rem;
    --f-32: 2rem;
    --f-28: 1.75rem;
    --f-24: 1.5rem;
    --f-20: 1.25rem;
    --f-18: 1.125rem;
    --f-16: 1rem;
    --f-14: 0.875rem;
    --f-12: 0.75rem;

    /** weight **/
    --w-thin: 100;
    --w-extralight: 200;
    --w-light: 300;
    --w-normal: 400;
    --w-medium: 500;
    --w-semibold: 600;
    --w-bold: 700;
    --w-extrabold: 800;
    --w-black: 900;

    /** padding **/
    --p-1: 1rem;
    --p-15: 1.5rem;
    --p-2: 2rem;
    --p-25: 2.5rem;

    /** radius **/
    --r-1: 15px;
    --r-2: 25px;
    --r-3: 35px;
    --r-4: 45px;
    --r-circle: 50%;
}

html {
    font-size: 18px;
    margin: 0;
    line-height: 1.2;
     font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  
}

body {
    margin: 0;
}

h1 {
    font-size: var(--f-40);
    font-weight: 500;
}

img {
    max-width: 100%;
}

a,
a:hover,
a:active {
    text-decoration: none;
    color: var(--c-black);
}

button,
button:active {
    border: none;
    outline: none;
    background: var(--c-white);
    font-size: 18px;
    font-family: Tahoma, sans-serif;
}
/* p, ul {
    font-weight: 200;
} */
.c-black {
    color: var(--c-black);
}
.c-white {
    color: var(--c-white);
}
.c-red {
    color: var(--c-red);
}

.c-darkred {
    color: var(--c-darkred);
}
.c-grey {
    color: var(--c-grey);
}

.w-thin {
    font-weight: var(--w-thin);
}
.w-exlight {
    font-weight: var(--w-extralight);
}
.w-light {
    font-weight: var(--w-light);
}
.w-normal {
    font-weight: var(--w-normal);
}
.w-medium {
    font-weight: var(--w-medium);
}
.w-semibold {
    font-weight: var(--w-semibold);
}
.w-bold {
    font-weight: var(--w-bold);
}
.w-extrabold {
    font-weight: var(--w-extrabold);
}
.w-black {
    font-weight: var(--w-black);
}

.s-italic {
    font-style: italic;
}

.t-caps {
    text-transform: uppercase;
}
.t-uncaps {
    text-transform: none;
}

.line-h--1 {
    line-height: 1;
}
.line-h--15 {
    line-height: 1.5;
}
.line-h--2 {
    line-height: 2;
}

.f--12 {
    font-size: var(--f-12);
}
.f--14 {
    font-size: var(--f-14);
}
.f--16 {
    font-size: var(--f-16);
}
.f--18 {
    font-size: var(--f-18);
}
.f--20 {
    font-size: var(--f-20);
}
.f--24 {
    font-size: var(--f-24);
}
.f--28 {
    font-size: var(--f-28);
}
.f--32 {
    font-size: var(--f-32);
}
.f--36 {
    font-size: var(--f-36);
}
.f--40 {
    font-size: var(--f-40);
}
.f--44 {
    font-size: var(--f-44);
}
.f--50 {
    font-size: var(--f-50);
}
.f--56 {
    font-size: var(--f-56);
}
.f--64 {
    font-size: var(--f-64);
}
.f--80 {
    font-size: var(--f-80);
}

.center {
    text-align: center;
}

.box--1 {
    padding: var(--p-1);
}
.box--15 {
    padding: var(--p-15);
}
.box--2 {
    padding: var(--p-2);
}
.box--25 {
    padding: var(--p-25);
}
.box--news {
    padding: var(--p-25);
}

.box__width {
    width: 100%;
}
.box__height {
    height: 100%;
}

.box--relative {
    position: relative;
}
.box--absolute {
    position: absolute;
}
.box--fixed {
    position: fixed;
}
.box--static {
    position: static;
}
.box--sticky {
    top: 1rem;
    position: sticky;
}

.box--white {
    background-color: var(--c-white);
}
.box--black {
    background-color: var(--c-black);
}
.box--red {
    background-color: var(--c-red);
}
.box--aqua {
    background-color: var(--c-aqua);
}
.box--blue {
     background-color: var(--c-blue);
}
.box--darkred {
     background-color: var(--c-darkred);
}

.box--grey {
    background-color: var(--c-grey);
}

.box__border {
    border: 1px solid var(--c-black);
}
.box__border--white {
    border-color: var(--c-white);
}
.box__border--red {
    border-color: var(--c-red);
}
.box__border--grey {
    border-color: var(--c-grey);
}

.box__radius--1 {
    border-radius: var(--r-1);
    -webkit-border-radius: var(--r-1);
    -moz-border-radius: var(--r-1);
    -ms-border-radius: var(--r-1);
    -o-border-radius: var(--r-1);
}
.box__radius--1--top {
    border-top-right-radius: var(--r-1);
    border-top-left-radius: var(--r-1);
}
.box__radius--1-bottom {
    border-bottom-right-radius: var(--r-1);
    border-bottom-left-radius: var(--r-1);
}
.box__radius--1-left {
    border-top-left-radius: var(--r-1);
    border-bottom-left-radius: var(--r-1);
}
.box__radius--1-right {
    border-top-right-radius: var(--r-1);
    border-bottom-right-radius: var(--r-1);
}

.box__radius--2 {
    border-radius: var(--r-2);
    -webkit-border-radius: var(--r-2);
    -moz-border-radius: var(--r-2);
    -ms-border-radius: var(--r-2);
    -o-border-radius: var(--r-2);
}
.box__radius--2-top {
    border-top-right-radius: var(--r-2);
    border-top-left-radius: var(--r-2);
}
.box__radius--2-bottom {
    border-bottom-right-radius: var(--r-2);
    border-bottom-left-radius: var(--r-2);
}
.box__radius--2-left {
    border-top-left-radius: var(--r-2);
    border-bottom-left-radius: var(--r-2);
}
.box__radius--2-right {
    border-top-right-radius: var(--r-2);
    border-bottom-right-radius: var(--r-2);
}

.box__radius--3 {
    border-radius: var(--r-3);
    -webkit-border-radius: var(--r-3);
    -moz-border-radius: var(--r-3);
    -ms-border-radius: var(--r-3);
    -o-border-radius: var(--r-3);
}
.box__radius--3-top {
    border-top-right-radius: var(--r-3);
    border-top-left-radius: var(--r-3);
}
.box__radius--3-bottom {
    border-bottom-right-radius: var(--r-3);
    border-bottom-left-radius: var(--r-3);
}
.box__radius--3-left {
    border-top-left-radius: var(--r-3);
    border-bottom-left-radius: var(--r-3);
}
.box__radius--3-right {
    border-top-right-radius: var(--r-3);
    border-bottom-right-radius: var(--r-3);
}

.box__radius--4 {
    border-radius: var(--r-4);
    -webkit-border-radius: var(--r-4);
    -moz-border-radius: var(--r-4);
    -ms-border-radius: var(--r-4);
    -o-border-radius: var(--r-4);
}
.box__radius--4-top {
    border-top-right-radius: var(--r-4);
    border-top-left-radius: var(--r-4);
}
.box__radius--4-bottom {
    border-bottom-right-radius: var(--r-4);
    border-bottom-left-radius: var(--r-4);
}
.box__radius--4-left {
    border-top-left-radius: var(--r-4);
    border-bottom-left-radius: var(--r-4);
}
.box__radius--4-right {
    border-top-right-radius: var(--r-4);
    border-bottom-right-radius: var(--r-4);
}

.box__radius--circle {
    border-radius: var(--r-circle);
    -webkit-border-radius: var(--r-circle);
    -moz-border-radius: var(--r-circle);
    -ms-border-radius: var(--r-circle);
    -o-border-radius: var(--r-circle);
}
.box__radius--circle-top {
    border-top-right-radius: var(--r-circle);
    border-top-left-radius: var(--r-circle);
}
.box__radius--circle-bottom {
    border-bottom-right-radius: var(--r-circle);
    border-bottom-left-radius: var(--r-circle);
}
.box__radius--circle-left {
    border-top-left-radius: var(--r-circle);
    border-bottom-left-radius: var(--r-circle);
}
.box__radius--circle-right {
    border-top-right-radius: var(--r-circle);
    border-bottom-right-radius: var(--r-circle);
}

.box__square {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}
.box__square .box__square--top {
    width: 100%;
    top: 0;
    position: absolute;
}
.box__square .box__square--bottom {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.box__square .box__square--center {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    align-content: center;
}

.box__grid {
    display: grid;
}
.box__grid--gap-1 {
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
}
.box__grid--gap-2 {
    grid-row-gap: 2rem;
    grid-column-gap: 2rem;
}
.box__grid--col-1 {
    grid-template-columns: 1fr;
}
.box__grid--col-2 {
    grid-template-columns: 1fr 1fr;
}
.box__grid--col-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.box__grid--col-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.box__grid--row-1 {
    grid-template-rows: 1fr;
}
.box__grid--row-2 {
    grid-template-rows: 1fr 1fr;
}
.box__grid--row-3 {
    grid-template-rows: 1fr 1fr 1fr;
}

.button {
    line-height: 1;
    text-align: center;
    padding: .4rem .8rem;
}
.button--1 {
    padding: .5rem 1.5rem;
}
.button--15 {
    padding: 1rem 2rem;
}
.button--35 {
    padding: .8rem 3rem;
}
.button__white {
    background-color: var(--c-white);
    color: var(--c-black);
}

div.line {
    background-color: var(--c-black);
}
div.line--white {
    background-color: var(--c-white);
}
div.line--grey {
    background-color: var(--c-grey);
}
div.line__horizontal {
    width: 100%;
    height: 1px;
}
div.line__vertical {
    height: 100%;
    width: 1px;
}
div.line__horizontal--2 {
    height: 2px;
}
div.line__vertical--2 {
    width: 2px;
}

.object-fit--cover {
    object-fit: cover;
}
.object-fit--contain {
    object-fit: contain;
}

.object-position--top {
    object-position: top;
}
.object-position--bottom {
    object-position: bottom;
}
.object-position--left {
    object-position: left;
}
.object-position--right {
    object-position: right;
}

.container__margin {
    margin-top: 4rem;
    margin-bottom: 4rem;
}


/* TABS */

.external-buttons {
    margin-top: 15px;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

/* КНОПКИ ТАБОВ */
.tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    position:relative;
}

.tab-buttons::before {
    content:'';
    position:absolute;
    width:100%;
    height:2px;
    left:0;
    bottom:0;
    background:#eee;
}

.tab-buttons button {
    padding: 10px 20px;
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: 0.25s;
    position:relative;
}

.tab-buttons button:hover {
    color: var(--c-red);
}

.tab-buttons button.active {
    border-bottom: 3px solid var(--c-red);
    color: var(--c-red);
}

/* ТАБ-КОНТЕНТ */
.tab-content {
    display: none;
    padding-top: 10px;
}

.tab-content.active {
    display: block;
}




/** MAP **/

.map {
    width: 100%;
    height: 640px;
    position: relative;
    margin-top: 3em;
    overflow: hidden;
    cursor: pointer;
    background: url("/images/map.jpg") #fff no-repeat;
    background-position: center center;
    background-size: cover;
}
#map-yandex {
    position: relative;
    z-index: 7;
    width: 100%;
    height: 20em;
    cursor: pointer;
    background-color: transparent;
}
.loader {
    position: absolute;
    top: -100%;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #000;
    transition: opacity 0.7s ease;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.55);
}
.loader.is-active {
    top: 0;
    opacity: 1;
}
.loader-default:after {
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    content: "";
    animation: rotation 1s linear infinite;
    border: solid 8px #fff;
    border-left-color: transparent;
    border-radius: 50%;
}
@keyframes rotation {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(359deg);
    }
}

.archive__swiper {
    padding: 8rem 0;
    position: relative;
}
.archive__swiper--slide {
    height: 30rem;
}
.archive__swiper .swiper-slide {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.archive__swiper--next, .archive__swiper--prev {
    position: absolute;
    top: calc(50% - 40px);
    right: 120px;
    z-index: 999;
}
.archive__swiper--prev {
    right: auto;
    left: 120px;
}

.swiper-slide:nth-child(1) .archive__swiper--slide {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../img/archive1.png") no-repeat 0 0/cover;
}
.swiper-slide:nth-child(2) .archive__swiper--slide {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../img/archive2.png") no-repeat 0 0/cover;
}
.swiper-slide:nth-child(3) .archive__swiper--slide {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../img/archive3.png") no-repeat 0 0/cover;
}
.swiper-slide:nth-child(4) .archive__swiper--slide {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../img/archive4.png") no-repeat 0 0/cover;
}
.swiper-slide:nth-child(5) .archive__swiper--slide {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../img/archive5.png") no-repeat 0 0/cover;
}


.gallery__swiper {
    margin: 0 5rem;
    padding: 5rem 0;
}
.gallery__swiper--nav {
    position: relative;
}
.gallery__swiper--next, .gallery__swiper--prev {
    position: absolute;
    top: calc(50% - 40px);
    right: calc(0px - 50px);
    z-index: 999;
}
.gallery__swiper--prev {
    right: auto;
    left: calc(0px - 50px);
}


.review__swiper {
    margin: 0 2rem;
    padding: 8rem 0;
}
.review__swiper .swiper-slide {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.review__swiper--nav {
    position: relative;
}
.review__swiper--next, .review__swiper--prev {
    position: absolute;
    top: calc(50% - 40px);
    right: calc(0px - 50px);
    z-index: 999;
}
.review__swiper--prev {
    right: auto;
    left: calc(0px - 50px);
}

.box__quotes, .box__quotes p {
    position: relative;
    z-index: 999;
}
.box__quotes:before, .box__quotes:after {
    content: '';
    position: absolute;
    z-index: 9;
    background: url("../img/icon-quotes-grey.png") no-repeat 0 0/cover;
    width: 50px;
    height: 50px;
    bottom: -1rem;
    right: 1.5rem;
}
.box__quotes:before {
    transform: rotate(180deg);
    top: -1rem;
    bottom: auto;
    left: -1.5rem;
    right: auto;
}

.partner__swiper {
    padding: 6rem 0;
}
.partner__swiper .swiper-slide {
    width: auto;
    height: auto;
}

/* CALENDAR */

.calendar {
    border: 1px solid var(--c-grey);
    padding: 2.5rem;
}
.calendar .calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.calendar .calendar__header .current-date {
    font-size: 1.45rem;
    font-weight: 500;
}

.calendar__body ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    text-align: center;
    padding-left: 0;
}
.calendar__body .days {margin-bottom: 0}
.calendar__body .days li {
    padding: 0 5px;
    margin-bottom: 15px;
    width: 36px;
    height: 30px;
}
.calendar__body .days li div {
    height: 100%;
    align-content: center;
}
.calendar__body .days li.inactive {color: var(--c-grey)}
.calendar__body .days li.active div {
    color: var(--c-white);
    background: var(--c-red);
}
.calendar__body ul li {
    position: relative;
    width:calc(100%  / 7)
}


.container__breadcrumbs ul {
    list-style: none;
    display: flex;
    padding-left: 0;

}
.container__breadcrumbs ul li {
    margin-right: .5rem;
    font-size: 14px;
}



nav ul {
	text-align:center;
    margin:0;
	padding:0;
	text-decoration:none;
	list-style:none;
}
nav ul li {
	display:inline-block;
    padding:0;
	margin:0;
}
nav ul li a {
	color:#333;
	display:inline-block;
	text-decoration:none;
	border-bottom:2px solid #fff;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
	font-size:16px;
}
nav ul li a:hover {
	color: #e13851;
}

.button__menu {
	display:inline;
	position:absolute;
	right:50px;
	top:6px;
	z-index:999;
	font-size:30px;
}
.button__menu a {
	text-decoration:none;
}

.button__humburger {
    width: 50px;
    height: 50px;
    background: url(/assets/img/login.png) no-repeat 0 0/contain;
}

.btn-open span {
	color:#333;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
    position: absolute;
    width: 50px;
    height: 6px;
    border-radius: 10px;
}
.btn-open:hover:after {
	color:#34B484;
}
.btn-close:after {
	color:#fff;
	content:"0";
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}
.btn-close:hover:after {
	color: #34B484;
}
/*overlay*/
.overlay {
	display:none;
	position:fixed;
	top:0;
	height:100%;
	width:100%;
	background:#ffffff;
	overflow:auto;
	z-index:99;
}
.wrap {
	color:#e9e9e9;
	text-align:center;
	max-width:90%;
	margin:0 auto;
}
.wrap ul.wrap-nav {
	border-bottom:1px solid #575757;
	text-transform:capitalize;
	padding:150px 0px 100px;
}
.wrap ul.wrap-nav li {
	font-size:20px;
	display:inline-block;
	vertical-align:top;
	width:24%;
	position:relative;
}
.wrap ul.wrap-nav li a {
	color:#34B484;
	display:block;
	padding:8px 0;
	text-decoration:none;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
	color:#aa2323;
}
.wrap ul.wrap-nav ul {
	padding:20px 0;
}
.wrap ul.wrap-nav ul li {
	display:block;
	font-size:13px;
	width:100%;
	color:#ba2727;
}
.wrap ul.wrap-nav ul li a {
	color:#b62d2d;
}
.wrap ul.wrap-nav ul li a:hover {
	color:#34B484;
}
.social {
	font-size:25px;
	padding:20px;
}
.social p {
	margin:0;
	padding:20px 0 5px 0;
	line-height:30px;
	font-size:13px;
}
.social p a {
	color:#34B484;
	text-decoration:none;
	margin:0;
	padding:0;
}
.social-icon {
	width:80px;
	height:50px;
	background:#e9e9e9;
	color:#333;
	display:inline-block;
	margin:0 20px;
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}
.social-icon:hover {
	background:#34B484;
	color:#f0f0f0;
}
.social-icon i {
	margin-top:12px;
}

.box__conflist {
    border-bottom: 7px solid var(--c-white);
    text-wrap: balance
}
.box__conflist a:hover {
    text-decoration: underline;
}

.box--red.box__conflist {
    color: var(--c-white);
}
.box--red.box__conflist a {
    color: #fff;
}
.box--red.box__conflist .line {
    background: var(--c-white);
}

.navigation__ul {
    padding: 0;
    list-style: none;
}

.header__button {
    display: block;
    margin-bottom:.5rem;
}

.auth-form input {
    padding: 10px 20px;
}

.partner__swiper {
    padding-top: 2rem;
    padding-bottom: 2rem;
}


.pagination {
    display: flex;
    list-style: none;
    padding: 2rem 0;
    justify-content: center;
}
.pagination li {
    margin-left: .5rem;
    margin-right: .5rem;
}

table tr {
    border:1px solid var(--c-black);
    border-collapse:collapse;
    text-align: center;
    padding: 4px;
}
table td {
    border:1px solid var(--c-black);
    border-collapse:collapse;
    text-align: center;
    padding: 4px;
}
table td:nth-child(2) {
    text-align: left;
    padding-left: 10px;
}

table td a:hover {
    text-decoration: underline;
}



/* FORM */


.form__items {
    padding: 30px;
    border:1px solid var(--c-red);
    border-radius: 15px;
}
.form__items .form__item {
    margin-bottom: .5rem;
    width: 100%;
}

.form__items .form__check {
    margin-top:1rem;
}

.form__items .form__input input,
.form__items .form__select select,
.form__items .form__textarea textarea{
    border: 1px solid var(--c-black);
    padding: 10px;
    width: 100%;
    font-size: var(--f-16);
}
.form__items .form__input input[type='file'] {
    border:0
}
.form__items .form__submit {
    margin-top: 2rem;
}
.form__items .form__submit input {
    border: 0;
}


.list__button {
    list-style:none;
    padding-left: 0;
}
    .form__items .form__item p {
        margin-top:10px;
        margin-bottom:10px;
    }


/* MEDIA */


@media screen and (max-width: 768px) {
    .form__items .form__item p {
        margin-top:5px;
        margin-bottom:5px;
    }
    h1 {
        font-size: var(--f-28);
    }
    h2 span.f--40 {
               font-size: var(--f-20);
    }
    .archive__swiper {
        padding-top: 3rem;
    }
    .header__button {
        margin-bottom:1rem;
    }
    .header__logo {
        margin-bottom: 2rem;
    }
	.wrap ul.wrap-nav>li {
		width:100%;
		padding:20px 0;
		border-bottom:1px solid #ffffff;
	}
	.wrap ul.wrap-nav {
		padding:30px 0px 0px;
	}

	.social {
		color:#c1c1c1;
		font-size:25px;
		padding:15px 0;
        display: flex;
        justify-content: space-between;
	}
	.social-icon {
		width:50px;
		height:50px;
		background:#fff;
		color:#333;
		display:block;
		margin:5px 0;
	}
    .navigation__li {
        text-align: right;
    }
    .navigation__li:first-child a{
        font-size: 18px;
    }
    .header__row {
        position: relative;
    }
    .header__row::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        top: -15px;
        left: 0;
        background: #aa2323
    }
    .box__conflist {
        padding: .5rem;
        overflow-x: hidden;
    }
    .archive__swiper--next, .archive__swiper--prev {
        top:auto;
        bottom: 15px;
    }
    .header__button {
        font-size: 14px;
    }
}




@media (min-width: 576px) {
    .line-h-sm-1 {
        line-height: 1;
    }
    .line-h-sm-15 {
        line-height: 1.5;
    }
    .line-h-sm-2 {
        line-height: 2;
    }

    .f-sm-12 {
        font-size: var(--f-12);
    }
    .f-sm-14 {
        font-size: var(--f-14);
    }
    .f-sm-16 {
        font-size: var(--f-16);
    }
    .f-sm-18 {
        font-size: var(--f-18);
    }
    .f-sm-20 {
        font-size: var(--f-20);
    }
    .f-sm-24 {
        font-size: var(--f-24);
    }
    .f-sm-28 {
        font-size: var(--f-28);
    }
    .f-sm-32 {
        font-size: var(--f-32);
    }
    .f-sm-36 {
        font-size: var(--f-36);
    }
    .f-sm-40 {
        font-size: var(--f-40);
    }
    .f-sm-44 {
        font-size: var(--f-44);
    }
    .f-sm-50 {
        font-size: var(--f-50);
    }
    .f-sm-56 {
        font-size: var(--f-56);
    }
    .f-sm-64 {
        font-size: var(--f-64);
    }
    .f-sm-80 {
        font-size: var(--f-80);
    }

    .center-sm {
        text-align: center;
    }

    .box-sm-1 {
        padding: var(--p-1);
    }
    .box-sm-15 {
        padding: var(--p-15);
    }
    .box-sm-2 {
        padding: var(--p-2);
    }
    .box-sm-25 {
        padding: var(--p-25);
    }

    .box-sm-relative {
        position: relative;
    }
    .box-sm-absolute {
        position: absolute;
    }
    .box-sm-fixed {
        position: fixed;
    }
    .box-sm-static {
        position: static;
    }
    .box-sm-sticky {
        top: 1rem;
        position: sticky;
    }

    .box-sm-white {
        background-color: var(--c-white);
    }
    .box-sm-black {
        background-color: var(--c-black);
    }

    .box__radius-sm-1 {
        border-radius: var(--r-1);
        -webkit-border-radius: var(--r-1);
        -moz-border-radius: var(--r-1);
        -ms-border-radius: var(--r-1);
        -o-border-radius: var(--r-1);
    }
    .box__radius-sm-1-top {
        border-top-right-radius: var(--r-1);
        border-top-left-radius: var(--r-1);
    }
    .box__radius-sm-1-bottom {
        border-bottom-right-radius: var(--r-1);
        border-bottom-left-radius: var(--r-1);
    }
    .box__radius-sm-1-left {
        border-top-left-radius: var(--r-1);
        border-bottom-left-radius: var(--r-1);
    }
    .box__radius-sm-1-right {
        border-top-right-radius: var(--r-1);
        border-bottom-right-radius: var(--r-1);
    }

    .box__radius-sm-2 {
        border-radius: var(--r-2);
        -webkit-border-radius: var(--r-2);
        -moz-border-radius: var(--r-2);
        -ms-border-radius: var(--r-2);
        -o-border-radius: var(--r-2);
    }
    .box__radius-sm-2-top {
        border-top-right-radius: var(--r-2);
        border-top-left-radius: var(--r-2);
    }
    .box__radius-sm-2-bottom {
        border-bottom-right-radius: var(--r-2);
        border-bottom-left-radius: var(--r-2);
    }
    .box__radius-sm-2-left {
        border-top-left-radius: var(--r-2);
        border-bottom-left-radius: var(--r-2);
    }
    .box__radius-sm-2-right {
        border-top-right-radius: var(--r-2);
        border-bottom-right-radius: var(--r-2);
    }

    .box__radius-sm-3 {
        border-radius: var(--r-3);
        -webkit-border-radius: var(--r-3);
        -moz-border-radius: var(--r-3);
        -ms-border-radius: var(--r-3);
        -o-border-radius: var(--r-3);
    }
    .box__radius-sm-3-top {
        border-top-right-radius: var(--r-3);
        border-top-left-radius: var(--r-3);
    }
    .box__radius-sm-3-bottom {
        border-bottom-right-radius: var(--r-3);
        border-bottom-left-radius: var(--r-3);
    }
    .box__radius-sm-3-left {
        border-top-left-radius: var(--r-3);
        border-bottom-left-radius: var(--r-3);
    }
    .box__radius-sm-3-right {
        border-top-right-radius: var(--r-3);
        border-bottom-right-radius: var(--r-3);
    }

    .box__radius-sm-4 {
        border-radius: var(--r-4);
        -webkit-border-radius: var(--r-4);
        -moz-border-radius: var(--r-4);
        -ms-border-radius: var(--r-4);
        -o-border-radius: var(--r-4);
    }
    .box__radius-sm-4-top {
        border-top-right-radius: var(--r-4);
        border-top-left-radius: var(--r-4);
    }
    .box__radius-sm-4-bottom {
        border-bottom-right-radius: var(--r-4);
        border-bottom-left-radius: var(--r-4);
    }
    .box__radius-sm-4-left {
        border-top-left-radius: var(--r-4);
        border-bottom-left-radius: var(--r-4);
    }
    .box__radius-sm-4-right {
        border-top-right-radius: var(--r-4);
        border-bottom-right-radius: var(--r-4);
    }

    .box__radius-sm-circle {
        border-radius: var(--r-circle);
        -webkit-border-radius: var(--r-circle);
        -moz-border-radius: var(--r-circle);
        -ms-border-radius: var(--r-circle);
        -o-border-radius: var(--r-circle);
    }
    .box__radius-sm-circle-top {
        border-top-right-radius: var(--r-circle);
        border-top-left-radius: var(--r-circle);
    }
    .box__radius-sm-circle-bottom {
        border-bottom-right-radius: var(--r-circle);
        border-bottom-left-radius: var(--r-circle);
    }
    .box__radius-sm-circle-left {
        border-top-left-radius: var(--r-circle);
        border-bottom-left-radius: var(--r-circle);
    }
    .box__radius-sm-circle-right {
        border-top-right-radius: var(--r-circle);
        border-bottom-right-radius: var(--r-circle);
    }

    .box__square-sm {
        position: relative;
    } /** edit as you like **/
    .box__square .box__square-sm-top {
        position: absolute;
    } /** edit as you like **/
    .box__square .box__square-sm-bottom {
        position: absolute;
    } /** edit as you like **/

    .box__grid-sm {
        display: grid;
    }
    .box__grid-sm-gap-1 {
        grid-row-gap: 1rem;
        grid-column-gap: 1rem;
    }
    .box__grid-sm-gap-2 {
        grid-row-gap: 2rem;
        grid-column-gap: 2rem;
    }
    .box__grid-sm-col-1 {
        grid-template-columns: 1fr;
    }
    .box__grid-sm-col-2 {
        grid-template-columns: 1fr 1fr;
    }

    .box__grid-sm-row-1 {
        grid-template-rows: 1fr;
    }
    .box__grid-sm-row-2 {
        grid-template-rows: 1fr 1fr;
    }

    .button-sm-1 {
        padding: 1rem;
    }
    .button-sm-15 {
        padding: 1rem 2rem;
    }

    div.line__horizontal-sm {
        width: 100%;
        height: 1px;
    }
    div.line__vertical-sm {
        height: 100%;
        width: 1px;
    }
    div.line__horizontal-sm-2 {
        height: 2px;
    }
    div.line__vertical-sm-2 {
        width: 2px;
    }

    .object-fit-sm-cover {
        object-fit: cover;
    }
    .object-fit-sm-contain {
        object-fit: contain;
    }

    .object-position-sm-top {
        object-position: top;
    }
    .object-position-sm-bottom {
        object-position: bottom;
    }
    .object-position-sm-left {
        object-position: left;
    }
    .object-position-sm-right {
        object-position: right;
    }
}

@media (min-width: 768px) {
    .line-h-md-1 {
        line-height: 1;
    }
    .line-h-md-15 {
        line-height: 1.5;
    }
    .line-h-md-2 {
        line-height: 2;
    }

    .f-md-12 {
        font-size: var(--f-12);
    }
    .f-md-14 {
        font-size: var(--f-14);
    }
    .f-md-16 {
        font-size: var(--f-16);
    }
    .f-md-18 {
        font-size: var(--f-18);
    }
    .f-md-20 {
        font-size: var(--f-20);
    }
    .f-md-24 {
        font-size: var(--f-24);
    }
    .f-md-28 {
        font-size: var(--f-28);
    }
    .f-md-32 {
        font-size: var(--f-32);
    }
    .f-md-36 {
        font-size: var(--f-36);
    }
    .f-md-40 {
        font-size: var(--f-40);
    }
    .f-md-44 {
        font-size: var(--f-44);
    }
    .f-md-50 {
        font-size: var(--f-50);
    }
    .f-md-56 {
        font-size: var(--f-56);
    }
    .f-md-64 {
        font-size: var(--f-64);
    }
    .f-md-80 {
        font-size: var(--f-80);
    }

    .center-md {
        text-align: center;
    }

    .box-md-1 {
        padding: var(--p-1);
    }
    .box-md-15 {
        padding: var(--p-15);
    }
    .box-md-2 {
        padding: var(--p-2);
    }
    .box-md-25 {
        padding: var(--p-25);
    }

    .box-md-relative {
        position: relative;
    }
    .box-md-absolute {
        position: absolute;
    }
    .box-md-fixed {
        position: fixed;
    }
    .box-md-static {
        position: static;
    }
    .box-md-sticky {
        top: 1rem;
        position: sticky;
    }

    .box-md-white {
        background-color: var(--c-white);
    }
    .box-md-black {
        background-color: var(--c-black);
    }

    .box__radius-md-1 {
        border-radius: var(--r-1);
        -webkit-border-radius: var(--r-1);
        -moz-border-radius: var(--r-1);
        -ms-border-radius: var(--r-1);
        -o-border-radius: var(--r-1);
    }
    .box__radius-md-1-top {
        border-top-right-radius: var(--r-1);
        border-top-left-radius: var(--r-1);
    }
    .box__radius-md-1-bottom {
        border-bottom-right-radius: var(--r-1);
        border-bottom-left-radius: var(--r-1);
    }
    .box__radius-md-1-left {
        border-top-left-radius: var(--r-1);
        border-bottom-left-radius: var(--r-1);
    }
    .box__radius-md-1-right {
        border-top-right-radius: var(--r-1);
        border-bottom-right-radius: var(--r-1);
    }

    .box__radius-md-2 {
        border-radius: var(--r-2);
        -webkit-border-radius: var(--r-2);
        -moz-border-radius: var(--r-2);
        -ms-border-radius: var(--r-2);
        -o-border-radius: var(--r-2);
    }
    .box__radius-md-2-top {
        border-top-right-radius: var(--r-2);
        border-top-left-radius: var(--r-2);
    }
    .box__radius-md-2-bottom {
        border-bottom-right-radius: var(--r-2);
        border-bottom-left-radius: var(--r-2);
    }
    .box__radius-md-2-left {
        border-top-left-radius: var(--r-2);
        border-bottom-left-radius: var(--r-2);
    }
    .box__radius-md-2-right {
        border-top-right-radius: var(--r-2);
        border-bottom-right-radius: var(--r-2);
    }

    .box__radius-md-3 {
        border-radius: var(--r-3);
        -webkit-border-radius: var(--r-3);
        -moz-border-radius: var(--r-3);
        -ms-border-radius: var(--r-3);
        -o-border-radius: var(--r-3);
    }
    .box__radius-md-3-top {
        border-top-right-radius: var(--r-3);
        border-top-left-radius: var(--r-3);
    }
    .box__radius-md-3-bottom {
        border-bottom-right-radius: var(--r-3);
        border-bottom-left-radius: var(--r-3);
    }
    .box__radius-md-3-left {
        border-top-left-radius: var(--r-3);
        border-bottom-left-radius: var(--r-3);
    }
    .box__radius-md-3-right {
        border-top-right-radius: var(--r-3);
        border-bottom-right-radius: var(--r-3);
    }

    .box__radius-md-4 {
        border-radius: var(--r-4);
        -webkit-border-radius: var(--r-4);
        -moz-border-radius: var(--r-4);
        -ms-border-radius: var(--r-4);
        -o-border-radius: var(--r-4);
    }
    .box__radius-md-4-top {
        border-top-right-radius: var(--r-4);
        border-top-left-radius: var(--r-4);
    }
    .box__radius-md-4-bottom {
        border-bottom-right-radius: var(--r-4);
        border-bottom-left-radius: var(--r-4);
    }
    .box__radius-md-4-left {
        border-top-left-radius: var(--r-4);
        border-bottom-left-radius: var(--r-4);
    }
    .box__radius-md-4-right {
        border-top-right-radius: var(--r-4);
        border-bottom-right-radius: var(--r-4);
    }

    .box__radius-md-circle {
        border-radius: var(--r-circle);
        -webkit-border-radius: var(--r-circle);
        -moz-border-radius: var(--r-circle);
        -ms-border-radius: var(--r-circle);
        -o-border-radius: var(--r-circle);
    }
    .box__radius-md-circle-top {
        border-top-right-radius: var(--r-circle);
        border-top-left-radius: var(--r-circle);
    }
    .box__radius-md-circle-bottom {
        border-bottom-right-radius: var(--r-circle);
        border-bottom-left-radius: var(--r-circle);
    }
    .box__radius-md-circle-left {
        border-top-left-radius: var(--r-circle);
        border-bottom-left-radius: var(--r-circle);
    }
    .box__radius-md-circle-right {
        border-top-right-radius: var(--r-circle);
        border-bottom-right-radius: var(--r-circle);
    }

    .box__square-md {
        position: relative;
    } /** edit as you like **/
    .box__square .box__square-md-top {
        position: absolute;
    } /** edit as you like **/
    .box__square .box__square-md-bottom {
        position: absolute;
    } /** edit as you like **/

    .box__grid-md {
        display: grid;
    }
    .box__grid-md-gap-1 {
        grid-row-gap: 1rem;
        grid-column-gap: 1rem;
    }
    .box__grid-md-gap-2 {
        grid-row-gap: 2rem;
        grid-column-gap: 2rem;
    }
    .box__grid-md-col-1 {
        grid-template-columns: 1fr;
    }
    .box__grid-md-col-2 {
        grid-template-columns: 1fr 1fr;
    }

    .box__grid-md-row-1 {
        grid-template-rows: 1fr;
    }
    .box__grid-md-row-2 {
        grid-template-rows: 1fr 1fr;
    }

    .button-md-1 {
        padding: 1rem;
    }
    .button-md-15 {
        padding: 1rem 2rem;
    }

    div.line__horizontal-md {
        width: 100%;
        height: 1px;
    }
    div.line__vertical-md {
        height: 100%;
        width: 1px;
    }
    div.line__horizontal-md-2 {
        height: 2px;
    }
    div.line__vertical-md-2 {
        width: 2px;
    }

    .object-fit-md-cover {
        object-fit: cover;
    }
    .object-fit-md-contain {
        object-fit: contain;
    }

    .object-position-md-top {
        object-position: top;
    }
    .object-position-md-bottom {
        object-position: bottom;
    }
    .object-position-md-left {
        object-position: left;
    }
    .object-position-md-right {
        object-position: right;
    }
    .archive__swiper .swiper-slide-active {
    transform: scale(1.2);
    opacity: 1;
    }
}

@media (min-width: 992px) {
    .line-h-lg-1 {
        line-height: 1;
    }
    .line-h-lg-15 {
        line-height: 1.5;
    }
    .line-h-lg-2 {
        line-height: 2;
    }

    .f-lg-12 {
        font-size: var(--f-12);
    }
    .f-lg-14 {
        font-size: var(--f-14);
    }
    .f-lg-16 {
        font-size: var(--f-16);
    }
    .f-lg-18 {
        font-size: var(--f-18);
    }
    .f-lg-20 {
        font-size: var(--f-20);
    }
    .f-lg-24 {
        font-size: var(--f-24);
    }
    .f-lg-28 {
        font-size: var(--f-28);
    }
    .f-lg-32 {
        font-size: var(--f-32);
    }
    .f-lg-36 {
        font-size: var(--f-36);
    }
    .f-lg-40 {
        font-size: var(--f-40);
    }
    .f-lg-44 {
        font-size: var(--f-44);
    }
    .f-lg-50 {
        font-size: var(--f-50);
    }
    .f-lg-56 {
        font-size: var(--f-56);
    }
    .f-lg-64 {
        font-size: var(--f-64);
    }
    .f-lg-80 {
        font-size: var(--f-80);
    }

    .center-lg {
        text-align: center;
    }

    .box-lg-1 {
        padding: var(--p-1);
    }
    .box-lg-15 {
        padding: var(--p-15);
    }
    .box-lg-2 {
        padding: var(--p-2);
    }
    .box-lg-25 {
        padding: var(--p-25);
    }

    .box-lg-relative {
        position: relative;
    }
    .box-lg-absolute {
        position: absolute;
    }
    .box-lg-fixed {
        position: fixed;
    }
    .box-lg-static {
        position: static;
    }
    .box-lg-sticky {
        top: 1rem;
        position: sticky;
    }

    .box-lg-white {
        background-color: var(--c-white);
    }
    .box-lg-black {
        background-color: var(--c-black);
    }

    .box__radius-lg-1 {
        border-radius: var(--r-1);
        -webkit-border-radius: var(--r-1);
        -moz-border-radius: var(--r-1);
        -ms-border-radius: var(--r-1);
        -o-border-radius: var(--r-1);
    }
    .box__radius-lg-1-top {
        border-top-right-radius: var(--r-1);
        border-top-left-radius: var(--r-1);
    }
    .box__radius-lg-1-bottom {
        border-bottom-right-radius: var(--r-1);
        border-bottom-left-radius: var(--r-1);
    }
    .box__radius-lg-1-left {
        border-top-left-radius: var(--r-1);
        border-bottom-left-radius: var(--r-1);
    }
    .box__radius-lg-1-right {
        border-top-right-radius: var(--r-1);
        border-bottom-right-radius: var(--r-1);
    }

    .box__radius-lg-2 {
        border-radius: var(--r-2);
        -webkit-border-radius: var(--r-2);
        -moz-border-radius: var(--r-2);
        -ms-border-radius: var(--r-2);
        -o-border-radius: var(--r-2);
    }
    .box__radius-lg-2-top {
        border-top-right-radius: var(--r-2);
        border-top-left-radius: var(--r-2);
    }
    .box__radius-lg-2-bottom {
        border-bottom-right-radius: var(--r-2);
        border-bottom-left-radius: var(--r-2);
    }
    .box__radius-lg-2-left {
        border-top-left-radius: var(--r-2);
        border-bottom-left-radius: var(--r-2);
    }
    .box__radius-lg-2-right {
        border-top-right-radius: var(--r-2);
        border-bottom-right-radius: var(--r-2);
    }

    .box__radius-lg-3 {
        border-radius: var(--r-3);
        -webkit-border-radius: var(--r-3);
        -moz-border-radius: var(--r-3);
        -ms-border-radius: var(--r-3);
        -o-border-radius: var(--r-3);
    }
    .box__radius-lg-3-top {
        border-top-right-radius: var(--r-3);
        border-top-left-radius: var(--r-3);
    }
    .box__radius-lg-3-bottom {
        border-bottom-right-radius: var(--r-3);
        border-bottom-left-radius: var(--r-3);
    }
    .box__radius-lg-3-left {
        border-top-left-radius: var(--r-3);
        border-bottom-left-radius: var(--r-3);
    }
    .box__radius-lg-3-right {
        border-top-right-radius: var(--r-3);
        border-bottom-right-radius: var(--r-3);
    }

    .box__radius-lg-4 {
        border-radius: var(--r-4);
        -webkit-border-radius: var(--r-4);
        -moz-border-radius: var(--r-4);
        -ms-border-radius: var(--r-4);
        -o-border-radius: var(--r-4);
    }
    .box__radius-lg-4-top {
        border-top-right-radius: var(--r-4);
        border-top-left-radius: var(--r-4);
    }
    .box__radius-lg-4-bottom {
        border-bottom-right-radius: var(--r-4);
        border-bottom-left-radius: var(--r-4);
    }
    .box__radius-lg-4-left {
        border-top-left-radius: var(--r-4);
        border-bottom-left-radius: var(--r-4);
    }
    .box__radius-lg-4-right {
        border-top-right-radius: var(--r-4);
        border-bottom-right-radius: var(--r-4);
    }

    .box__radius-lg-circle {
        border-radius: var(--r-circle);
        -webkit-border-radius: var(--r-circle);
        -moz-border-radius: var(--r-circle);
        -ms-border-radius: var(--r-circle);
        -o-border-radius: var(--r-circle);
    }
    .box__radius-lg-circle-top {
        border-top-right-radius: var(--r-circle);
        border-top-left-radius: var(--r-circle);
    }
    .box__radius-lg-circle-bottom {
        border-bottom-right-radius: var(--r-circle);
        border-bottom-left-radius: var(--r-circle);
    }
    .box__radius-lg-circle-left {
        border-top-left-radius: var(--r-circle);
        border-bottom-left-radius: var(--r-circle);
    }
    .box__radius-lg-circle-right {
        border-top-right-radius: var(--r-circle);
        border-bottom-right-radius: var(--r-circle);
    }

    .box__square-lg {
        position: relative;
    } /** edit as you like **/
    .box__square .box__square-lg-top {
        position: absolute;
    } /** edit as you like **/
    .box__square .box__square-lg-bottom {
        position: absolute;
    } /** edit as you like **/

    .box__grid-lg {
        display: grid;
    }
    .box__grid-lg-gap-1 {
        grid-row-gap: 1rem;
        grid-column-gap: 1rem;
    }
    .box__grid-lg-gap-2 {
        grid-row-gap: 2rem;
        grid-column-gap: 2rem;
    }
    .box__grid-lg-col-1 {
        grid-template-columns: 1fr;
    }
    .box__grid-lg-col-2 {
        grid-template-columns: 1fr 1fr;
    }

    .box__grid-lg-row-1 {
        grid-template-rows: 1fr;
    }
    .box__grid-lg-row-2 {
        grid-template-rows: 1fr 1fr;
    }

    .button-lg-1 {
        padding: 1rem;
    }
    .button-lg-15 {
        padding: 1rem 2rem;
    }

    div.line__horizontal-lg {
        width: 100%;
        height: 1px;
    }
    div.line__vertical-lg {
        height: 100%;
        width: 1px;
    }
    div.line__horizontal-lg-2 {
        height: 2px;
    }
    div.line__vertical-lg-2 {
        width: 2px;
    }

    .object-fit-lg-cover {
        object-fit: cover;
    }
    .object-fit-lg-contain {
        object-fit: contain;
    }

    .object-position-lg-top {
        object-position: top;
    }
    .object-position-lg-bottom {
        object-position: bottom;
    }
    .object-position-lg-left {
        object-position: left;
    }
    .object-position-lg-right {
        object-position: right;
    }
}

@media (min-width: 1200px) {
    .line-h-xl-1 {
        line-height: 1;
    }
    .line-h-xl-15 {
        line-height: 1.5;
    }
    .line-h-xl-2 {
        line-height: 2;
    }

    .f-xl-12 {
        font-size: var(--f-12);
    }
    .f-xl-14 {
        font-size: var(--f-14);
    }
    .f-xl-16 {
        font-size: var(--f-16);
    }
    .f-xl-18 {
        font-size: var(--f-18);
    }
    .f-xl-20 {
        font-size: var(--f-20);
    }
    .f-xl-24 {
        font-size: var(--f-24);
    }
    .f-xl-28 {
        font-size: var(--f-28);
    }
    .f-xl-32 {
        font-size: var(--f-32);
    }
    .f-xl-36 {
        font-size: var(--f-36);
    }
    .f-xl-40 {
        font-size: var(--f-40);
    }
    .f-xl-44 {
        font-size: var(--f-44);
    }
    .f-xl-50 {
        font-size: var(--f-50);
    }
    .f-xl-56 {
        font-size: var(--f-56);
    }
    .f-xl-64 {
        font-size: var(--f-64);
    }
    .f-xl-80 {
        font-size: var(--f-80);
    }

    .center-xl {
        text-align: center;
    }

    .box-xl-1 {
        padding: var(--p-1);
    }
    .box-xl-15 {
        padding: var(--p-15);
    }
    .box-xl-2 {
        padding: var(--p-2);
    }
    .box-xl-25 {
        padding: var(--p-25);
    }

    .box-xl-relative {
        position: relative;
    }
    .box-xl-absolute {
        position: absolute;
    }
    .box-xl-fixed {
        position: fixed;
    }
    .box-xl-static {
        position: static;
    }
    .box-xl-sticky {
        top: 1rem;
        position: sticky;
    }

    .box-xl-white {
        background-color: var(--c-white);
    }
    .box-xl-black {
        background-color: var(--c-black);
    }

    .box__radius-xl-1 {
        border-radius: var(--r-1);
        -webkit-border-radius: var(--r-1);
        -moz-border-radius: var(--r-1);
        -ms-border-radius: var(--r-1);
        -o-border-radius: var(--r-1);
    }
    .box__radius-xl-1-top {
        border-top-right-radius: var(--r-1);
        border-top-left-radius: var(--r-1);
    }
    .box__radius-xl-1-bottom {
        border-bottom-right-radius: var(--r-1);
        border-bottom-left-radius: var(--r-1);
    }
    .box__radius-xl-1-left {
        border-top-left-radius: var(--r-1);
        border-bottom-left-radius: var(--r-1);
    }
    .box__radius-xl-1-right {
        border-top-right-radius: var(--r-1);
        border-bottom-right-radius: var(--r-1);
    }

    .box__radius-xl-2 {
        border-radius: var(--r-2);
        -webkit-border-radius: var(--r-2);
        -moz-border-radius: var(--r-2);
        -ms-border-radius: var(--r-2);
        -o-border-radius: var(--r-2);
    }
    .box__radius-xl-2-top {
        border-top-right-radius: var(--r-2);
        border-top-left-radius: var(--r-2);
    }
    .box__radius-xl-2-bottom {
        border-bottom-right-radius: var(--r-2);
        border-bottom-left-radius: var(--r-2);
    }
    .box__radius-xl-2-left {
        border-top-left-radius: var(--r-2);
        border-bottom-left-radius: var(--r-2);
    }
    .box__radius-xl-2-right {
        border-top-right-radius: var(--r-2);
        border-bottom-right-radius: var(--r-2);
    }

    .box__radius-xl-3 {
        border-radius: var(--r-3);
        -webkit-border-radius: var(--r-3);
        -moz-border-radius: var(--r-3);
        -ms-border-radius: var(--r-3);
        -o-border-radius: var(--r-3);
    }
    .box__radius-xl-3-top {
        border-top-right-radius: var(--r-3);
        border-top-left-radius: var(--r-3);
    }
    .box__radius-xl-3-bottom {
        border-bottom-right-radius: var(--r-3);
        border-bottom-left-radius: var(--r-3);
    }
    .box__radius-xl-3-left {
        border-top-left-radius: var(--r-3);
        border-bottom-left-radius: var(--r-3);
    }
    .box__radius-xl-3-right {
        border-top-right-radius: var(--r-3);
        border-bottom-right-radius: var(--r-3);
    }

    .box__radius-xl-4 {
        border-radius: var(--r-4);
        -webkit-border-radius: var(--r-4);
        -moz-border-radius: var(--r-4);
        -ms-border-radius: var(--r-4);
        -o-border-radius: var(--r-4);
    }
    .box__radius-xl-4-top {
        border-top-right-radius: var(--r-4);
        border-top-left-radius: var(--r-4);
    }
    .box__radius-xl-4-bottom {
        border-bottom-right-radius: var(--r-4);
        border-bottom-left-radius: var(--r-4);
    }
    .box__radius-xl-4-left {
        border-top-left-radius: var(--r-4);
        border-bottom-left-radius: var(--r-4);
    }
    .box__radius-xl-4-right {
        border-top-right-radius: var(--r-4);
        border-bottom-right-radius: var(--r-4);
    }

    .box__radius-xl-circle {
        border-radius: var(--r-circle);
        -webkit-border-radius: var(--r-circle);
        -moz-border-radius: var(--r-circle);
        -ms-border-radius: var(--r-circle);
        -o-border-radius: var(--r-circle);
    }
    .box__radius-xl-circle-top {
        border-top-right-radius: var(--r-circle);
        border-top-left-radius: var(--r-circle);
    }
    .box__radius-xl-circle-bottom {
        border-bottom-right-radius: var(--r-circle);
        border-bottom-left-radius: var(--r-circle);
    }
    .box__radius-xl-circle-left {
        border-top-left-radius: var(--r-circle);
        border-bottom-left-radius: var(--r-circle);
    }
    .box__radius-xl-circle-right {
        border-top-right-radius: var(--r-circle);
        border-bottom-right-radius: var(--r-circle);
    }

    .box__square-xl {
        position: relative;
    } /** edit as you like **/
    .box__square .box__square-xl-top {
        position: absolute;
    } /** edit as you like **/
    .box__square .box__square-xl-bottom {
        position: absolute;
    } /** edit as you like **/

    .box__grid-xl {
        display: grid;
    }
    .box__grid-xl-gap-1 {
        grid-row-gap: 1rem;
        grid-column-gap: 1rem;
    }
    .box__grid-xl-gap-2 {
        grid-row-gap: 2rem;
        grid-column-gap: 2rem;
    }
    .box__grid-xl-col-1 {
        grid-template-columns: 1fr;
    }
    .box__grid-xl-col-2 {
        grid-template-columns: 1fr 1fr;
    }

    .box__grid-xl-row-1 {
        grid-template-rows: 1fr;
    }
    .box__grid-xl-row-2 {
        grid-template-rows: 1fr 1fr;
    }

    .button-xl-1 {
        padding: 1rem;
    } /** edit as you like **/
    .button-xl-15 {
        padding: 1rem 2rem;
    } /** edit as you like **/

    div.line__horizontal-xl {
        width: 100%;
        height: 1px;
    }
    div.line__vertical-xl {
        height: 100%;
        width: 1px;
    }
    div.line__horizontal-xl-2 {
        height: 2px;
    }
    div.line__vertical-xl-2 {
        width: 2px;
    }

    .object-fit-xl-cover {
        object-fit: cover;
    }
    .object-fit-xl-contain {
        object-fit: contain;
    }

    .object-position-xl-top {
        object-position: top;
    }
    .object-position-xl-bottom {
        object-position: bottom;
    }
    .object-position-xl-left {
        object-position: left;
    }
    .object-position-xl-right {
        object-position: right;
    }
}