@layer reset, typo, init, components, swiper, design, news, hamburger, dropdown;
@import "normalize.css";
@import "typography.css";
@import "news.css";
@import "hamburger.css";
@import "swiper.css";
@import "dropdown.css";

@layer init {

	:root {
		/*color-scheme: light dark;
		color: light-dark(var(--color-dark), var(--color-light));
		background-color: light-dark(var(--color-light), var(--color-dark));*/
		--color-primary: #bd4c00;
		--color-secondary: #EF8D4B;
		--color-light: #F5F5F5;
		--color-dark: #000000;/*
		--change-dark: light-dark(var(--color-dark), var(--color-light));
		--change-light: light-dark(var(--color-light), var(--color-dark));
		--gap: 2.5rem;
		--gap-small: 1rem;*/
	}
	html {
		scroll-behavior: smooth;
		background-color: var(--color-light);
	}
	.warning {
		background-color: #EF8D4B;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		align-items: center;
		color: black;
		width: 80%;
		margin: 0 auto;
		padding: 1rem 2rem;
	}
	.page {
		background-color: var(--color-light);
	}

	.scroll {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
	}
	.scroll2 {
		transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
	}
	.scroll3 {
		transition: opacity 2.2s ease-in-out, transform 2.2s ease-in-out;
	}

	.scroll.visible {
		opacity: 1;
		transform: translateY(0);
	}

	.page__content {
		width: 85%;
		max-width: 1400px;
		display: flex;
		flex-direction: column;
		gap: 4rem;
		align-items: center;
		margin: 0 auto;
	}

	.profile-pic {
		width: 2.5rem;
		height: 2.5rem;
		margin: auto 0;
		border-radius: 20rem;
	}

    .only-desktop { display: none; }
    .only-mobile { display: block; }
}
@layer components {
	.btn {
		display: inline-block;
		padding: 0.5rem 2rem;
		border-radius: 50px;
		border: 1.5px solid var(--color-primary);
		color: var(--color-primary);
		max-width: max-content;
		margin: 0 auto;
		background-color: rgba(252, 253, 255, 0.30);
		transition: background-color 0.8s ease-in-out;
	}

	.btn:hover{ background-color: rgba(242, 169, 120, 0.5);} 

	.btn--white{
		border: 1.5px solid var(--color-light);
		color: var(--color-light);
		background-color: rgba(252, 253, 255, 0);
	}
	.btn--white:hover{
		background-color: rgba(255, 255, 255, 0.2);
	}
	.menu a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: inherit; /* nebo barva, jakou chceš */
	padding: 0.25rem 0;
}
	.menu a {
		color: var(--color-primary);
	}
	.menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px; /* tloušťka čáry */
	background-color: currentColor; /* čára má barvu textu */
	transform: scaleX(0);
	transform-origin: right; /* výchozí – zasune se doprava */
	transition: transform 1s ease;
	}
	.menu a:hover::after {
	transform: scaleX(1);
	transform-origin: left; /* při hoveru vyjede zleva */
	}

	.btn-learn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem; /* mezera mezi šipkou a textem */
  padding: 0.9rem 2rem;
  background: #1a1a1a; /* tmavý podklad */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  transition: all 0.8s ease;
}
a.btn.btn--sign {
border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(187, 75, 0, 0.75);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1.8s cubic-bezier(0.19, 1, 0.22, 1);
}
a.btn.btn--sign:hover{
	border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 131, 7, 0.6), 0 0 20px rgba(255, 252, 247, 0);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 8px;
}
a.btn.btn--sign.btn--white {
  outline-color: rgba(255, 255, 255, 0.5);
}
a.btn.btn--sign.btn--white:hover{
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 157, 28, 0);
  outline-offset: 5px;
}

.btn-learn .arrow {
  font-size: 18px;
  transition: transform 0.6s ease;
}

.btn-learn:hover {
  background: #000; /* ještě tmavší */
}

