#districts-block {
padding-top: 100px;
padding-bottom: 100px;
}
#districts-block .districts__container {
display: flex;
gap: 65px;
}
#districts-block .districts__container .districts-left {
max-width: 510px;
max-height: 400px;
min-width: 510px;
min-height: 400px;
position: relative;
z-index: 0;
}
#districts-block .districts__container .districts-left .districts__img {
width: 100%;
height: 100%;
}
#districts-block .districts__container .districts-left .marker {
position: absolute;
width: 14px;
height: 14px;
top: 44%;
left: 48.5%;
border-radius: 50%;
outline: 2px solid var(--colors-main);
transform: translate(-50%, -50%);
box-sizing: border-box;
}
#districts-block .districts__container .districts-left .marker::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--hover-second);
width: 10px;
height: 10px;
border-radius: 50%;
}
#districts-block .districts__container .districts-left .map-text {
position: absolute;
z-index: 1;
top: calc(44% - 29px);
left: calc(48.5% + 14px);
}
#districts-block .districts__container .districts-right {
max-width: 900px;
display: flex;
flex-direction: column;
gap: 30px;
}
#districts-block .districts__container .districts-right .districts__title {
margin-bottom: 0 !important;
}
#districts-block .districts__container .districts-right .districts__title span {
color: var(--colors-second);
}
#districts-block .districts__container .districts-right .disctricts-block-name {
display: flex;
gap: 15px;
align-items: center;
}
#districts-block
.districts__container
.districts-right
.disctricts-block-name
.disctricts-icon {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background-color: var(--text-primary-second);
border-radius: 50%;
color: var(--text-alt-head);
}
#districts-block .districts__container .districts-right ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
list-style: none;
max-width: 750px;
}
#districts-block .districts__container .districts-right ul li {
color: var(--text-primary-head);
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}
#districts-block .districts__container .districts-right ul li::before {
content: " ";
width: 10px;
height: 10px;
background: var(--colors-main);
display: inline-block;
margin-right: 10px;
}
#districts-block .map-holder {
width: 100%;
height: 100%;
}
@media (max-width: 1200px) {
#districts-block .districts__container {
gap: 20px;
}
#districts-block .districts__container .districts-right {
max-width: unset;
gap: 20px;
}
#districts-block .districts__container .districts-left {
min-width: 400px;
min-height: unset;
}
}
@media (max-width: 930px) {
#districts-block .districts__container {
flex-direction: column-reverse;
}
#districts-block .districts__container .districts-left {
max-width: unset;
max-height: unset;
width: 100%;
}
#districts-block .map-holder {
min-height: 400px;
}
#districts-block .districts__container .districts-right ul {
gap: 5px;
max-width: unset;
width: 100%;
}
}
@media (max-width: 768px) {
#districts-block {
padding-top: 0px;
padding-bottom: 0px;
}
}
@media (max-width: 600px) {
#districts-block .districts__container .districts-left {
width: 100%;
}
}
@media (max-width: 480px) {
#districts-block .districts__container .districts-left {
min-width: unset;
}
#districts-block .districts__container .districts-right {
gap: 10px;
}
#districts-block .districts__container .districts-right ul {
grid-template-columns: 1fr;
}
}