@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-BlackItalic.eot");
  src: url("../fonts/Rubik-BlackItalic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-BlackItalic.woff2") format("woff2"),
    url("../fonts/Rubik-BlackItalic.woff") format("woff"),
    url("../fonts/Rubik-BlackItalic.ttf") format("truetype"),
    url("../fonts/Rubik-BlackItalic.svg#Rubik-BlackItalic") format("svg");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Black.eot");
  src: url("../fonts/Rubik-Black.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-Black.woff2") format("woff2"),
    url("../fonts/Rubik-Black.woff") format("woff"),
    url("../fonts/Rubik-Black.ttf") format("truetype"),
    url("../fonts/Rubik-Black.svg#Rubik-Black") format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Bold.eot");
  src: url("../fonts/Rubik-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-Bold.woff2") format("woff2"),
    url("../fonts/Rubik-Bold.woff") format("woff"),
    url("../fonts/Rubik-Bold.ttf") format("truetype"),
    url("../fonts/Rubik-Bold.svg#Rubik-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-BoldItalic.eot");
  src: url("../fonts/Rubik-BoldItalic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-BoldItalic.woff2") format("woff2"),
    url("../fonts/Rubik-BoldItalic.woff") format("woff"),
    url("../fonts/Rubik-BoldItalic.ttf") format("truetype"),
    url("../fonts/Rubik-BoldItalic.svg#Rubik-BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-ExtraBold.eot");
  src: url("../fonts/Rubik-ExtraBold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-ExtraBold.woff2") format("woff2"),
    url("../fonts/Rubik-ExtraBold.woff") format("woff"),
    url("../fonts/Rubik-ExtraBold.ttf") format("truetype"),
    url("../fonts/Rubik-ExtraBold.svg#Rubik-ExtraBold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-ExtraBoldItalic.eot");
  src: url("../fonts/Rubik-ExtraBoldItalic.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/Rubik-ExtraBoldItalic.woff2") format("woff2"),
    url("../fonts/Rubik-ExtraBoldItalic.woff") format("woff"),
    url("../fonts/Rubik-ExtraBoldItalic.ttf") format("truetype"),
    url("../fonts/Rubik-ExtraBoldItalic.svg#Rubik-ExtraBoldItalic")
      format("svg");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Italic.eot");
  src: url("../fonts/Rubik-Italic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-Italic.woff2") format("woff2"),
    url("../fonts/Rubik-Italic.woff") format("woff"),
    url("../fonts/Rubik-Italic.ttf") format("truetype"),
    url("../fonts/Rubik-Italic.svg#Rubik-Italic") format("svg");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-LightItalic.eot");
  src: url("../fonts/Rubik-LightItalic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-LightItalic.woff2") format("woff2"),
    url("../fonts/Rubik-LightItalic.woff") format("woff"),
    url("../fonts/Rubik-LightItalic.ttf") format("truetype"),
    url("../fonts/Rubik-LightItalic.svg#Rubik-LightItalic") format("svg");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Light.eot");
  src: url("../fonts/Rubik-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-Light.woff2") format("woff2"),
    url("../fonts/Rubik-Light.woff") format("woff"),
    url("../fonts/Rubik-Light.ttf") format("truetype"),
    url("../fonts/Rubik-Light.svg#Rubik-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-SemiBold.eot");
  src: url("../fonts/Rubik-SemiBold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-SemiBold.woff2") format("woff2"),
    url("../fonts/Rubik-SemiBold.woff") format("woff"),
    url("../fonts/Rubik-SemiBold.ttf") format("truetype"),
    url("../fonts/Rubik-SemiBold.svg#Rubik-SemiBold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Regular.eot");
  src: url("../fonts/Rubik-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-Regular.woff2") format("woff2"),
    url("../fonts/Rubik-Regular.woff") format("woff"),
    url("../fonts/Rubik-Regular.ttf") format("truetype"),
    url("../fonts/Rubik-Regular.svg#Rubik-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Medium.eot");
  src: url("../fonts/Rubik-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-Medium.woff2") format("woff2"),
    url("../fonts/Rubik-Medium.woff") format("woff"),
    url("../fonts/Rubik-Medium.ttf") format("truetype"),
    url("../fonts/Rubik-Medium.svg#Rubik-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-MediumItalic.eot");
  src: url("../fonts/Rubik-MediumItalic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik-MediumItalic.woff2") format("woff2"),
    url("../fonts/Rubik-MediumItalic.woff") format("woff"),
    url("../fonts/Rubik-MediumItalic.ttf") format("truetype"),
    url("../fonts/Rubik-MediumItalic.svg#Rubik-MediumItalic") format("svg");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-SemiBoldItalic.eot");
  src: url("../fonts/Rubik-SemiBoldItalic.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/Rubik-SemiBoldItalic.woff2") format("woff2"),
    url("../fonts/Rubik-SemiBoldItalic.woff") format("woff"),
    url("../fonts/Rubik-SemiBoldItalic.ttf") format("truetype"),
    url("../fonts/Rubik-SemiBoldItalic.svg#Rubik-SemiBoldItalic") format("svg");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