.btn-learn:hover .arrow {
  transform: translateX(4px); /* šipka se jemně posune doprava */
}

	.link, .icon-link {
		display: block;
	}
	.link {
		margin: 1rem;
		color: var(--color-primary);
		transition: color 0.6s ease-in-out;
	}
	.link:hover{
		color: var(--color-secondary);
	}
	.icon-link {
		display: flex;
		align-content: center;
		margin: 0.7rem;
		transition: color ease-in-out .5s;
	}
	.icon-link:hover {
		color: var(--color-primary);
	}
	.icon-link::before {
		content: "";
		display: inline-block;
		background: center / contain no-repeat transparent;
		width: 1.5rem;
		height: 1.5rem;
		padding-right: 2rem;
	}
	.icon-link.map::before {
		background-image: url("../img/icons/map.svg");
	}
	.icon-link.facebook::before {
		background-image: url("../img/icons/facebook.svg");
	}
	.icon-link.service::before {
		background-image: url("../img/icons/services.svg");
	}
	.icon-link.phone::before {
		background-image: url("../img/icons/phone.svg");
	}
	.icon-link.reser::before {
		background-image: url("../img/icons/reser.svg");
	}
	.icon-link.house::before {
		background-image: url("../img/icons/house.svg");
	}
	.icon-link.email::before {
		background-image: url("../img/icons/email.svg");
	}
	.icon-link.person::before {
		background-image: url("../img/icons/person.svg");
	}
	.icon-link.star::before {
		background-image: url("../img/icons/star.svg");
	}
	.icon-link.pen::before {
		background-image: url("../img/icons/pen.svg");
	}
	.icon-link.clock::before {
		background-image: url("../img/icons/clock.svg");
	}
	.icon-link.money::before {
		background-image: url("../img/icons/money.svg");
	}
	p.icon-link.star a {
		padding: 0 0.3rem;
	}
	/* LIGHTGALLERY */
	.thumbnails {
    height: 150px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    grid-auto-rows: var(--height);
	}
	.thumbnails img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.thumbnails__item {
		margin: 0; 
		display: block;
	}
	.thumbnails__item > a {
		display: block;
		height: 100%;
		position: relative;
	}
	.thumbnails__image {
		display: block;
	}

	.service__gallery {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 100px);
		margin: 1rem;
	}
  .gallery__item {
		margin: 0;
	}
  .gallery__item>a { 
		height: 100%;
		width: 100%;
	}
  	.place1 {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}
	.place2 {
		grid-column: 2 / span 2;
		grid-row: 1 / span 1;
	}
	.place3 {
		grid-column: 1 / span 2;
		grid-row: 2 / span 1;
	}
	.place4 {
		grid-column: 3 / span 1;
		grid-row: 2 / span 1;
	}
	.page__content--service h3 {
		padding: 0 0 0 0.3rem;
		font-family: "Manrope", Helvetica, Arial, sans-serif;
		font-weight: 500;
		font-size: 1rem;
	}

	.image--responsive {
		height: 100%;
		display: block;
		margin: 0;
		padding: 0;
	}
	.image--full-responsive {
		width: 100%;
		height: 100%;
		display: block;
		margin: 0;
		padding: 0;
		object-fit: cover;
	}
	.readmore {
  display: inline-block;
  overflow: hidden;
  position: relative;
  font-size: 1.1rem;
  color: var(--color-primary);
  text-decoration: none;
}

.readmore .extra {
  display: inline-block;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
}

.readmore:hover .extra {
  transform: translateX(0);
}

.readmore:hover {
  padding-left: 5px; /* text se mírně posune doprava */
}

.filters {
	display: flex;
	flex-direction: column;
	width: 250px;
}

.filters label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem 0;
}

.filters h2 {
	margin: 0;
}
.prizes.prizes-individual {
	margin: 2rem 0;
  }
#filter-lektor, #filter-obtiznost {
	padding: .4rem;
	border: 1px solid var(--color-primary);
	width: 160px;
}

