.branch-details .img-container {
	grid-area: 1/1/1/span 14;
}

.branch-details .back-btn {
	grid-area: 2/3/2/span 2;
}

.branch-details .headline {
	grid-area: 2/5/2/span 6;
	max-width: 26ch;
}

.branch-details .text-container {
	grid-area: 3/5/3/span 6;
	max-width: 70ch;
}

.branch-details .logo-container {
	grid-area: 2/12/span 2/span 2;
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	max-width: max(128px, 10.234375vw);
	mask: var(--logo-mask) no-repeat center/contain;
	-webkit-mask: var(--logo-mask) no-repeat center/contain;
	background: currentColor;
}

.branch-details .branch-details-container {
	grid-area: 4/1/4/span 14;
	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	position: relative;
}

.branch-details .branch-details-container::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	position: absolute;
	top: calc(var(--fs-20) * 1.35 + 12px);
	left: 0;
}

.branch-details .branch-details-container .detail-item {
	width: 20%;
}

.branch-details .branch-details-container .detail-item:not(:last-child) {
	border-right: 2px solid currentColor;
}

.branch-details .branch-details-container .detail-item .detail-title {
	padding: .3em 0;
}

.branch-details .branch-details-container .detail-item .detail-content {
	padding: var(--m-sm) var(--m-xs);
}

.branch-details .branch-details-container .detail-item .detail-content.btns {
	gap: var(--m-xs);
}

.branch-details .btns-container {
	grid-area: 5/2/5/span 12;
}

@media (max-width: 1199.98px) {
	.branch-details .text-container {
		grid-area: 3/4/3/span 8;
	}

	.branch-details .branch-details-container .detail-item {
		width: 33.33%;
	}
}

@media (max-width: 991.98px) {
	.branch-details .back-btn {
		grid-area: 2/4/2/span 8;
	}

	.branch-details .logo-container {
    	grid-area: 3/2/3/span 12;
		justify-self: center;
		margin-top: var(--m-sm);
	}

	.branch-details .headline {
		grid-area: 4/2/4/span 12;
		margin-top: var(--m-sm);
	}

	.branch-details .text-container {
    	grid-area: 5/4/5/span 8;
	}

	.branch-details .branch-details-container {
		grid-area: 6/1/6/span 14;
		border-top: none;
		flex-wrap: wrap;
	}

	.branch-details .branch-details-container .detail-item {
		width: 100%;
	}

	.branch-details .branch-details-container::after {
		content: none;
	}

	.branch-details .branch-details-container .detail-item .detail-title {
		border-top: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
	}

	.branch-details .branch-details-container .detail-item .detail-content {
		padding: var(--m-md) var(--gap);
	}

	.branch-details .btns-container {
    	grid-area: 7/2/7/span 12;
		justify-self: center;
		margin-top: var(--m-sm);
	}
}

@media (max-width: 767.98px) {
	.branch-details .img-container {
		aspect-ratio: 2/1;
	}

	.branch-details .back-btn {
		grid-area: 2/3/2/span 10;
	}

	.branch-details .text-container {
    	grid-area: 5/3/5/span 10;
	}
}

@media (max-width: 575.98px) {
	.branch-details .back-btn {
		grid-area: 2/2/2/span 12;
	}

	.branch-details .text-container {
    	grid-area: 5/2/5/span 12;
	}
}