* {
  direction: rtl;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}



:root {
  --primary-clr: #0979f9;
  --header-clr: #272727;
  --white:#FFF;
  --black:#212B37;
}

ul,
li {
  all: unset;
}

a{
  all:unset;
  color:inherit;
  display: block;
  cursor: pointer;
}

a[data-type="spread"]::before{
  content:"";
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
}

.link:hover{
  text-decoration: underline;
}

.icon {
    width: 1em;
    height: 1em;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.icon[data-type="arrow"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='10' viewBox='0 0 16 10'%3E%3Cdefs%3E%3CclipPath id='clip-Web_1920_1'%3E%3Crect width='16' height='10'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Web_1920_1' data-name='Web 1920 – 1' clip-path='url(%23clip-Web_1920_1)'%3E%3Cpath id='Path_1' data-name='Path 1' d='M261.809-616.708l-7.959-7.959,1.483-1.483,6.476,6.476,6.476-6.476,1.483,1.483Z' transform='translate(-253.809 626.429)'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.icon[data-type="menu"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='16' viewBox='0 0 24 16'%3E%3Cdefs%3E%3CclipPath id='clip-Web_1920_2'%3E%3Crect width='24' height='16'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Web_1920_2' data-name='Web 1920 – 2' clip-path='url(%23clip-Web_1920_2)'%3E%3Cpath id='Path_1' data-name='Path 1' d='M160-675.621v-1.437h23v1.438Zm0-6.856v-1.437h23v1.438Zm0-6.856v-1.437h23v1.438Z' transform='translate(-159.5 691.195)'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.icon[data-type="x"]{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.48' height='14.48' viewBox='0 0 14.48 14.48' style='&%2310; fill: %23000;&%2310;'%3E%3Cpath id='close_FILL0_wght400_GRAD0_opsz48_4_' data-name='close_FILL0_wght400_GRAD0_opsz48 (4)' d='M11.464,24.83,10.35,23.716l6.126-6.126L10.35,11.464l1.114-1.114,6.126,6.126,6.126-6.126,1.114,1.114L18.7,17.59l6.126,6.126L23.716,24.83,17.59,18.7Z' transform='translate(-10.35 -10.35)' fill='%23fff' style='&%2310; fill: %23000;&%2310;'/%3E%3C/svg%3E");
}


.image{
    overflow: hidden;
}

.image img{
    transition: transform .125s;
    width: 100%;
    height: 100%;
}

.image[data-effect="zoom"]:hover img{
    transform:scale(1.1);
}

.btn {
  position: relative;
  display: inline-flex;
  padding: 0.25em;
  color: var(--primary-clr);
  font-weight: 500;
  border: #d9d9d9 solid 1px;
  padding: 0.5em 2em;
  overflow: hidden;
  z-index: 0;
  cursor: pointer;
}

.btn:hover{
  background-color: var(--primary-clr);
  color:var(--white);
}

.stack-btn{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap:0.25em;
}

.stack-btn .icon{
  font-size: 1.5em;
  filter:invert(1);
}


.sitewidth {
  max-width: 1250px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1em;
}

.breadcrumbs{
  color:color-mix(in oklab,var(--black),15% var(--white));
  display: flex;
  align-items: center;
  gap:0.25em;
  margin: 0.5em 0;
}

.breadcrumbs > span{
  display: flex;
  gap:0.4em;
}

.breadcrumbs a:hover{
  text-decoration: underline;
}

.breadcrumbs .icon{
  font-size: 0.75em;
  transform: rotateZ(90deg);
  opacity: .65;
}

.hero-container{
  height: 23em;
  background: linear-gradient(#0006), url(https://www.angler.co.il/frontend/images/banners/1-min.webp);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  margin-bottom: 0.8em;
}

.hero-container-sitewidth{

}

.hero-container-sitewidth h1{
  color: #FFF;
  font-weight: 600;
  font-size: 3em;
  text-align: center;
  font-size: 3.8em;
}

.banner{
  height: 11em;
  background: linear-gradient(#0006), url(https://www.angler.co.il/frontend/images/banners/1-min.webp);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.banner-sitewidth{

}

.banner h1{
  color: #FFF;
  font-weight: 600;
  text-align: center;
  font-size: 3em;
}

.sections {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.section {
}

.section-title {
  font-size: 1.7em;
  font-weight: 600;
  margin-bottom: 0.4em;
}

.photo-collage {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5em;
  height: 20em;
}

.photo-collage .photo-collage-item:first-child {
  grid-row: 1 / -1;
}

.photo-collage-item {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  z-index: 0;
  padding: 0.8em;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
}

.photo-collage-item:hover .photo-collage-item-image{
  transform:scale(1.1);
}

.photo-collage-item-image{
  position: absolute;
  object-fit: cover;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter:brightness(0.6);
  transition: transform .5s;
}

.photo-collage-item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #0006;
  left: 0;
  top: 0;
  z-index: -1;
}

.photo-collage-item-title {
  font-size: 1.5em;
  font-weight: 600;
}

.tag{
    display: inline-flex;
    padding: 0.125em 0.25em;
    background: #EBEBEB;
    color: #3c3c3c;
    cursor: pointer;
    user-select: none;
}

.tag:hover{
    background-color: #dbdbdb;
}


body {
  font-family: Rubik;
  font-size: clamp(0.4rem, 1.3vw, 1rem);
  color:var(--black);
}

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

header {
  display: flex;
  height: 3.5em;
  border-top: solid 4px var(--primary-clr);
  background: var(--header-clr);
  color: #fff;
}

.header-sitewidth {
  display: flex;
  align-items: center;
}

header a:has(.logo){
  display: flex;
}

header .logo {
  margin-inline-end: 1.8em;
  height: 100%;
  max-width: 13em;
}

@media(min-width:51rem){
  .menu {
    height: 100%;
    display: flex;
  }
  
  .menu > .menu-btn-container{
    height: 100%;
    width: auto;
    background-color: transparent;
  }
  
  .menu > .menu-btn-container > .menu-btn{
    padding: 0 0.5em;
    min-width: 6em;
    width: auto;
    color:#FFF;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    background-color: transparent;
    justify-content: center;
  }
  
  .menu > .menu-btn-container > .menu-btn:hover{
    background-color: transparent;
  }
  
  .menu > .menu-btn-container.selected > .menu-btn {
    border-bottom-color: #f90909;
    background-color: transparent;
  }
  
  .menu > .menu-btn-container:not(.selected) > .menu-btn:hover {
    border-bottom-color: rgb(255, 165, 165);
  }
  
  .menu > .menu-btn-container > .menu-dropdown{
      top:100%;
      inset-inline-start: 0;
      transform:scaleY(0);
      transform-origin: top;
  }
  
  .menu > .menu-btn-container:hover > .menu-dropdown{
      transform:scaleY(1);
  }
  
  .menu-btn-container:hover > .menu-btn .menu-expand-btn{
    transform:rotateZ(90deg);
  }
  
  .menu-btn-container:has(.menu-dropdown) > .menu-btn .menu-expand-btn{
    display: block;
    filter:invert(1);
    font-size: 0.8em;
    transition: transform .125s;
  }
  
  
  .menu-btn-container {
    position: relative;
    display: flex;
    width: 100%;
  }
  
  .menu-btn-container:hover > .menu-dropdown{
    transform: scaleX(1);
  }
  
  .menu-btn {
    position: relative;
    width: 100%;
    background-color:var(--header-clr);
    display: flex;
    justify-content: space-between;
    gap:0.5em;
    align-items: center;
    cursor: pointer;
    padding:0.5em;
    color:#e1e1e1;
    border-bottom: 1px solid #444444;
  }
  
  
  .menu-btn:hover{
    background-color: #484848;
  }
  
  .menu-expand-btn{
    display: none;
  }
  
  
  .menu-dropdown{
    position: absolute;
    z-index: 999;
    min-width: 15em;
    transform: scaleX(0);
    inset-inline-start: 100%;
    transform-origin: right;
    transition: transform .2s;
  }

}

footer{
  margin-top:2em;
}

footer[data-theme="filled"]{
  background-color: var(--header-clr);
  color:var(--white);
}

footer .logo{
  max-width: 10em;
  margin: auto;
}

.footer-sitewidth{
  padding-top:1em;
  padding-bottom: 0.5em;
  display: flex;
  flex-direction: column;
}

.footer-items{
  display: flex;
  justify-content: center;
  gap: 3em;
  margin: auto;
  text-align: center;
  margin-bottom: 2em;
  flex-wrap:wrap;
}

.footer-item{

}

.footer-item ul{
  display: flex;
  flex-direction: column;
  gap:0.5em;
}

.footer-title{
  color: #FFF;
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: 0.5em;
}

.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19em, 1fr));
  gap: 1em;
}

.article-list-item {
  display: flex;
  flex-direction: column;
}

.article-list-item-content {
  padding: 0.5em 0;
}

.article-list-item .image{
  height: 17em;
}

.article-list-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}