option {
	padding: 0.3rem;
}

}
@layer design {

	.page__header{
		height: 80vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background:
  			linear-gradient(172deg, rgba(255, 255, 255, 0.97) 34.54%, rgba(115, 115, 115, 0.00) 149.84%),
  			url('../img/header-bg.avif');                                
		background-size: cover;
		background-position: center;
		padding: 1.5rem;
	}
	.header--other{
		height: 65vh;
	}
	.page__header .btn svg {
		position: absolute;
		right: 0.2px;
		top: 0.2px;
	}
	.page__header .header__nav {
    padding: 1rem 2.5rem 1rem 1.5rem;
	}
	.header__nav {
		all: unset;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header__main{
		color: var(--color-secondary);
		height: 60vh;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: start;
	}
	.header--other {
		height: 60vh;
	}
	.main--other{
		height: 30vh;
	}
	.header__main p {
		font-size: 1rem;
		margin: 0;
	}
	.header__main h1  {
		color: var(--color-primary);
		position: relative;
		margin: 0 1rem 1rem 0;
		display: inline-block;
		line-height: 1.2;
	}
	.header__nav>a p.only-mobile{
		font-size: 32px;
		font-family: 'Unna', serif;
		color: var(--color-primary);
	}
	.header__main span {
		color: var(--color-secondary);
		position: absolute;
  		left: 77%;
  		top: 45%;
	}
	.main-m-other {
		justify-content: space-between;
	}
	.header-bottom {
		display: flex;
		flex-direction: column;
		height: 22vh;
		justify-content: space-between;
		align-content: center;
	}
	.header-bottom .btn {
		margin: 0 auto;
	}
	.header-logo-img{
		width: 5rem;
	}
	.header-policy {
		background-image: none;
		height: max-content;
	}
	.news {
		margin: 7vh 0;
	}
	.news .icon-link, .service .icon-link {
		margin: 1rem auto;
		width: max-content;
	}
	
	.icon-link span{
		padding: 0 0.3rem;
	}
	.article {
        display: flex;
        flex-direction: column;
        text-align: left;
    }
	.article-section {
		margin: 0 auto;
		display: flex;
		gap: 3rem;
		flex-direction: row;
		width: 85%;
		max-width: 1400px;
		background-color: white;
	}
	.article-section img {
		display: block;
		aspect-ratio: 3 / 2;
		width: 360px;
		object-fit: cover;
	}
	.article-footer {
		display: flex;
		justify-content: space-between;
		align-content: center;
	}
	.icons {
		display: flex;
		width: 120px;
		gap: 0.5rem;
		align-items: center;
		justify-content: center;
	}
	.icons img {
		height: 2.5rem;
		width: 2.5rem;
		margin: 0.2rem;
	}
	.service {
		text-align: center;
		width: 100%;
	}
	.service-cardss {
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;
		justify-content: center;
	}
	.service-card {
		margin: 0 auto;
    	max-width: 450px;
		position: relative;
	}
	.service-card .article-text {
		padding: 1rem;
		background-color: white;
	}
	.article-text:has(.article-text-main) h3, .article-text:has(.article-text-main) a{
		margin-left: 0.3rem;
		transition: color ease-in-out .2s;
	}
	.article-section .article-text{
		padding: 1rem;
	}
	.article-text-main {
		padding-left: 1rem;
		border-left: 2px solid var(--color-primary);
	}
	.article-text-main h3 {
		margin-bottom: -1rem;
	}
	.service-card img {
		height: 210px;
	}
	.stars {
		background-color: var(--color-primary);
		width: max-content;
		position: absolute;
		right: 10%;
		padding: 0.1rem 0.3rem;
	}
	.service-card p, .service-card h3 {
		padding-left: 1rem;
	}
	.service-card h3 {
		font-family: Montserrat;
		margin: 1rem 0 0 0;
	}
	.service h2 {
		margin: 0;
	}
	.card-header {
		border-bottom: 1px solid #B7B7B7;
	}
	.logo-nav {
		width: 100px;
	}

	.asked {
		text-align: left;
		width: 100%;
	}
	.asked-main {
		display: flex;
		justify-content: space-between;
		gap: 10%;
	}
	.questions {
		width: 80%;
	}
	.contact-links .icon-link {
		opacity: 100%;
	}
	.contact-line{
		width: 85%;
		border-left: 2px solid var(--color-primary);
		transition: border-left 0.4s ease-in-out;
		padding-left: 1rem;
	}
	.contact-line:has(a:hover){
		border-left: 6px solid var(--color-primary);
	}
	.footer-main .icon-link {
		color: var(--color-light);
	}
	.footer-main{
		display: flex;
		gap: 4rem;
		padding-left: 3rem;
	}
	.copyright {
		font-size: 0.8rem;
		color: var(--color-light);
	}
	.copyright a {
		color: var(--color-light);
	}
	/* OSTATNI HTML */

	.header-image {
		margin: 0 2rem;
		height: 65vh;
		background-image: url(../img/header-bg.avif);
		background-size: cover;           /* Pozadí pokryje celý prvek */
		background-position: center;      /* Pozadí bude vycentrováno */
		background-repeat: no-repeat;     /* Pozadí se nebude opakovat */
		background-attachment: scroll;
		align-items: end;
		display: flex;
	}

	.clanek-body {
		margin: -1rem 2rem;
		padding: 2rem 2rem;
		background-color: white;
	}

	.header-text {
		width: 75%;
		padding: 1rem 2.5rem;
		background-color: white;
		margin: 0 auto -1rem;
	}

	.images {
		margin: 0 auto;
		width: 70%;
		display: flex;
		gap: 5%;
	}
	.images img {
		height: 20vh;
		width: 30%;
		object-fit: cover;
	}
	.rezervace {
		display: none;
	}
	.only-desktop {
  display: none;
}
	.page__footer {
		background: linear-gradient(126deg, rgba(217, 91, 6, 0.90) -8.13%, rgba(217, 91, 6, 0.20) 114.33%);
		display: flex;
		flex-direction: column;
		gap: 1.2rem;
		padding: 1rem 0;
	}
	.footer-logo{
		display: flex;
		flex-direction: column;
		color: white;
		align-items: center;
		margin: 1.2rem;
	}
	.footer-logo p.h1 {
		font-family: 'Unna', sans-serif;
		font-size: 2rem;
		margin: 1rem auto 0.2rem auto;
		width: max-content;
	}
	.footer-logo span {
		margin: -0.8rem 0 0 0;
		font-size: 1.7rem;
	}
	.footer__main {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		color: white;
		text-align: center;
		width: 75%;
		margin: 1rem auto;
	}
	.footer__main a.only-mobile {
		margin: 0 auto;
	}
	.footer__icons {
		border-top: 1px solid white;
		border-bottom: 1px solid white;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-between;
		gap: 1rem;
		padding: 0.4rem;
	}
	.footer__main p {
		color: white;
	}
	.footer__statictics, .footer__links {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 70%;
		margin: 0 auto;
	}
	.footer__statictics .footer-number p {
		margin: 0rem
	}
	.footer__links a{
		color: white;
		font-weight: 200;
		transition: color ease-in-out 0.4s;
	}
	.footer__links a:hover{
		color: var(--color-primary);
	}
	.h2 {
		font-family: Unna;
		font-size: 20px;
	}

	.page__content--news .icon-link {
		margin: 1.7rem;
		margin-bottom: 3rem;
		justify-self: center;
	}

	.page__content--service {
		width: 80%;
		margin: 2rem auto;
	}

	.page__content--service h2 {
		font-size: 1.2rem;
		color: var(--color-primary);

	}
	.page__content--contact {
		display: flex;
		width: 90%;
		margin: 2rem auto;
		flex-direction: column;
		gap: 3rem;
		align-items: center;
	}

	.service-description {
		margin-left: 1rem;
	}

	.page__content--contact .contact-map {
		margin: 0 auto 4rem auto;
		width: max-content;
	}

	.contact-map {
		display: flex;
		width: 90%;
		flex-direction: column;
		padding: 1rem;
		gap: 2rem;
		background-color: #fff;
	}

	.page__content--rules {
		margin: 2rem auto;
		width: 85%;
	}

	.rule {
		margin: 2rem 0;
	}

	.rule-name {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.rule-name h2, .prizes h2, .contact h2 {
		padding: 0;
	}

	.rule p{
		margin: 0 1rem;
	}

	.article__main {
		width: 85%;
		margin: 2rem auto;
	}

	.article-part {
		padding: .5rem 1.5rem;
		background-color: #fff;
	}

	.article-part h2 {
		margin: 0;
	}

	.contact-parts {
		display: flex;
		flex-direction: column;
		gap: 4rem;
	}

	.contact {
		display: flex;
		width: 70%;
		margin: 0 auto;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.contact p, .contact a, .contact h2 {
		margin: 0.3rem 0;
	}

	#onas {
		width: 85%;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	#onas h2 {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}

	#onas .first {
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
	}

	#onas img {
		width: 100%;
		height: auto;
		max-height: 400px;
		object-fit: cover;
		grid-column: 1 / span 1;
		grid-row: 3 / span 1;
	}

	#onas .second {
		grid-column: 1 / span 1;
		grid-row: 4 / span 1;
	}

	.page__content--teachers {
		margin: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}

	.teachers {
		display: flex;
		width: 85%;
		margin: 0 auto;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}

	.teacher-card {
    position: relative;
    width: 320px;
    height: 500px;
    background: url('../img/header-bg.avif') center/cover no-repeat;
    overflow: hidden;
    cursor: pointer;
	border: solid 1px var(--color-primary);
  }

  .teacher-card.petraburianova{
	background: url('../img/PetraBurianova.avif') center/cover no-repeat;
  }

  .teacher-card.petrahandlirova{
	background: url('../img/PetraHandlirova.avif') center/cover no-repeat;
  }

  .teacher-card.petrhuk{
	background: url('../img/PetrHuk.avif') center/cover no-repeat;
  }

  .teacher-card.janahukova{
	background: url('../img/JanaHukova.avif') center/cover no-repeat;
  }

  .teacher-card.zuzanabursova{
	background: url('../img/ZuzanaBursova.avif') center/cover no-repeat;
  }


  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18%;
    background: white;
    transition: height 0.9s ease;
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
    text-align: center;
  }

