*,*:before,*:after{margin:0;padding:0;position:relative;box-sizing:border-box}:root{--light: #fff;--dk: #000;--red: #fe594a;--dk-blue: #1d3557}html{color-scheme:light dark}body{min-width:320px;font-size:16px;font-family:Mulish,sans-serif;font-weight:400}h1,h2,h3,h4,h5,h6{font-family:Georgia,Times,serif;font-weight:400}h1{font-size:2.2rem}h3{font-size:1.25rem}a{color:inherit}.link:focus-within,.link:hover{color:var(--red)}.title-main{text-align:center}.title-main:after{content:"";width:100px;height:3px;position:absolute;left:50%;bottom:-10px;transform:translate(-50%);background-color:var(--red)}.page__visits{margin-left:.5em;padding:.1em .5em;font-size:.8em;background-color:var(--red);border-radius:.5em}.page__visits:empty{display:none}.container{max-width:1280px;margin-top:5rem;margin-inline:auto;display:grid}.btn{padding:.75em 2em;text-decoration:none;overflow:hidden;z-index:1}.btn:after,.btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:.25em;z-index:-1;transition:transform .3s,opacity .3s}.btn:after{transform:scale(.1);opacity:0;background-color:var(--dk-blue)}.btn:focus-within:after,.btn:hover:after{transform:scale(1);opacity:1}.btn-red{color:var(--light)}.btn-red:before{background-color:var(--red)}.btn-red:focus-within:before,.btn-red:hover:before{transform:scale(.1);opacity:0}.cards{margin-top:2.5rem;display:grid;grid-template-columns:repeat(auto-fill,18.5em);gap:2em;justify-content:center}.card{display:grid;grid-template-rows:18.5em 3.4em 3em;gap:.5em;align-items:center;text-align:center}.card__img{width:100%;aspect-ratio:1/1;margin-bottom:.5em;border-radius:10px;transition:transform .3s ease-in-out}.card__visits{padding:.5em;position:absolute;top:.5em;right:.5em;color:var(--light);font-weight:700;background-color:var(--red);border-radius:.5em;z-index:1}.card__title{align-self:flex-start}.card__btn{justify-self:center;text-transform:uppercase}.card:has(.card__btn:focus-within) .card__img,.card:has(.card__btn:hover) .card__img{transform:scale(1.03)}.counter{--card-bg: #ddd;--card-border: #bbb;justify-self:center;margin-bottom:4rem}.counter table{border-collapse:collapse}.counter tbody tr:nth-child(odd){background-color:var(--card-bg)}.counter td,.counter th{padding:.25em .5em;border:1px solid var(--card-border)}.counter th{border-bottom:2px solid var(--card-border)}.counter caption{margin-bottom:1rem}.counter-page,th.counter-views{text-align:left}.counter-views{text-align:right}@media (prefers-color-scheme: dark){.counter{--card-bg: #333;--card-border: #555}}