.article-category {
  color: var(--primary-clr);
  font-weight: 600;
  font-size: 0.92em;
}

.article-list-item-title {
  font-size: 1.35em;
  font-weight: 500;
  margin-bottom: 0.3em;
}

.article-list-item-desc {
  color: #878787;
  font-size: 0.92em;
  margin-bottom: 1em;
}


/* Article Page */
.article-layout {
    display: flex;
    gap: 5em;
}

.article-start {
    width: 0;
    flex-grow: 1;
}

.article-start p{
    font-size: 1.12em;
}

.article-general {
    padding-bottom: 0.9em;
    margin-bottom: 0.9em;
    border-bottom: 4px solid color-mix(in oklab,var(--white),7% var(--black));
}

.article-banner {
    height: 24em;
    width: 100%;
    object-fit: cover;
    object-position: center;
    margin-bottom: 1em;
}


.article-title {
    font-size: 2.3em;
    line-height: 1;
}

.article-desc {
    font-weight: 400;
    line-height: 1.5em;
    color: #323232;
    font-size: 1.4em;
    margin-bottom: 0.35em;
    color: var(--black);
}

.article-content ul {
  display:flex;
  flex-direction: column;
  margin-top:0.4em;
  margin-bottom:0.4em;
}
.article-content h2 {
  margin-bottom:0.4em;
  margin-top:0.4em;
}
.article-content h3 {
  margin-top:0.4em;
  margin-bottom:0.4em;
}