.overlay h2 {
    margin: 0 auto;
    font-size: 1.2rem;
    color: #AD4600;
    z-index: 2;
  }


  .overlay p {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  opacity: 0;
  padding: 1rem;
  text-align: left;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 0.8s ease;
  color: #333;
  }

  /* při hoveru */
  .teacher-card:hover .overlay {
    height: 100%;
  }

  .teacher-card:hover .overlay p {
    opacity: 1;
    transform: translateY(0);
  }

  .page__content--prizes {
	width: 85%;
	margin: 2rem auto;
  }

  .prizes {
	display: flex;
	flex-direction: column;
	gap: 2rem;
  }

  .basic-prizes, .special-prizes {
	border: 1px solid var(--color-primary);
	padding: 1rem 2rem;
  }

  .prize {
	padding-left: 1rem;
	width: 80%;
	display: flex;
	justify-content: space-between;
  }

  .prize-offer .rule {
	padding: 1rem 0.5rem;
  }

  .reservation {
	background-color: #fff;
	padding: 1rem 2rem;
	width: 85%;
	margin: 2rem auto;
  }


	@media (min-width: 1080px) {
		.footer__main {
			max-width: 700px;
			gap: 2.5rem;
		}
	.only-desktop { display: block; }
    .only-mobile { display: none; }

	h1 {
		color: var(--color-light);
	}

	.prizes {
	flex-direction: row;
	justify-content: center;
  }

  .prize-offer {
	margin: 0 auto 3rem auto;
	width: 90%;
	display: flex;
	justify-content: space-between;
  }

  .basic-prizes, .special-prizes {
	width: 40%;
  }

  .prizes.prizes-individual {
	margin: 2rem 0;
  }

	
	.menu--active a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px; /* tloušťka čáry */
	background-color: currentColor;
	transform: scaleX(1);
	}

    .page__header{
		height: 93vh;
		padding: 0;
		padding-bottom: 1.5rem;
		background:
  			radial-gradient(140.56% 111.32% at 120.28% 15.59%, rgba(115, 115, 115, 0.00) 0%, #F5F5F5 100%),
  			url('../img/header-bg.avif'); 
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.header-policy {
		display: flex;
		justify-content: end;
		background: none;
		height: 40vh;
	}

	.main-zasady {
		display: flex;
		justify-content: center;
		align-items:flex-end;
		height: 20vh;
	}

	.main-zasady h1 {
		color: var(--color-primary);
	}

	.page__header .header__nav {
    padding: 0;
	}

	.header__main{
		height: 80vh;
		display: flex;
		flex-direction: column;
		text-align: start;
		justify-content: end;
		margin: 0rem 5rem;
		gap: 2rem;
	}

	.header__main .btn{
		position: relative;
		margin: 0;
		display: flex;
		gap: 1rem;
        align-items: center;
		justify-content: space-between;
	}
	.header__main h1{
		margin-bottom: -1rem;
		font-size: 54px;
	}
	.service-card {
		width: 350px;
		margin: 0;
	}
	.service-header {
		display: flex;
		width: 100%;
		margin: 1.5rem auto;
		justify-content: space-between;
		align-items: center;
	}
	.service-header h2 {
		padding-bottom: 1rem;
	}
	.service-header a {
		margin: 0;
	}
	.rezervace {
		display: flex;
		width: 650px;
		justify-content: space-between;
		align-items: center;
		color: white;
	}
	.rezervace p.big-text {
		color: white;
		font-size: 32px;
		margin: 0rem;
	}
	.statistika{
		margin-left: 3rem;
	}
	.statistika p {
		color: white;
		font-size: 20px;
		margin: 0.2rem;
	}
	.CTA{
		width: 250px;
	}
	.CTA p {
		color: white;
		font-size: 16px;
	}
	.menu.active a {
		color: var(--color-primary);
	}
	.service__gallery {
			grid-template-columns: repeat(6, 1fr);
			grid-template-rows: 250px;
			column-gap: 1rem;
			margin: 1rem;
			max-width: 1360px;
		}
		.place1 {
			grid-column: 1 / span 1;
			grid-row: 1 / span 1;
		}
		.place2 {
			grid-column: 2 / span 2;
			grid-row: 1 / span 1;
		}
		.place3 {
			grid-column: 5 / span 2;
			grid-row: 1 / span 1;
		}
		.place4 {
			grid-column: 4 / span 1;
			grid-row: 1 / span 1;
		}
		.contact-map {
			flex-direction: row;
			width: 85%;
			gap: 5rem;

		}
		.contact-links {
			width: 70%;
		}
		.teachers {
			flex-direction: row;
			flex-wrap: wrap;
			gap: 2rem;
			justify-content: center;
		}
		.teacher-card {
			width: 30%;
		}

		#pronajem {
			width: 85%;
		}

	#onas {
		width: 80%;
		grid-template-columns: 2fr 1fr;
	}

	#onas h2 {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}

	#onas .first {
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
	}

	#onas img {
		padding: 1.5rem;
		grid-column: 2 / span 1;
		grid-row: 1 / span 2;
	}

	#onas .second {
		grid-column: 1 / span 2;
		grid-row: 3 / span 1;
	}
	#onas .only-desktop {
		grid-column: 1 / span 2;
		grid-row: 4 / span 1;
	}
	#onas .only-desktop img {
		height: 100%;
	}
	.article-part {
		display: flex;
		flex-direction: row;
		gap: 2rem;
	}

	.article__main h2 {
		width: 17%;
		text-align: right;
		padding: 1rem;
	}

	.article-part p {
		width: 80%;
		padding: 1rem 0;
	}

	.page__content--policy .article-part p {
		width: 60%;
		padding: 1rem 0;
	}

	.page__content--policy .article-part > p {
		margin: 0;
	}

	.article-part > p {
		max-width: max-content;
		margin: 0 auto;
	}

	.page__content--joga .contact, .page__content--start .contact {
		width: 95%;
	}

	.page__content--joga .contact-line, .page__content--start .contact-line {
		width: 80%;
		display: flex;
		justify-content: space-between;
		margin: 1.5rem auto;
	}

	.page__content--joga .contact-line p, .page__content--start .contact-line p {
		margin: 0.3rem 0;
	}

	.page__content--joga .btn {
		margin: 0;
		
	}

	.contact-full {
		display: flex;
		gap: 2rem;
	}

	.contact-parts {
		gap: 2rem;
	}

	.contact {
		width: 60%;
	}

	.map.only-desktop a {
		width: max-content;
		margin: 2rem auto;
		padding-right: 2rem;
		font-size: 1.3rem;
	}

	.asked .contact {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
		width: 100%;
		text-align: left;
	}

	.prizes-indiv {
		display: flex;
		justify-content: space-around;
	}
	.prizes-individual .basic-prizes{
		width: 70%;
	}
	.prizes-individual h2 {
		padding-left: 4rem;
	}
	.prize-for-one, .prize-for-more {
		width: 30%;
	}


	.warning {
		flex-direction: row;
		gap: 2rem;
		width: 80%;
		padding: 0.2rem 2rem;
	}

}
}