.article-minor-details{
    display: flex;
    gap:0.5em;
    color: var(--gray-dark-70);
    margin-bottom: 0.5em;
    margin-bottom: 0.8em;
}

.article-content a {
  display:inline;
  color:blue;
}

.article-content a:hover {
  text-decoration:underline;
}

.article-tags{
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size:0.92em;
}

.article-end {
    width: 19em;
}

.related-content-title{
    font-size: 1.2em;
    font-weight: 600;
    color: var(--related-content-clr);
    margin-bottom: 0.5em;
}

.related-content-list{
    display: flex;
    flex-direction: column;
    gap: 2em;
    gap: 1em;
}

.related-article-item .image{
    width: 100%;
    height: 12.5em;
    margin-bottom: 0.25em;
}

.related-article-title{
    font-weight: 500;
    font-size: 1.05em;
}

.related-article-date{
    font-size: 0.92em;
    color: #787878;
}


/* Headings */
.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6 {
    font-family: 'Rubik', sans-serif; /* A clear, modern sans-serif for headings */
    margin-top: 1.5em; /* Space above headings */
    margin-bottom: 0.8em; /* Space below headings */
    font-weight: bold;
    line-height: 1.2;
}

.rich-text h1 {
    font-size: 1.6em;
    color: #1a1a1a;
}

.rich-text h2 {
    font-size: 1.3em;
    color: #2a2a2a;
}

/* Paragraphs */
.rich-text p {
    margin-bottom: 1em; /* Space between paragraphs */
}

/* Links */
.rich-text a {
    display: inline;
    color: #36c; /* A distinct color for links */
    text-decoration: none; /* Remove default underline */
}

.rich-text a:hover {
    text-decoration: underline; /* Add underline on hover for feedback */
}

/* Blockquotes */
.rich-text blockquote {
    border-left: 0.25em solid #ccc; /* 4px → 0.25em */
    padding-left: 0.9375em;        /* 15px → 0.9375em */
    margin: 1.5em 0;
    font-style: italic;
    color: #555;
}

/* Lists */
.rich-text ul, ol {
    margin-left: 1.25em; /* 20px → 1.25em */
    margin-bottom: 1em;
}

.rich-text li {
    display: revert-layer;
    margin-bottom: 0.5em;
}

/* Code Blocks */
.rich-text pre {
    background-color: #f4f4f4;
    padding: 0.9375em;   /* 15px → 0.9375em */
    border-radius: 0.3125em; /* 5px → 0.3125em */
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.rich-text code {
    font-family: 'Courier New', monospace;
    background-color: #eee;
    padding: 0.125em 0.25em; /* 2px 4px → 0.125em 0.25em */
    border-radius: 0.1875em; /* 3px → 0.1875em */
}


/* Overrides */
.bold {
    font-weight: 500;
}

.primary-bold {
    font-weight: 500;
    color: var(--primary-clr);
}

.white {
    color: var(--white);
}

[class*="mobile"]{
  display: none;
}

@media(max-width:51rem){
  [class*="mobile"]{
    display: block;
  }
  :root {

  }

  ul,
  li {

  }

  a{

  }

  .link:hover{

  }

  .btn {

  }

  .btn:hover{

  }


  .sitewidth {

  }

  
  .breadcrumbs{

  }

  .breadcrumbs a:hover{

  }

  .breadcrumbs .icon{

  }

  .hero-container{

  }

  .hero-container-sitewidth{

  }

  .hero-container-sitewidth h1{
    font-size: 2.4em;
  }

  .banner{

  }

  .banner-sitewidth{
    
  }

  .banner h1{

    
  }

  .sections {

  }

  .section {
  }

  .section-title {

  }

  .photo-collage {
    display: flex;
    flex-direction: column;
    gap:1em;
    height: auto;
  }

  .photo-collage .photo-collage-item:first-child {

  }

  .photo-collage-item {
    height: 6em;
  }

  .photo-collage-item-desc{
    display: none;
  }

  .photo-collage-item::before {

  }

  .photo-collage-item-title {

  }

  .tag{

  }

  .tag:hover{

  }


  body {
    font-size: 1rem;
  }

  header {

  }

  .header-sitewidth {
    justify-content: space-between;
  }

  header .logo {

  }
  
  
  .menu {
    border-top:solid 3px var(--primary-clr);
    font-size: 1.1em;
    transform:translateY(-100%);
    position: fixed;
    top:0;
    inset-inline-start: 0;
    height: 100vh;
    width: 100%;
    background-color: #272727;
    z-index: 999;
    overflow: hidden;
  }
  
  .menu.active{
    transition: transform .25s;
    transform:translateY(0);
    display: block;
  }

  .menu > .menu-btn-container{
    font-size: 1.1em;
  }

  .menu-modal-title{
    position: relative;
    padding: 1em;
    font-size: 1.1em;
    font-weight: 600;
    text-align: center;
  }
  
  .modal-close-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 3em;
    background-color: #424242;
    cursor: pointer;
    inset-inline-start: 0;
    top:0;
  }

  .modal-close-btn .icon{
    filter:invert(1);
  }

  .menu-btn-container {
    background-color: #5c5c5c59;
    font-size: 0.96em;
  }

  .menu-btn-container.expand > .menu-btn .menu-expand-btn .icon{
    transform: rotateZ(90deg);
  }

  .menu-btn-container.expand > .menu-dropdown{
    display: block;
  }
  
  .menu-btn-container:not(:has(.menu-dropdown)) > .menu-btn .menu-expand-btn{
    display: none;
  }
  
  .menu-btn {
    position: relative;
    padding: 1em 0.8em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom:solid 1px #3e3e3e;
  }

  .menu-btn:hover{

  }

  .menu-expand-btn{
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width:2.3em;
    height: 2.3em;
    background-color: #000;
    cursor: pointer;
  }

  .menu-expand-btn .icon{
    filter:invert(1);
    font-size: 1.2em;
  }

  .menu-expand-btn::before{
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform:scale(2);
  }

  .menu-dropdown{
    display: none;
  }

  .header-mobile-btn{
    font-size: 1.7em;
    filter: invert(1);
    cursor: pointer;
  }

  main {

  }

  .article-list {

  }

  .article-list-item {

  }

  .article-list-item-content {

  }

  .article-list-item-image{

  }

  .article-list-item-image:hover img{

  }

  .article-list-item img {

  }

  .article-category {

  }

  .article-list-item-title {

  }

  .article-list-item-desc {

  }


  /* Article Page */
  .article-layout {
    flex-direction: column;
  }

  .article-start {
    width: 100%;
  }

  .article-start p{

  }

  .article-general {

  }

  .article-banner {

  }


  .article-title {

  }

  .article-desc {

  }

  .article-minor-details{

  }

  .article-tags{

    
  }

  .article-end {
    width: 100%;
  }

  .related-content-title{

  }

  .related-content-list{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(19em,1fr));
  }

  .related-article-image{

  }

  .related-article-title{

  }

  .related-article-date{

  }
  
}